Chương 3. Cấu trúc định dạng tập tin SVG • ‘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...
Chương Cấu trúc định dạng tập tin SVG • ‘set’: hình thức tốc kí thuận tiện cho ‘animate’, hữu ích việc định giá trị thuộc tính khơng phải dạng số cho thuộc tính, chẳng hạn thuộc tính ‘visibility’ • ‘animateMotion’: dịch chuyển thành phần dọc theo đường • ‘animateColor’: thay đổi giá trị màu thuộc tính đặc biệt theo thời gian Ngoài ra, SVG bổ sung thêm mở rộng tương thích với SMIL Animation: • ‘animateTransform’: thay đổi giá trị thuộc tính phép biến đổi SVG theo thời gian, chẳng hạn thuộc tính ‘transform’ • Thuộc tính ‘path’: SVG cho phép tính cú pháp liệu đường SVG định thuộc tính ‘path’ thành phần ‘animateMotion’ (SMIL Animtion cho phép tập cú pháp liệu đường thuộc tính ‘path’) • Thành phần ‘mpath’: SVG cho phép thành phần ‘animateMotion’ chứa thành phần ‘mpath’, tham chiếu đến thành phần ‘path’ để định nghĩa đườ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ả điều khiển xác tốc độ ảnh động đườ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 đối tượng tự động quay cho trục x (x-axis) hướng (hoặc ngược hướng) với vec-tơ tiếp tuyến đường di chuyển 140 Chương Cấu trúc định dạng tập tin SVG Để tương thích với khía cạnh khác ngơn ngữ, SVG dùng tham chiếu URI thơng qua thuộc tính ‘xlink:href’ để xác định thành phần đích 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) “thời điểm kết thúc tài liệu” (document end) Bởi thành phần ‘svg’ đơi gốc tài liệu XML thành phần văn phạm XML, nên “thời điểm bắt đầu tài liệu” phân đoạn tài liệu SVG cho trước định nghĩa thời gian lúc kiện ‘SVGLoad’ thành phần ‘svg’ kích hoạt “Thời điểm kết thúc tài liệu” phân đoạn tài liệu SVG thời điểm mà phân đoạn tài liệu giải phóng khơng cịn xử lý tác nhân người dùng Tuy nhiên, thành phần ‘svg’ lồng tài liệu SVG không tạo thành phân đoạn tài liệu ngữ cảnh này, không định nghĩa “thời điểm bắt đầu tài liệu” riêng Tất giá trị thời gian phân đoạn tài liệu SVG lồng tính tốn cách tương thời gian tài liệu thành phần ‘svg’ gốc Trong SVG, thuật ngữ thời gian trình diễn (presentation time) định vị trí thước đo thời gian tương đối so với “thời điểm bắt đầu tài liệu” phân đoạn tài liệu cho 3.18.3 Ví dụ ảnh động: Ví dụ minh họa tam giác di chuyển dọc theo đường di chuyển (motion path) Example animMotion01 - demonstrate motion animation computations Kết trình duyệt thời điểm 0s, 3s, 6s: Hình 3.37 Minh họa thành phần ảnh động animateMotion 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’ thành phần ‘svg’ đị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” 142 Chương Cấu trúc định dạng tập tin SVG 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 thiết lập ngôn ngữ viết script dùng để xử lý “chuỗi giá trị thuộc tính kiện (event attributes)” Giá trị content-type định kiểu phương tiện (media type) Giá trị mặc định “text/ecmascript” (tại thời điểm cơng bố, “text/ecmascript” chưa đăng kí loại phương tiện cho ECMAScript ) Giá trị giá trị mặc định có giá trị thay khác đăng kí 3.19.1.2 Khai báo cục ngơn ngữ viết script Chúng ta định ngôn ngữ đặc tả cho thành phần ‘script’ riêng biệt thuộc tính ‘type’ 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’ ngôn ngữ đánh dấu siêu văn HTML Đây nơi viết script (bằng ngôn ngữ ECMAScript) Bất kỳ hàm định nghĩa thành phần ‘script’ có phạm vi tồn cục cho toàn tài liệu Bằng cách kết hợp ngơn ngữ ECMAScript SVG DOM, truy cập đến tất thành phần SVG tài liệu, thêm, xóa thành phần tài liệu, chỉnh sửa thuộc tính… để làm cho tài liệu SVG tương tác với người dùng Ví dụ 1: Ví dụ sau định nghĩa hàm circle_click triệu gọi thuộc tính kiện ‘onclick’ 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 hình ảnh ban đầu Hình bên phải minh họa kết sau nhấp chuột lên hình trịn Example script01 - invoke an ECMAScript function from an onclick event Click on circle to change its size Kết trước sau nhấp chuột lên hình trịn trình duyệt: Hình 3.38 Minh họa chức bắt kiện chuột Một số thuộc tính thành phần ‘script’: • type= “content-type” 144 Chương Cấu trúc định dạng tập tin SVG Chỉ định ngôn ngữ viết script cho thành phần ‘script’ cho Giá trị content-type định loại phương tiện Script nhúng vào tài liệu SVG thành phần ‘script’ ví dụ trên, nằm tập tin script (*.js) liên kết vào tài liệu 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() lần*/ document.getElementById("dr").appendChild(circleNode); } Nội dung SVG tham chiếu tới tập tin SVG thơng qua thuộc tính ‘xlink:href’ : 145 Chương Cấu trúc định dạng tập tin SVG Kết trình duyệt sau thời gian: Hình 3.39 Minh họa timer thuộc tính mờ ‘opaque’ 3.19.3 Quản lý kiện Các kiện ngun nhân kích hoạt script • Các thuộc tính kiện (event attribute) “onclick” hay “onload” gắn vào thành phần SVG cụ thể, thuộc tính chứa phần script thực thi kiện xảy • Bộ lắng nghe kiện (event listener), mô tả “Document Object Events” (sự kiện mơ hình đối tượng tài liệu – DOM2-EVENTS), định nghĩa triệu gọi kiện (tương ứng với kiện cho) xảy đối tượng cho 3.19.4 Thuộc tính kiện Các thuộc tính kiện có sẵn nhiều thành phần SVG Sau danh sách thuộc tính kiện thành phần đồ họa vật chứa ngơn ngữ SVG : • onfocusin 146 Chương Cấu trúc định dạng tập tin SVG • onfocusout • onactivate • onclick • onmousedown • onmouseup • onmouseover • onmousemove • onmouseout • onload Các thuộc tính kiện cấp tài liệu: • onunload • onabort • onerror • onresize • onscroll • onzoom Các thuộc tính kiện ảnh động : • onbegin • onend • onrepeat • onload 147 Chương Cấu trúc định dạng tập tin SVG 3.19.5 ECMAScript DOM Phần mô tả số thao tác tài liệu SVG độc lập kết hợp ECMAScript 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 node tài liệu Hàm sau dùng để tạo 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); 148 Chương Cấu trúc định dạng tập tin SVG 3.19.5.4 Xóa thành phần khỏi thành phần cha function RemoveTaget(parentElement,targetElement) { parentElement.removeChild(targetElement); }; 3.19.5.5 Thiết lập thuộc tính kiện function changeColor(evt) { var target = evt.target; target.setAttributeNS(null, "fill", "purple"); } 3.19.5.6 Thiết lập lắng nghe 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, 149 Chương Cấu trúc định dạng tập tin SVG false); } svgDocument.documentElement.appendChild(rect); 150 Chương Giải pháp cho vấn đề phát triển ứng dụng đồ dựa đồ họa véc-tơ SVG Chương Giải pháp cho vấn đề phát triển ứng dụng đồ dựa đồ họa véc-tơ SVG 4.1 Các kĩ thuật công nghệ 4.2 WMS Theo đặc tả tổ chức OGC (Open Geospatial Consortium), WMS (Web Map Service) dịch vụ đồ Web Nó phải có khả sau: Tạo đồ (là ảnh , chuỗi thành phần ảnh, hay tập gói liệu tính địa lý) Đáp ứng yêu cầu nội dung đồ, Có khả cung cấp thơng tin cho chương trình khác biết loại đồ tạo loại số truy vấn sâu Một WMS client ứng dụng hay trình duyệt gửi u cầu WMS server sau: Để tạo đồ, tham số URL cần định câu truy vấn : khu vực cần vẽ, hệ trục tọa độ dùng, loại thơng tin hiển thị, định dạng trả về, kích thước trả về, kiểu hiển thị, tham số khác Để yêu cầu nội dung đồ, tham số URL cần rõ đồ yêu cầu vị trí quan tâm đồ Đề yêu cầu khả WMS server, tham số cần rõ phải chứa loại yêu cầu “capabilities” Theo đặc tả WMS, dịch vụ đồ web phải cài đặt tác vụ sau: 151 Chương Giải pháp cho vấn đề phát triển ứng dụng đồ dựa đồ họa véc-tơ SVG GetCapabilities (bắt buộc phải có): cung cấp thơng tin khả WMS cho client GetMap (yêu cầu): cung cấp đồ địa lý phát sinh từ liệu địa lý theo yêu cầu client GetFeatureInfo (tùy chọn): cung cấp thơng tin vị trí địa lý đồ mà client yêu cầu 4.3 WFS Theo đặc tả OGC, WMS cho phép client nạp đè hình ảnh từ nhiều WMS Internet để hiển thị Trong đó, WFS dịch vụ tính web cho phép client truy xuất cập nhật liệu địa lý mã hố ngơn ngữ đánh dấu thơng tin địa lý GML từ nhiều dịch vụ tính web WFS Để biết thêm GML xin tham khảo đặc tả GML tại: http://www.opengis.org/legal/ipr_faq.htm Hình 4.1 Mơ hình kiến trúc giao tiếp client WFS Một WFS phải cài đặt chức sau: GetCapabilities : Mỗi WFS phải có khả mơ tả khả Cụ thể, WFS phải rõ loại tính cung cấp tác vụ hỗ trợ loại tính 152 Chương Giải pháp cho vấn đề phát triển ứng dụng đồ dựa đồ họa véc-tơ SVG DescribleFeatureType: Mỗi WFS phải có khả mơ tả cấu trúc loại tính mà cung cấp GetFeature: Mỗi WFS phải có khả xử lý yêu cầu truy xuất tính kèm theo ràng buộc định câu truy vấn từ phía client GetGmlObject (tùy chọn): Mỗi WFS xử lý yêu cầu truy xuất thành phần cách lần theo liên kết (Xlinks) tham chiếu tới XML IDS thành phần Một client định có XLinks nhúng lồng liệu thành phần nhận từ WFS hay khơng Transaction: Mỗi WFS xử lý yêu cầu tác vụ giao dịch Một yêu cầu giao dịch có nhiều tác vụ, tác vụ tạo, cập nhật, xóa tính địa lý LockFeature: Mỗi WFS xử lý u cầu khố hay nhiều thể loại tính suốt trình giao dịch Điều đảm bảo giao dịch thực theo trình tự khơng gây xung đột, sai lệch liệu Dựa khả WFS cung cấp, ba loại WFS định nghĩa sau: WFS (Basic WFS) : WFS dịch vụ tính đọc, cài đặt khả GetCapabilities, DescribeFeatureType GetFeature XLinkWFS : Ngoài khả WFS bản, loại WFS hỗ trợ khả GetGmlObject WFS giao dịch (Transaction WFS) : Ngoài khả WFS bản, phải cài đặt tác vụ giao dịch có khả GetGmlObject LockFeature 153 Chương Giải pháp cho vấn đề phát triển ứng dụng đồ dựa đồ họa véc-tơ SVG 4.4 GEOSERVER Geoserver dịch vụ web viết Java xây dựng dựa đặc tả WFS WMS OGC đưa Geoserver chương trình mã nguồn mở giấy phép GPL 2.0 Nó sản phẩm tạo đội ngũ toàn cầu tổ chức nhà phát triển tự Geoserver WFS giao dịch Nó có tất khả GetCapabilities, DescribeFeatures, GetFeatures, Transaction Hiện có Geoserver-1.3 Mỗi phiên Geoserver có hai để cài đặt, tập tin WAR tập tin EXE Để chạy Geoserver cần phải cài JDK1.4 (java virtualmachine) Trong phạm vi chương trình ứng chúng em sử dụng Geosever-1.3.exe Có đặc điểm Geoserver phát sinh đồ SVG chưa có định kiểu Dữ liệu thông tin địa lý sử dụng cho Geoserver lấy từ ShapeFile, Oracle Spatial, ArcSDE Geoserver xây dựng thiết kế phân tầng sau sơ đồ sau: 154 Chương Giải pháp cho vấn đề phát triển ứng dụng đồ dựa đồ họa véc-tơ SVG Hình 4.2 Sơ đồ phân tầng GeoServer 4.5 Kiến trúc ứng dụng Chương trình đồ điện tử thành phố hỗ trợ tìm đường xây dựng theo kiến trúc client-server Cho phép người dùng xem đồ cách mềm dẻo tiện lợi, cho phép người phóng to thu nhỏ đồ, cho phép người dùng tìm đường ngắn tra cứu thông tin đường 155 Chương Giải pháp cho vấn đề phát triển ứng dụng đồ dựa đồ họa véc-tơ SVG Hình 4.3 Sơ đồ kiến trúc ứng dụng 4.6 Client-side Client nơi dùng để hiển thị, giao tiếp, tương tác với người dùng Bằng đoạn script, client nhận xử lý số tương tác client thao tác chọn vùng đồ quan tâm, chọn điểm đầu, điểm cuối tìm đường tính toán kiểm tra giá trị trước yêu cầu server xử lý làm thiểu bớt xử lý không cần thiết phải làm phiền đến server Client nơi hiển thị đồ, đồ nội dung SVG nên cần phải có chương trình plug-in để hiển thị, SVGViewer 4.7 Server- side Server nơi nhận xử lý yêu cầu client Các yêu cầu : getMap (lấy đồ) theo số ràng buộc vùng đồ cần lấy, số tính cần lấy…, getBestPath (tìm đường ngắn nhất)….Server sử dụng dịch vụ GeoServer để tạo đồ tra cứu thông tin đối tượng địa lý Server không dùng đồ SVG GeoServer phát sinh nội dung SVG phát sinh cịn nghèo nàn cách trình diễn tương tác với người dùng, Server nhận liệu GML trả Geoserver để tạo đồ SVG trả cho Client Để tìm đường ngắn server sử dụng dịch vụ tìm đường ngắn để phận chia công việc với server tạo 156 Chương Giải pháp cho vấn đề phát triển ứng dụng đồ dựa đồ họa véc-tơ SVG đồ Điều làm cho công việc sang sẻ xử lý song song làm giảm thời gian đợi cho client Dịch vụ tìm đường dùng liệu topo để tìm đường ngắn vừa nhanh vừa dễ xây dựng Môi trường cài đặt server Visual Studio.Net ngôn ngữ sử dụng C# Server Client Reques t Service tìm đường Map, Path Bản đồ ASPX Requesst GML Geoserver Hình 4.4 Kiến trúc client-server cài đặt 157 Chương Giải pháp cho vấn đề phát triển ứng dụng đồ dựa đồ họa véc-tơ SVG 4.8 Sơ đồ tương tác chi tiết client server SQL SERVER Yêu cầu tìm đường Server Kết tìm đường Client Service tìm đường Tập tin SVG trả Nhúng vào Bản đồ ASPX Requesst GML Yêu cầu tập tin svg Geoserver 1.3 Adobe SVG Viewer plugin *.shp *.dbf MySQL Server 4.1 Tập tin hình học (shape file) *.frm *.myd, *.myi Tập tin MySQL Hình 4.5 Kiến trúc chi tiết client-server cài đặt 158 Chương Giải pháp cho vấn đề phát triển ứng dụng đồ dựa đồ họa véc-tơ SVG Phần sau mơ tả chi tiết kiến trúc hình 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ài đặt đề tài trình duyệt Trình duyệt Web viết trang ngôn ngữ HTML kết hợp với Javascript Khi mở trang web ứng dụng lần phiên làm việc máy tính, client gửi yêu cầu đến server để lấy đồ svg Khi nhận tập tin svg từ server, trang Web phía client tự động cập nhật nội dung tập tin svg vào cửa sổ trình duyệt Bộ hiển thị SVG (SVG Viewer) tự động xây dựng lại phần khung 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 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ó đặc tính định dạng véc-tơ thiết kế cho thành phần bên nội dung tương tác trực tiếp với người sử dụng thông qua phân cấp DOM (Document Object Model) (Mơ hình đối tượng tài liệu) Phía client tận dụng đặc tính SVG để đơn giản hóa việc xử lý thao tác Mỗi thành phần giao tiếp với người sử dụng Khi người sử dụng nhấn chuột lên thành phần (chẳng hạn đường) thành phần tự động phát sinh kiện gửi lên nút phân cấp DOM 159 ... dung SVG tham chiếu tới tập tin SVG thông qua thuộc tính ‘xlink:href’ :