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

Phụ lục A Ý nghĩa: tagLen chỉ định chiều dài thực sự của thẻ trong trường hợp này là 3 byte (ffffff). tagSetBackgroundColor thiết lập màu nền là màu trắng tagLen 2: tagDoAction action code 7 stop action code 0 Ý nghĩa: Dừng khung hình (hành động được thực hiện là Stop. Mã hành động là 0 có nghĩa là không còn hành động nào cần được thực hiện.) 3. VRML Một ví dụ về tập tin VRML: Hình A.1. Ví dụ về ảnh VRML Hình trên được phát sinh từ đoạn mã nguồn sau đây: (Nguồn: http://www.vrml.org/Specifications/VRML97/part1/introduction.html) #VRML V2.0 utf8 Transform { children [ NavigationInfo...

Phụ lục A Ý nghĩa: tagLen định chiều dài thực thẻ trường hợp byte (ffffff) tagSetBackgroundColor thiết lập màu màu trắng tagLen 2: tagDoAction action code stop action code Ý nghĩa: Dừng khung hình (hành động thực Stop Mã hành động có nghĩa khơng cịn hành động cần thực hiện.) VRML Một ví dụ tập tin VRML: Hình A.1 Ví dụ ảnh VRML Hình phát sinh từ đoạn mã nguồn sau đây: (Nguồn: http://www.vrml.org/Specifications/VRML97/part1/introduction.html) #VRML V2.0 utf8 Transform { children [ NavigationInfo { headlight FALSE } # We'll add our own light DirectionalLight { direction 0 -1 } # First child # Light illuminating the scene Transform { # Second child - a red sphere 180 Phụ lục A } translation children [ Shape { geometry Sphere { radius 2.3 } appearance Appearance { material Material { diffuseColor 0 } # Red } } ] Transform { # Third child - a blue box translation -2.4 rotation 1 children [ Shape { geometry Box {} appearance Appearance { material Material { diffuseColor 0 } # Blue } } ] } } ] # end of children for world HGML Sau mơ tả phần ba phần: • Các đối tượng đồ họa • Chủ đề / sử dụng lại hình ảnh sẵn có • Chỉnh sửa ảnh Các đối tượng đồ họa Khái niệm đưa nhằm cho phép ảnh tải hiển thị mạng không dây nhanh so với cách sử dụng chuẩn HTML Ý tưởng nằm chỗ giảm thay ảnh bitmap lớn ảnh tương đương dựa đồ họa véc-tơ Các ảnh véc-tơ vẽ cách sử dụng tập hợp định nghĩa sẵn gồm thẻ giống HTML liên quan đến đối tượng đồ họa Các đối tượng gồm cấu trúc hình học đường thẳng, đường trịn, hình vng, 181 Phụ lục A đa giác, v.v… Sau thành phần ảnh vẽ độc lập với cách sử dụng thẻ lệnh, chẳng hạn sau: HGML cung cấp 18 thẻ sau, chia thành ba nhóm ứng với ba danh mục thể bảng sau: Đối tượng đồ họa Chủ đề ảnh Chỉnh sửa ảnh ARC CLIPART COPY ARROW THEME FLIP ELLIPSE PASTE LINE ROTATE LINETO LINEREL LINK ORIGIN POLYGON RECTANGLE SETSTYLE TEXT Bảng A.2 Danh sách 18 thẻ HGML Nhóm bảng gồm thẻ dùng cho chức vẽ bản, cho phép tạo lượng ảnh ghép đơn giản mà hiệu Ví dụ: ARC Vẽ cung có độ rộng, chiều cao góc định so với gốc tọa độ tuyệt đối Chủ đề / sử dụng lại hình ảnh sẵn có HGML cung cấp số ảnh vẽ trước để dùng nội dung trang Các ảnh dễ sử dụng nhiều với ảnh phải định nghĩa đối tượng đồ họa Ví dụ: CLIPART Cho phép lấy ảnh từ nơi lưu trữ máy tính hiển thị lên tọa độ xác định 183 Phụ lục A Chỉnh sửa ảnh HGML cho phép chỉnh sửa ảnh bitmap hình cách sử dụng thẻ lệnh COPY, PASTE, FLIP and ROTATE Những thẻ tạo nhằm tối ưu hóa việc tạo kiểu ảnh Ví dụ, ảnh ghép tạo cách sử dụng vài đối tượng đồ họa điều yêu cầu vị trí khác hình Do đó, chép đến vị trí mà khơng cần phải vẽ lại Việc chép thực thơng qua nhớ đệm hình Bộ hiển thị HGML đảm trách việc Chức giúp tối ưu hóa việc lưu trữ ảnh chủ đề Ví dụ, thay phải lưu trữ bốn ký hiệu mũi tên (sang trái, sang phải, lên, xuống), người sử dụng cần lưu trữ ảnh đơn sở liệu Sau dùng thẻ lệnh ROTATE (phép xoay) FLIP (di chuyển) để canh chỉnh chúng lại vị trí Ví dụ: COPY Sao chép phân đoạn hình (dạng hình chữ nhật) vào nhớ đệm Ảnh sau chép hoàn toàn giống với ảnh gốc 184 tọa độ góc trái-trên-phải- Phụ lục A So sánh việc truyền tải đồ họa theo chuẩn HTML với truyền tải đồ họa theo chuẩn HGML HTML Thông số tập tin Thời gian truyền tải (qua mạng GSM)* HGML Tập tin HTML - 5KB Tập tin HTML - 2KB Ảnh GIF - 83KB Tập tin HGML - 13KB minute 13 giây 18 giây (Nguồn: www.w3.org/TR/NOTE-HGML.htm) Chú thích: * bao gồm thời gian truyền hiển thị/ vẽ toàn trang Tốc độ vẽ 9600 bps (bits per second) Ưu điểm HGML HGML, so sánh với sử dụng đồ họa nội tuyến HTML, có ưu điểm sau: • Tối ưu hóa hiệu suất cho mạng khơng dây • Cửa sổ trình duyệt xem phông nền, cho phép phủ lớp thành phần hình ảnh định vị tuyệt đối trang (nghĩa hình ảnh xuất với “mối quan hệ chặt chẽ thành phần nó” thể kích thước nào; đồng thời ảnh phép cuộn, cần thiết, bên cửa sổ trình duyệt tùy ý ) • Cung cấp ảnh định nghĩa sẵn nhằm giúp việc xây dựng trang đơn giản • Có thể nhúng vào HTML sử dụng độc lập (Nguồn: www.w3.org/TR/NOTE-HGML.htm) DrawML Các thành phần ngôn ngữ DrawML: DrawML ngơn ngữ đơn giản Nó định nghĩa năm thành phần 185 Phụ lục A • Thành phần ‘drawml’: Một ảnh vẽ thông báo đến tài liệu thành phần • Thành phần ‘shape’: thành phần tổng quát chứa thuộc tính lớp Java • Thành phần ‘line’: vẽ đường thẳng hai nhiều vị trí • Thành phần ‘pos’: định nghĩa vị trí đường thẳng • Thành phần ‘lmward’ (viết ngược lại ‘drawml’): thành phần chuyển đổi ngữ cảnh ngược lại vào thành phần DTD cha Các khái niệm DrawML: Trong DrawML có khái niệm sau: • Nhúng • Chỉnh kích thước tự động • Định vị trí tự động • Kết nối tự động Sau mơ tả chi tiết cho khái niệm trên: • Nhúng Một ảnh DrawML nhúng tài liệu SGML/XML Trong DrawML, người dùng chèn đoạn, danh sách, hình ảnh, bảng biểu • Chỉnh kích thước tự động DrawML có chức tự động chỉnh kích thước ảnh vẽ cho vừa khớp với nội dung bên Ví dụ:

This is my text

186 Phụ lục A Đoạn mã cho hình sau: Kích thước ban đầu hình chữ nhật (ứng với width=100) Kích thước hình chữ nhật sau thay đổi tự động (để chứa đoạn văn bản) • Định vị trí tự động Bằng cách đặt vật thể hình học bên vật thể hình học khác, DrawML thề xếp gom nhóm cách thơng minh Vật thể hình học cha ẩn sử dụng cho mục đích gom nhóm Theo mặc định, vật thể hình học xếp theo chiều ngang Ví dụ: Hello new World 187 Phụ lục A Đoạn mã cho hình sau: • Kết nối tự động Các đối tượng DrawML kết nối với nhau, chẳng hạn đối tượng phân cấp sau: Tất đối tượng DrawML biểu diễn Java Việc sử dụng sức mạnh ngơn ngữ lập trình hướng đối tượng Java mang lại cho nhà phát triển khả linh động Mỗi đối tượng xem thể lớp Việc hiển thị đối tượng lời gọi đến phương thức hiển thị đối tượng 188 Phụ lục A Ví dụ: public void DrawShape() { Painter.NewPath(); Painter.MoveTo( 0, 10 ); Painter.LineTo( MyW()/2, ); Painter.LineTo( MyW(), 10 ); Painter.ClosePath(); Painter.Stroke(); // Clear painter // Draw roof Painter.NewPath(); Painter.MoveTo( 7, 10 ); Painter.LineTo( MyW() - 7, 10 ); Painter.LineTo( MyW() - 7, MyH() ); Painter.LineTo( 7, MyH() ); Painter.ClosePath(); Painter Stroke(); // Draw front Đoạn mã biểu diễn hình sau: 189 Phụ lục B Phụ lục B Kết cài đặt Để chạy server phát sinh đồ cần: cài đặt jdk1.4.2, cài đặt Geoserver1.3 thêm liệu đồ thành phố vào Geoserver, cài đặt MySQL thêm liệu đường đi, cài đặt SQL server thêm liệu tên đường vào server phát sinh đồ SVG dựa vào: tài liệu GML trả từ Geoserver mà Geoserver lại sử dụng liệu đường từ MySQL server, kết hợp với liệu tên đường từ SQL server Chép tòan chương trình GenerateSVGMap vào Inetpub\wwwroot\ sau trình duyệt gõ câu truy vấn sau vào textbox nhập URL: http://localhost/GenerateSVGMap/BanDoPhatSinh.aspx?serveraddress=http://l ocalhost:8080/geoserver/wfs?&bbox=16.829529,0,13184.242787,10755.848151&fi lterproperty=&layers=topp:Truongcap3,topp:benhvien3,topp:mapnetwoarc_auto&m axfeatures=&version=&crs=&method=&format=GML2&width=700&height=571.0 7& Bản đồ phát sinh sau: 190 Phụ lục B Hình B1 Bản đồ SVG phát sinh GenerateSVGMap Để chạy client cần chép tồn thư mục UngDung_Client vào Inetpub\wwwroot\ sau mở tập tinh index.html Màn hình ứng dụng: 191 Phụ lục B Hình B2 Bản đồ SVG hiển thị chương trình client Muốn phóng to hay thu nhỏ tạm thởi dùng khả Adobe SVG Viewer 6.0 Rê chuột vào đối tượng để xem thích thơng tin chi tiết đối tượng 192 Phụ lục B Hình B3 Minh hoạ thích rê chuột lên đối tượng 193 Tài liệu tham khảo Tài liệu tham khảo Chung Hiếu Nghĩa, Nguyễn Ngọc Thuận, Luận văn cử nhân tin học - Xây dựng hệ tra cứu thông tin đồ web, 2001 Nhóm tác giả Elicom, Ngơn ngữ HTML cho World Wide Web, NXB Hà Nội, 2000 Phạm Hữu Khang, Xây dựng triển khai ứng dụng thương mại điện tử, Tập 2, NXB Thống Kê, 2003 Dương Anh Đức, “Thuật tốn Dijkstra”, Giáo trình Lý thuyết đồ thị, tr.38-42, 2004 Dương Anh Đức Lê Đình Duy, “Các phép biến đổi đồ họa hai chiều”, Bài giảng đồ họa máy tính, tr.63-79, 2002 ESRI Shapefile Technical Description, 1998 http://www.w3.org/TR/2003/REC-SVG11-20030114/ http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113 www.kevlindev.com 10 www.learnsvg.com 11 www.w3school.com 12 www.carto.net 13 www.inkscape.org ... Description, 1998 http://www.w3.org/TR/2003/REC -SVG1 1-2 0030114/ http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113 www.kevlindev.com 10 www.learnsvg.com 11 www.w3school.com 12 www.carto.net 13... Bản đồ SVG phát sinh GenerateSVGMap Để chạy client cần chép toàn thư mục UngDung_Client vào Inetpubwwwroot sau mở tập tinh index.html Màn hình ứng dụng: 191 Phụ lục B Hình B2 Bản đồ SVG hiển... giống với ảnh gốc 184 tọa độ góc trái-trên-phải- Phụ lục A So sánh việc truyền