Luận văn Tìm hiểu SVG và ứng dụng

SV ne t.vn TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM HUỲNH NGỌC ĐOÀN - 0112083 LÊ ANH TOÀN - 0112074 TÌM HIỂU SVG VÀ ỨNG DỤNG LUẬN VĂN CỬ NHÂN TIN HỌC GIÁO VIÊN HƯỚNG DẪN TS DƯƠNG ANH ĐỨC Th.S LÊ THỤY ANH NIÊN KHÓA 2001 - 2005 SV ne t.vn i NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... SV ne t.vn ii NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... SV ne t.vn iii LỜI CÁM ƠN Chuùng em xin chaân thaønh caùm ôn Khoa Coâng Ngheä Thoâng Tin, tröôøng Ñaïi Hoïc Khoa Hoïc Töï Nhieân TpHCM ñaõ taïo ñieàu kieän toát cho chuùng em thöïc hieän ñeà taøi luaän vaên toát nghieäp naøy. Chuùng em xin chaân thaønh caùm ôn Thaày Döông Anh Ñöùc vaø Thaày Leâ Thuïy Anh ñaõ taän tình höôùng daãn, chæ baûo chuùng em trong suoát thôøi gian thöïc hieän ñeà taøi. Chuùng em xin chaân thaønh caùm ôn quyù Thaày Coâ trong Khoa ñaõ taän tình giaûng daïy, trang bò cho chuùng em nhöõng kieán thöùc quyù baùu trong nhöõng naêm hoïc vöøa qua. Chuùng con xin noùi leân loøng bieát ôn saâu saéc ñoái vôùi OÂng Baø, Cha Meï ñaõ chaêm soùc, nuoâi daïy chuùng con thaønh ngöôøi. Xin chaân thaønh caùm ôn caùc anh chò vaø baïn beø ñaõ uûng hoä, giuùp ñôõ vaø ñoäng vieân chuùng em trong thôøi gian hoïc taäp vaø nghieân cöùu. Maëc duø chuùng em ñaõ coá gaéng hoaøn thaønh luaän vaên trong phaïm vi vaø khaû naêng cho pheùp nhöng chaéc chaén seõ khoâng traùnh khoûi nhöõng thieáu soùt. Chuùng em kính mong nhaän ñöôïc söï caûm thoâng vaø taän tình chæ baûo cuûa quyù Thaày Coâ vaø caùc baïn. Nhoùm thöïc hieän Huyønh Ngoïc Ñoaøn vaø Leâ Anh Toaøn 07/2005 SV ne t.vn iv LỜI NÓI ĐẦU Sự phát triển của Internet đang vươn tới mọi ngóc ngách trong đời sống kinh tế, xã hội. Các ứng dụng của Internet đang làm cho cuộc sống ngày hoàn thiện hơn, rút ngắn khoảng cách về không gian. Các công ty lớn trên thế giới đang chuyển hướng công nghệ của mình vào siêu xa lộ thông tin. Họ ra sức phát triển các cơ sở hạ tầng, các ứng dụng, các dịch vụ giá trị gia tăng và các chuẩn mực. Nếu nhà phát triển nào tạo ra một chuẩn mực tốt thì sẽ chiếm lĩnh được thị trường, lật đổ những chuẩn mực trước đó. Sự phát triển công nghệ cho Internet đang thu hút các tổ chức, các công ty ra sức áp đặt các chuẩn mực riêng của mình lên ngành công nghiệp này. Hệ quả là thế giới đã chứng kiến nhiều sự thay đổi chuẩn mực, kèm theo đó là phí tổn khi phải chuyển đổi từ định dạng theo chuẩn cũ sang định dạng của chuẩn mới. Một những sự chuyển đổi đó là sự chuyển đổi từ các định dạng ảnh quét này sang định dạng ảnh quét khác, chuyển từ định dạng ảnh quét sang định dạng ảnh véc-tơ. Khi các ảnh đã được mô tả bằng véc-tơ, các hệ nến, các trình soạn thảo và các ứng dụng đòi hỏi phải có một hệ thống quy ước chung để xử lý. Một loạt các chuẩn véc-tơ đã ra đời nhưng đều là các định dạng độc quyền của từng công ty. Từ năm 1999, chuẩn đồ họa véc-tơ SVG đã ra đời đánh dấu sự hợp nhất của các công ty trong việc xử lý đồ họa véc-tơ. Sự xuất hiện của SVG đã dẫn đến một loạt ứng dụng đã ra đời, tận dụng được những ưu điểm của chuẩn này. Trong các ứng dụng của SVG, ứng dụng bản đồ là thể hiện rõ nhất tính ưu việt của SVG. Như vậy tại sao không tận dụng SVG và GIS để tạo ra một chương trình tìm kiếm đường đi trên bản đồ? SV ne t.vn v Với ý tưởng trên, chúng em đã chọn và tập trung phát triển đề tài “Tìm hiểu SVG và xây dựng ứng dụng tìm đường đi trên bản đồ dựa trên đồ họa véc-tơ”. Nội dung của luận văn được chia làm 5 chương như sau: Chương 1. Mở đầu: giới thiệu vai trò của đồ họa véc-tơ và GIS. Dẫn nhập khả năng sử dụng SVG kết hợp GIS để tạo bản đồ, l ý do thực hiện đề tài, đồng thời giới thiệu sơ lược về đề tài và mục tiêu phải đạt được. Chương 2. Các vấn đề tổng quan: khái quát về chuẩn véc-tơ cho bản đồ, các định dạng véc-tơ thông dụng hiện nay và minh họa bằng các ví dụ đơn giản, mô hình đối tượng tài liệu DOM, ngôn ngữ XML, cũng như trình bày về những điều cơ bản nhất của hệ thống thông tin địa lý GIS. Chương 3. Cấu trúc định dạng tập tin SVG: trình bày chi tiết về SVG, các thành phần chính thường được sử dụng trong đặc tả SVG, kiến trúc nội vi SVG, kiến trúc ứng dụng 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: trình bày các vấn đề liên quan trực tiếp đến việc xây dựng ứng dụng. Chương 5. Tổng kết: tóm lại các vấn đề đã giải quyết và nêu ra một số hướng phát triển trong tương lai. SV ne t.vn vi MỤC LỤC Chương 1 Mở đầu ............................................................................................... 14 1.1 Vai trò của đồ họa véc-tơ trong ứng dụng bản đồ ......................................... 14 1.2 Mục tiêu của đề tài ......................................................................................... 15 Chương 2 Các vấn đề tổng quan ....................................................................... 16 2.1 Tổng quan về chuẩn véc-tơ cho bản đồ ......................................................... 16 2.1.1 Giới thiệu về chuẩn véc-tơ cho bản đồ .................................................. 16 2.1.1.1 Chuẩn chính thức........................................................................ 16 2.1.1.2 Chuẩn bất thành văn ................................................................... 17 2.1.2 Các định dạng của véc-tơ....................................................................... 18 2.1.2.1 SVF............................................................................................. 18 2.1.2.2 DWF ........................................................................................... 20 2.1.2.3 Flash (còn gọi là SWF)............................................................... 21 2.1.2.4 PGML ......................................................................................... 22 2.1.2.5 WebCGM.................................................................................... 23 2.1.2.6 VML ........................................................................................... 24 2.1.2.7 PDF............................................................................................. 27 2.1.2.8 SVG ............................................................................................ 30 2.1.2.9 VRML......................................................................................... 36 2.1.2.10 HGML ........................................................................................ 37 2.1.2.11 DrawML ..................................................................................... 38 2.1.3 Mô hình DOM ....................................................................................... 39 2.1.4 Ngôn ngữ XML ..................................................................................... 40 2.1.5 Tổng quan về GIS.................................................................................. 42 2.1.5.1 Khái niệm GIS? .......................................................................... 42 2.1.5.2 Các thành phần của GIS ............................................................. 42 2.1.5.3 - Chuyên viên (personnel): nhân viên, chuyên viên phân tích, thiết kế, phát triển, bảo trì hệ thống thông tin dữ liệu GIS ......................... 42 2.1.5.4 Chức năng của GIS..................................................................... 42 2.1.5.5 Các ứng dụng cơ bản trong thực tế của GIS............................... 42 Chương 3 Cấu trúc định dạng tập tin SVG...................................................... 44 3.1 Định nghĩa...................................................................................................... 44 3.2 Sự tương thích với các chuẩn khác ................................................................ 44 3.3 Loại MIME của SVG và Không gian tên SVG ............................................ 46 3.3.1 Loại MIME của SVG, mở rộng tên tập tin và loại tập tin Macintosh:.. 46 3.3.2 Không gian tên SVG, định danh công cộng và định danh hệ thống: .... 47 3.4 Định nghĩa một phân đoạn tài liệu SVG : thành phần ‘SVG’ ....................... 47 3.4.1 Tổng quan: ............................................................................................. 47 3.4.2 Thành phần ‘svg’: .................................................................................. 50 3.5 Gom nhóm : thành phần ‘g’: .......................................................................... 52 SV ne t.vn vii 3.6 Tham chiếu và thành phần ‘defs’:.................................................................. 53 3.6.1 Tổng quan: ............................................................................................. 53 3.6.2 Các thuộc tính tham chiếu URI: ............................................................ 57 3.6.3 Thành phần ‘defs’ .................................................................................. 58 3.7 Thành phần ‘desc’ và ‘title’: .......................................................................... 59 3.8 Thành phần ‘symbol’: .................................................................................... 62 3.9 Thành phần ‘use’:........................................................................................... 62 3.10 Thành phần ‘image’: ...................................................................................... 74 3.11 Các hình cơ bản.............................................................................................. 77 3.11.1 Hình chữ nhật – thành phần ‘rect’ ......................................................... 77 3.11.2 Hình tròn – thành phần ‘circle’.............................................................. 79 3.11.3 Hình e-lip – thành phần ‘ellipse’ ........................................................... 79 3.11.4 Đường thẳng – thành phần ‘line’........................................................... 81 3.11.5 Đường gấp khúc – thành phần ‘polylinbe’ ............................................ 82 3.11.6 Đa giác – thành phần ‘polygon’ ............................................................ 83 3.12 Hệ trục toạ độ, các phép biến đổi và các đơn vị đo ....................................... 84 3.12.1 Giới thiệu ............................................................................................... 84 3.12.2 Khung nhìn ban đầu............................................................................... 85 3.12.3 Hệ trục toạ độ ban đầu........................................................................... 87 3.12.4 Các phép biến đổi hệ trục toạ độ ........................................................... 88 3.12.5 Thuộc tính ‘transform’........................................................................... 95 3.12.6 Thuộc tính ‘viewBox’............................................................................ 97 3.12.7 Thuộc tính ‘preserveAspectRatio’....................................................... 100 3.12.8 Thiết lập khung nhìn............................................................................ 106 3.13 Định kiểu (styling) ....................................................................................... 108 3.13.1 Các thuộc tính định kiểu của SVG ...................................................... 108 3.13.2 Định kiểu dùng thuộc tính trình diễn................................................... 108 3.13.3 Định kiểu bằng CSS............................................................................. 109 3.13.4 Thành phần ‘style’ .............................................................................. 112 3.13.5 Thuộc tính ‘class’ ................................................................................ 112 3.13.6 Phạm vi của trang định kiểu: ............................................................... 113 3.14 Đường xén.................................................................................................... 114 3.14.1 Giới thiệu: ............................................................................................ 114 3.14.2 Đường xén ban đầu.............................................................................. 114 3.14.3 Thuộc tính ‘overflow’ và ‘clip’ .......................................................... 114 3.14.4 Đường xén đối với khung nhìn và đường xén đối với ‘viewBox’ ...... 116 3.14.5 Thiết lập đường xén mới...................................................................... 117 3.15 Thành phần ‘path’ ........................................................................................ 121 3.15.1 Giới thiệu ............................................................................................. 121 3.15.2 Thành phần ‘path’................................................................................ 121 3.15.3 Dữ liệu đường (path data)................................................................... 121 3.16 Thành phần ‘text’ ......................................................................................... 122 3.16.1 Giới thiệu ............................................................................................. 122 SV ne t.vn viii 3.16.2 Thành phần ‘text’................................................................................. 123 3.16.3 Thuộc tính thiết lập phông chữ cho thành phần ‘text’......................... 126 3.16.4 Thuộc tính canh lề ............................................................................... 127 3.16.5 Thành phần ‘tspan’ .............................................................................. 128 3.16.6 Thành phần ‘tref’ ................................................................................. 131 3.17 Vẽ chữ dọc theo một đường......................................................................... 132 3.17.1 Giới thiệu: ............................................................................................ 132 3.17.2 Thành phần ‘textPath’.......................................................................... 133 3.18 Khả năng ảnh động của SVG - thành phần ‘animate’ ................................. 138 3.18.1 Giới thiệu ............................................................................