TÌM HIỂU SVG VÀ ỨNG DỤNG - 8 potx

Chương 3. Cấu trúc định dạng tập tin SVG 140 • ‘set’: hình thức tốc kí thuận tiện cho ‘animate’, rất hữu ích trong việc chỉ định các giá trị thuộc tính không phải dạng số cho các thuộc tính, chẳng hạn như thuộc tính ‘visibility’. • ‘animateMotion’: dịch chuyển một thành phần dọc theo một đường. • ‘animateColor’: thay đổi giá trị màu của các thuộc tính đặc biệt theo thời gian. Ngoài ra, SVG bổ sung thêm các mở rộng tương thích với SMIL Animation: • ‘animateTransform’: thay đổi giá trị c ủa một trong các thuộc tính của phép biến đổi trong SVG theo thời gian, chẳng hạn như thuộc tính ‘transform’. • Thuộc tính ‘path’: SVG cho phép bất kỳ tính năng nào của cú pháp dữ liệu đường của SVG được chỉ định trong thuộc tính ‘path’ của thành phần ‘animateMotion’ (SMIL Animtion chỉ cho phép một tập con cú pháp dữ liệu đường trong thuộc tính ‘path’). • Thành phần ‘mpath’: SVG cho phép một thành phần ‘animateMotion’ chứa một thành phần con ‘mpath’, tham chiếu đến một thành phần ‘path’ để định nghĩa một đường di chuyển. • Thuộc tính ‘keyPoint’: SVG bổ sung thuộc tính ‘keyPoint’ cho thành phần ‘animateMotion’ cung cấp khả năng điều khiển chính xác về tốc độ của ảnh động trên đường di chuyển. • Thuộc tính ‘rotate’: SVG bổ sung thuộc tính ‘rotate’ cho thành phần ‘animateMotion’ để điều khiển một đối tượng tự động quay sao cho trục x (x-axis) cùng hướng (hoặc ngược hướng) với vec-tơ tiếp tuy ến của đường di chuyển. Chương 3. Cấu trúc định dạng tập tin SVG 141 Để tương thích với các khía cạnh khác của ngôn ngữ, SVG dùng tham chiếu URI thông qua thuộc tính ‘xlink:href’ để xác định các thành phần là đích của hoạt ảnh. SMIL Animation yêu cầu “ngôn ngữ chủ” phải định nghĩa đầy đủ ý nghĩa cho “thời điểm bắt đầu tài liệu” (document start) và “thời điểm kết thúc tài liệu” (document end). Bởi vì một thành phần ‘svg’ đôi khi là gốc của cây tài liệu XML và đôi khi cũng là một thành phần của văn ph ạm XML, nên “thời điểm bắt đầu tài liệu” của một phân đoạn tài liệu SVG cho trước sẽ được định nghĩa là thời gian ngay lúc sự kiện ‘SVGLoad’ của thành phần ‘svg’ được kích hoạt. “Thời điểm kết thúc tài liệu” của phân đoạn tài liệu SVG là thời điểm mà phân đoạn tài liệu giải phóng và không còn được xử lý bởi tác nhân người dùng. Tuy nhiên, các thành phần ‘svg’ được lồng trong một tài li ệu SVG sẽ không tạo thành phân đoạn tài liệu trong ngữ cảnh này, không định nghĩa một “thời điểm bắt đầu tài liệu” riêng. Tất cả các giá trị thời gian trong phân đoạn tài liệu SVG lồng được tính toán một cách tương đối với thời gian tài liệu của thành phần ‘svg’ gốc. Trong SVG, thuật ngữ thời gian trình diễn (presentation time) chỉ định một vị trí trên thước đo thời gian tương đối so v ới “thời điểm bắt đầu tài liệu” của phân đoạn tài liệu được cho. 3.18.3 Ví dụ ảnh động: Ví dụ minh họa một tam giác di chuyển dọc theo một đường di chuyển (motion path). <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="5cm" height="3cm" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" > <desc>Example animMotion01 - demonstrate motion animation computations</desc> <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" /> <! Draw the outline of the motion path in blue, along Chương 3. Cấu trúc định dạng tập tin SVG 142 with three small circles at the start, middle and end. > <path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" /> <circle cx="250" cy="100" r="17.64" fill="blue" /> <circle cx="400" cy="250" r="17.64" fill="blue" /> <! Here is a triangle which will be moved about the motion path. It is defined with an upright orientation with the base of the triangle centered horizontally just above the origin. > <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" > <! Define the motion path animation > <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" > <mpath xlink:href="#path1"/> </animateMotion> </path> </svg> Kết quả trên trình duyệt tại thời điểm 0s, 3s, 6s: 3.19 Viết script (kịch bản) 3.19.1 Chỉ định ngôn ngữ viết script 3.19.1.1 Chỉ định ngôn ngữ viết script mặc định Thuộc tính ‘contentScriptType’ trên thành phần ‘svg’ chỉ định ngôn ngữ viết script mặc định cho phân đoạn tài liệu cho trước. • contentScriptType = “content-type” Hình 3.37. Minh họa thành phần ảnh động animateMotion Chương 3. Cấu trúc định dạng tập tin SVG 143 Xác định kiểu ngôn ngữ viết script mặc định cho tài liệu cho trước. Thuộc tính này thiết lập ngôn ngữ viết script được dùng để xử lý các “chuỗi giá trị trong thuộc tính sự kiện (event attributes)”. Giá trị content-type chỉ định một kiểu phương tiện (media type). Giá trị mặc định là “text/ecmascript” (tại thời điểm công bố, “text/ecmascript” chưa được đăng kí là một loại phương tiện cho ECMAScript ). Giá trị này sẽ là giá trị mặc định cho tới khi có một giá trị thay thế khác được đăng kí. 3.19.1.2 Khai báo cục bộ ngôn ngữ viết script Chúng ta có thể chỉ định ngôn ngữ đặc tả cho mỗi thành phần ‘script’ riêng biệt bằng thuộc tính ‘type’ trên thành phần ‘script’. 3.19.2 Thành phần ‘script’ Thành phần ‘script’ tương đương với thành phần ‘script’ trong ngôn ngữ đánh dấu siêu văn bản HTML. Đây là nơi viết script (bằng ngôn ngữ ECMAScript). Bất kỳ hàm nào được định nghĩa trong thành phần ‘script’ đều có phạm vi toàn c ục cho toàn bộ tài liệu hiện tại. Bằng cách kết hợp ngôn ngữ ECMAScript và SVG DOM, chúng ta có thể truy cập đến tất cả các thành phần SVG trong tài liệu, như thêm, xóa các thành phần trong cây tài liệu, chỉnh sửa thuộc tính… để làm cho tài liệu SVG có thể tương tác với người dùng. Ví dụ 1 : Ví dụ sau định nghĩa một hàm circle_click được triệu gọi bởi thuộc tính sự kiện ‘onclick’ trên thành phần ‘circle’. Khi nhấp chuột lên hình tròn, hình tròn thay đổi bán kính. Hình bên trái dưới đây là hình ảnh ban đầu. Hình bên phải minh họa kết quả sau khi nhấp chuột lên hình tròn. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="6cm" height="5cm" viewBox="0 0 600 500" Chương 3. Cấu trúc định dạng tập tin SVG 144 xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example script01 - invoke an ECMAScript function from an onclick event </desc> <! ECMAScript to change the radius with each click > <script type="text/ecmascript"> <![CDATA[ function circle_click(evt) { var circle = evt.target; var currentRadius = circle.getAttribute("r"); if (currentRadius == 100) circle.setAttribute("r", currentRadius*2); else circle.setAttribute("r", currentRadius*0.5); } ]]> </script> <! Outline the drawing area with a blue line > <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/> <! Act on each click event > <circle onclick="circle_click(evt)" cx="300" cy="225" r="100" fill="red"/> <text x="300" y="480" font-family="Verdana" font-size="35" text- anchor="middle"> Click on circle to change its size </text> </svg> Kết quả trước và sau khi nhấp chuột lên hình tròn trên trình duyệt: Một số thuộc tính của thành phần ‘script’: • type= “content-type” Hình 3.38. Minh họa chức năng bắt sự kiện chuột Chương 3. Cấu trúc định dạng tập tin SVG 145 Chỉ định ngôn ngữ viết script cho thành phần ‘script’ được cho. Giá trị content-type chỉ định một loại phương tiện. Script có thể được nhúng vào tài liệu SVG trong thành phần ‘script’ như ví dụ trên, hoặc cũng có thể nằm trong một tập tin script (*.js) được liên kết vào trong tài liệu như sau: Tập tin “createnode.js” chứa đoạn script sau: function pinta() { var circleNode = svgDocument.createElement("circle"); circleNode.setAttribute("cx", 300*Math.random()); circleNode.setAttribute("cy", 300*Math.random()); circleNode.setAttribute("r", 30); circleNode.setAttribute("style", "stroke: none; " + "opacity: 0.3; " + "fill: rgb(" + 255*Math.random() + "," + 255*Math.random() + "," + 255*Math.random() + ");"); setTimeout("window.pinta()", 300);/*sau 0.3s gọi pinta() này một lần*/ document.getElementById("dr").appendChild(circleNode); } Nội dung SVG tham chiếu tới tập tin SVG trên thông qua thuộc tính ‘xlink:href’ : <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd "> <svg width="300" height="300" onload="pinta()"> <script type="text/ecmascript" xlink:href="createnode.js"> </script> <g id="dr" /> </svg> Chương 3. Cấu trúc định dạng tập tin SVG 146 Kết quả trên trình duyệt sau một thời gian: Hình 3.39. Minh họa bộ timer và thuộc tính mờ ‘opaque’ 3.19.3 Quản lý sự kiện Các sự kiện chính là nguyên nhân kích hoạt script. • Các thuộc tính sự kiện (event attribute) như “onclick” hay “onload” được gắn vào một thành phần SVG cụ thể, các thuộc tính này chứa phần script sẽ được thực thi khi các sự kiện xảy ra. • Bộ lắng nghe sự kiện (event listener), được mô tả trong “Document Object Events” (sự kiện mô hình đối tượng tài li ệu – DOM2-EVENTS), được định nghĩa sẽ được triệu gọi khi một sự kiện (tương ứng với sự kiện được cho) xảy ra trên đối tượng được cho. 3.19.4 Thuộc tính sự kiện Các thuộc tính sự kiện có sẵn trên nhiều thành phần SVG. Sau đây là danh sách các thuộc tính sự kiện trên các thành phần đồ họa và vật chứa của ngôn ngữ SVG : • onfocusin Chương 3. Cấu trúc định dạng tập tin SVG 147 • onfocusout • onactivate • onclick • onmousedown • onmouseup • onmouseover • onmousemove • onmouseout • onload Các thuộc tính sự kiện cấp tài liệu: • onunload • onabort • onerror • onresize • onscroll • onzoom Các thuộc tính sự kiện ảnh động : • onbegin • onend • onrepeat • onload Chương 3. Cấu trúc định dạng tập tin SVG 148 3.19.5 ECMAScript và DOM Phần này mô tả một số thao tác cơ bản trên cây tài liệu SVG độc lập kết hợp ECMAScript và DOM. 3.19.5.1 Lấy đối tượng tài liệu function init(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; } 3.19.5.2 Lấy thành phần gốc svgRoot = svgDocument.documentElement; 3.19.5.3 Tạo một node trong cây tài liệu Hàm sau dùng để tạo một thành phần ‘circle’ var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; var shape = svgDocument.createElementNS(svgns, "circle"); shape.setAttributeNS(null, "cx", 25); shape.setAttributeNS(null, "cy", 25); shape.setAttributeNS(null, "r", 20); shape.setAttributeNS(null, "fill", "green"); svgDocument.documentElement.appendChild(shape); } Chương 3. Cấu trúc định dạng tập tin SVG 149 3.19.5.4 Xóa một thành phần ra khỏi thành phần cha của nó function RemoveTaget(parentElement,targetElement) { parentElement.removeChild(targetElement); }; 3.19.5.5 Thiết lập thuộc tính sự kiện <rect x="5" y="5" width="40" height="40" fill="red" onclick="changeColor(evt)"/> function changeColor(evt) { var target = evt.target; target.setAttributeNS(null, "fill", "purple"); } 3.19.5.6 Thiết lập bộ lắng nghe sự kiện var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; var rect = svgDocument.createElementNS(svgns, "rect"); rect.setAttributeNS(null, "x", 5); rect.setAttributeNS(null, "y", 5); rect.setAttributeNS(null, "width", 40); rect.setAttributeNS(null, "height", 40); rect.setAttributeNS(null, "fill", "green"); rect.addEventListener("click", changeColor, [...]... client-server được cài đặt 157 Chương 4 Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG 4 .8 Sơ đồ tương tác chi tiết giữa client và server SQL SERVER Yêu cầu tìm đường đi Server Kết quả tìm đường Client Service tìm đường Tập tin SVG trả về Nhúng vào Bản đồ ASPX Requesst GML Yêu cầu một tập tin svg Geoserver 1.3 Adobe SVG Viewer plugin *.shp *.dbf MySQL Server 4.1 Tập tin hình học... 4.5 Kiến trúc ứng dụng Chương trình bản đồ điện tử thành phố và hỗ trợ tìm đường đi được xây dựng theo kiến trúc client-server Cho phép người dùng xem bản đồ một cách mềm dẻo và tiện lợi, cho phép người có thể phóng to thu nhỏ bản đồ, cho phép người dùng tìm đường đi ngắn nhất và tra cứu thông tin đường đi 155 Chương 4 Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG Hình 4.3...Chương 3 Cấu trúc định dạng tập tin SVG false); } svgDocument.documentElement.appendChild(rect); 150 Chương 4 Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG Chương 4 Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG 4.1 Các kĩ thuật và công nghệ 4.2 WMS Theo đặc tả của tổ chức OGC (Open Geospatial Consortium),... đồ SVG của GeoServer phát sinh vì nội dung SVG được phát sinh còn nghèo nàn về cách trình diễn và tương tác với người dùng, Server sẽ nhận dữ liệu GML trả về của Geoserver để tạo bản đồ SVG trả về cho Client Để tìm đường đi ngắn nhất server sử dụng dịch vụ tìm đường đi ngắn nhất để phận chia công việc với server tạo bản 156 Chương 4 Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ... client-server được cài đặt 1 58 Chương 4 Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG Phần sau đây sẽ mô tả chi tiết kiến trúc trong hình trên 4 .8. 1 Mô tả chi tiết client 4 .8. 1.1 Vấn đề hiển thị nội dung SVG ở phía client Client được cài đặt trong đề tài này là một trình duyệt Trình duyệt Web này được viết bằng trang ngôn ngữ HTML kết hợp với Javascript Khi mở trang web của ứng. .. bản đồ, bản đồ là một nội dung SVG nên cần phải có chương trình plug-in để hiển thị, đó là SVGViewer 4.7 Server- side Server là nơi nhận và xử lý các yêu cầu của client Các yêu cầu đó là : getMap (lấy bản đồ) theo một số ràng buộc về vùng bản đồ cần lấy, số tính năng cần lấy…, và getBestPath (tìm đường đi ngắn nhất)….Server sử dụng dịch vụ của GeoServer để tạo bản đồ và tra cứu thông tin của đối tượng... phạm vi chương trình ứng chúng em sử dụng Geosever-1.3.exe Có một đặc điểm mới của Geoserver là phát sinh bản đồ SVG nhưng chưa có định kiểu Dữ liệu thông tin địa lý được sử dụng cho Geoserver lấy từ ShapeFile, Oracle Spatial, ArcSDE Geoserver được xây dựng trên thiết kế phân tầng như sau sơ đồ sau: 154 Chương 4 Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG Hình 4.2 Sơ đồ... của ứng dụng lần đầu tiên trong một phiên làm việc trên máy tính, client sẽ gửi một yêu cầu đến server để lấy bản đồ svg Khi đã nhận được tập tin svg này từ server, trang Web ở phía client sẽ tự động cập nhật nội dung tập tin svg này vào trong cửa sổ trình duyệt Bộ hiển thị SVG (SVG Viewer) sẽ tự động xây dựng lại phần khung trong chứa thẻ svg cửa sổ trình duyệt Client Câu lệnh yêu cầu tập tin svg http://169.254.131. 98: port/GetSVG... http://169.254.131. 98: port/GetSVG Server Tập tin svg Hình 4.6 Minh họa yêu cầu hiển thị nội dung ở phía client 4 .8. 1.2 Vấn đề tương tác với nội dung SVG ở phía client SVG có một đặc tính là định dạng véc-tơ được thiết kế sao cho các thành phần bên trong nội dung có thể tương tác trực tiếp với người sử dụng thông qua cây phân cấp DOM (Document Object Model) (Mô hình đối tượng tài liệu) Phía client sẽ tận dụng đặc... véc-tơ SVG Hình 4.3 Sơ đồ kiến trúc ứng dụng 4.6 Client-side Client là nơi dùng để hiển thị, giao tiếp, và tương tác với người dùng Bằng các đoạn script, client có thể nhận và xử lý một số tương tác ngay tại client như thao tác chọn vùng bản đồ quan tâm, chọn điểm đầu, điểm cuối khi tìm đường đi được tính toán và kiểm tra giá trị trước khi yêu cầu server xử lý sẽ làm thiểu bớt những xử lý không cần thiết . đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG 155 Hình 4.2. Sơ đồ phân tầng của GeoServer 4.5 Kiến trúc ứng dụng Chương trình bản đồ điện tử thành phố và hỗ trợ tìm đường đi được. cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG 156 Hình 4.3. Sơ đồ kiến trúc ứng dụng 4.6 Client-side Client là nơi dùng để hiển thị, giao tiếp, và tương tác với người. trúc client-server được cài đặt Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG 1 58 4 .8 Sơ đồ tương tác chi tiết giữa client và server