Trong tương lai chúng em sẽ tiếp tục nghiên về chuẩn ảnh véc-tơ SVG để hồn thiện chương trình tìm đường đi ngắn nhất trên bản đồ thành phố, bao gồm việc kiểm sốt độ phĩng to, thu nhỏ bản đồ bằng sự kết hợp với server phát sinh bản đồ động theo theo kích thước trình khách yêu cầu, và tìm đường đi ngắn nhất.
174
1. SVF
Tổng quan về ba phần trong cấu trúc của tập tin SVF
Tập tin được khởi đầu bằng đoạn văn bản mơ tả tập tin hiện tại là tập tin dạng SVF, đồng thời cũng liệt kê mã số phiên bản của định dạng SVF được sử dụng. Trong ví dụ sau, đoạn mã được liệt kê cĩ chức năng thiết lập phần giới thiệu. Sau đĩ nĩ sẽđĩng tập tin khi tập tin được hồn tất.
Để vẽ ảnh, SVF cung cấp từng lệnh riêng biệt ứng với mỗi đường cơ bản. Chẳng hạn, để vẽ đường thẳng, cần hai lệnh SVFOutputMoveTo và SVFOutputLineTo. Hai lệnh này được đặt trong tập tin SVF. Bộ hiển thị SVF (cịn gọi là SVF Viewer) sẽđọc từng lệnh và thực hiện cơng việc hiển thị.
Ví dụ:
Đoạn mã sau vẽ một đường thẳng từ tọa độ (10,10) đến tọa độ (50,30).
Như vậy, để vẽ ảnh, người dùng chỉ cần dùng các lệnh cú pháp giống ngơn ngữ lập trình C. Chỉ cĩ một điểm khác là các lệnh này được đưa vào tập tin .svf. Sau
đĩ bộ hiển thị sẽđọc các lệnh này rồi hiển thị. Cú pháp cho SVF phiên bản 1.1 (Nguồn: www.softsource.com/svf/syntax.html) FILE *fp = SVFOpen("name.svf"); ... SVFClose(fp); SVFOutputMoveTo(fp,10,10); SVFOutputLineTo(fp,50,30);
175
<identifier>identifier which hasn't been fully implemented yet Identifiera constant
"string"a literal string
[<identifier>]<identifier> is optional
{<identifier>}<identifier> may appear 0 or more times <id1> + <id2><id1> followed directly by <id2> <id1> | <id2>either <id1> or <id2>
<SVF file>= <intro> + <header> + <body>
<intro>= "SVFv" + <version number> + NullTerminator
<version number> = {"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "."} <header>= {<header item>}
<body>= {<command>}
<header item>= <name> | <extents> | <layer table> | <color table> | <background> | <transparent> | <notify table> | <imagewidth> | <transform> | <flags>
<name>= Name + <null terminated string>
<extents>= Extents + <xmin> + <ymin> + <xmax> + <ymax>
<layer table>= LayerTable + <number of entries> + {<state> + <null terminated string>}
<color table>= ColorTable + <number of entries> + {<red> + <green> + <blue>} <background>= Background + <color>
<transparent>= Transparent + <color>
<notify table>= NotifyTable + <number of zoomin entries> + <number of zoomout entries> +
{<name> + <imagewidth>} + {<name> + <imagewidth>} <imagewidth>= Width + <millimeters>
<transform>= Transform + <scale> + <basex> + <basey> <flags>= Flags + <flag>
<command>= <point> | <moveto> | <lineto> | <polyline> | <relmoveto> | <rellineto> | <relpolyline> | <rectangle> | <circle> | <arc> |
<bezier> | <text> | <text height> | <setcolor> | <setlayer> | <penwidth> | <fillmode> | <data> | <set1dlinkinfo> | <set2dlinkinfo> | <invisible> <point>= Point + <x> + <y>
<moveto>= MoveTo + <x> + <y> <lineto>= LineTo + <x> + <y> (adsbygoogle = window.adsbygoogle || []).push({});
<polyline>= Polyline + <number of points> + {<x> + <y>} <relmoveto>= RelMoveTo + <xoffset> + <yoffset>
<rellineto>= RelLineTo + <xoffset> + <yoffset>
<relpolyline>= RelPolyline + <number of points> + {<xoffset> + <yoffset>} <rectangle>= Rectangle + <width> + <height>
176
2. Flash
Các mục tiêu thiết kế dành cho SWF
SWF được thìết kế nhằm đáp ứng được các mục tiêu sau:
• Hiển thị trên màn hình − Là định dạng chính được dự định sử dụng cho việc hiển thị trên màn hình, hỗ trợ chống răng cưa, hiển thị nhanh một ảnh bitmap với bất kỳ dạng màu, hoạt ảnh và nút tương tác.
• Khả năng mở rộng − Định dạng này là được đánh dấu bằng các thẻ
(tag). Do đĩ nĩ cĩ thểđược phát triển thêm nhiều tính năng mới trong khi vẫn đảm bảo khả năng tương thích ngược với những bộ hiển thị
Flash (Flash Player).
• Truyền tải mạng − Định dạng này cĩ thể truyền tải thơng tin qua một mạng cĩ băng thơng bị giới hạn và độ rộng băng thơng này khơng thể được ước lượng trước. Các tập tin được nén lại để trở nên nhỏ hơn và hỗ trợ xây dựng hình ảnh dần dần thơng qua kỹ thuật luồng (streaming). SWF là một định dạng nhị phân và người sử dụng khơng thể đọc chúng dưới dạng văn bản như HTML. SWF sử dụng các kỹ
thuật chẳng hạn như nén bit và các cấu trúc cĩ các trường tùy biến để
tối ưu hĩa kích thước tập tin.
<bezier>= Bezier + <x> + <y> + <x> + <y> + <x> + <y> <text>= Text + <width> + <null terminated string> <text height>= TextHeight + <height>
<setcolor>= SetColor + <color> <setlayer>= SetLayer + <layer> <penwidth>= SetPenWidth + <width> <fillmode>= FillMode + <fill>
<data>= Data + <number of bytes> + {<byte>}
<set1dlinkinfo>= 1dLink + <null terminated string> + <null terminated string> <set2dlinkinfo>= 2dLink + <null terminated string> + <null terminated string> <invisible>= Invisible
<xmin/ymin/xmax/ymax> <x/y> <radius> <startangle> <endangle> <height> <width> <millimeters>
177
Trường Kiểu Chú thích
Chứng thực UI8 Byte chứng thực thứ 1 – luơn là 'F' Chứng thực UI8 Byte chứng thực thứ 2 – luơn là 'W' Chứng thực UI8 Byte chứng thực thứ 3 – luơn là 'S' Phiên bản UI8 Byte mơ tả phiên bản
Chiều dài tập tin UI32 Chiều dài của cả tập tin.
Kích thước khung hình RECT Kích thước khung (đơn vị là TWIPS) Tốc độ khung hình UI16 Tốc độ khung hình một giây
Số lượng khung hình UI16 Tổng số khung hình của phim
và dễ dàng được nhúng vào các ứng dụng. Bộ hiển thị Flash chỉ phụ
thuộc vào một tập lệnh rất nhỏ của hệ điều hành. Do đĩ nĩ cĩ khả
năng lớn để chạy trên nhiều hệ nền khác nhau.
• Độc lập tập tin − Các tập tin được hiển thị mà khơng cĩ sự phụ thuộc nào với các tài nguyên bên ngồi, chẳng hạn như phơng chữ.
• Tính khả co − Các tập tin làm việc tốt trên các phần cứng yếu, và cĩ thể tận dụng được ưu điểm của phần cứng mạnh. Điều này thực sự (adsbygoogle = window.adsbygoogle || []).push({});
quan trọng vì các máy tính cĩ độ phân giải màn hình và độ sâu của bit màu (bit depths) khác nhau.
• Tốc độ − Bộ hiển thị xây dựng hình ảnh với chất lượng cao từ các tập tin rất nhanh.
Cấu trúc của tập tin Flash
Các tập tin SWF cĩ phần mở rộng là .swf và một kiểu MIME là application/x- shockwave-flash. Các tập tin SWF là các tập tin nhị phân được chứa dạng các byte
độ dài 8 bit. Phần đầu của tập tin chứa một khối header cĩ cấu trúc như sau:
Bảng A1. Cấu trúc tập tin Flash
Ghi chú:
• UI8 = unsigned integer 8 = số nguyên khơng dấu độ dài 8 bit
• UI16 = unsigned integer 16 = số nguyên khơng dấu độ dài 16 bit
178
cĩ một kiểu thẻ (stag) và một chiều dài. Cĩ hai dạng mơ tả khối dữ liệu này: dạng ngắn và dạng dài.
Tối ưu hĩa kích thước tập tin SWF
Vì các tập tin SWF thường được phân phối qua kết nối mạng nên thật sự chúng cần phải càng nhỏ càng tốt. Sau đây là một vài kỹ thuật được sử dụng để giải quyết vấn đề này:
• Tái sử dụng − Cấu trúc của từđiển kí tự làm cho việc tái sử dụng các thành phần trong một tập tin trở nên dễ dàng.
• Nén − Nội dung của các thẻ được nén lại. SWF hỗ trợ rất nhiều kỹ
thuật nén. Các ảnh bitmap cĩ thể được nén lại bằng thuật tốn nén JPEG hoặc PNG zlib. Âm thanh được nén lại ở nhiều mức độ khác nhau của thuật tốn nén ADPCM. Các vật thể hình học được nén lại bằng cách sử dụng một giản đồ mã hĩa delta rất hiệu quả.
• Nén bit − Bất cứ khi nào cĩ thể, các số được nén lại tới một số lượng bit ít nhất cĩ thể cĩ để biểu diễn một giá trị. Các tọa độ thường được sử
dụng bằng cách dùng các trường bit cĩ kích thước biến động, trong đĩ một vài bit được sử dụng để xác định các giá trị theo sau cần bao nhiêu bit để biểu diễn.
• Các giá trị mặc định − Một vài cấu trúc tương tự ma trận và các phép biến đổi màu được cĩ các trường thơng dụng được sử dụng thường xuyên hơn các giá trị. Ví dụ, đối với một ma trận thì trường được sử
dụng thường xuyên nhất là trường tịnh tiến. Phép co giãn và xoay ít thơng dụng hơn. Do đĩ nếu trường co giãn khơng cĩ giá trị, nĩ được cho giá trị là 100%. Nếu trường xoay khơng cĩ giá trị, Flash coi như
khơng cĩ phép xoay. Việc sử dụng các giá trị mặc định giúp tối thiểu hĩa kích thước tập tin.
179 thay đổi giữa các trạng thái.
• Cấu trúc dữ liệu hình học − Cấu trúc dữ liệu hình học sử dụng một cấu trúc để cực tiểu hĩa kích thước của các vật thể hình học và để xây dựng các vật thể hình học được khử răng cưa rất hiệu quả trên màn hình. Các thành phần riêng biệt của một tập tin SWF được nén lại, nhưng khơng cĩ phép nén nào được thực hiện trên tồn bộ tập tin. Các thành phần của tập tin chẳng hạn như các ảnh bitmap, các vật thể hình học và âm thanh cĩ thểđược giải nén khi cần thiết.
Nội dung bên trong một tập tin SWF
Header tập tin trên cho biết nhiều thơng tin. FWS xác định rằng đây là một tập tin SWF; phiên bản của nĩ là 3.0. Kích thước tập tin là 741 byte. Độ rộng của phim là 550 ảnh điểm; độ cao là 400 ảnh điểm. Tốc độ khung hình là 12 khung hình một giây; cĩ 10 khung hình trong đoạn phim này.
***** Dumping SWF File Information ***** --- Reading the file header ---
FWS File version 3 File size 741 Movie width 550 Movie height 400 Frame rate 12 Frame count 10
--- Reading movie details ---
<--- dumping frame 0 file offset 21 ---> Offset của khung hình 0 là 21.
180 (adsbygoogle = window.adsbygoogle || []).push({});
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 { headlight FALSE } # We'll add our own light DirectionalLight { # First child
direction 0 0 -1 # Light illuminating the scene }
181 children [
Shape {
geometry Sphere { radius 2.3 } appearance Appearance {
material Material { diffuseColor 1 0 0 } # Red }
} ] }
Transform { # Third child - a blue box translation -2.4 .2 1 rotation 0 1 1 .9 children [ Shape { geometry Box {} appearance Appearance {
material Material { diffuseColor 0 0 1 } # Blue }
} ] }
] # end of children for world }
4. HGML
Sau đây là mơ tả từng phần trong ba phần:
•Các đối tượng đồ họa cơ bản
•Chủđề / sử dụng lại hình ảnh sẵn cĩ
•Chỉnh sửa ảnh
1. Các đối tượng đồ họa cơ bản
Khái niệm này được đưa ra nhằm cho phép các ảnh được tải về và hiển thị trên mạng khơng dây nhanh hơn so với cách sử dụng chuẩn HTML. Ý tưởng này nằm ở
chỗ giảm hoặc thay thế các ảnh bitmap lớn bằng các ảnh tương đương dựa trên đồ
họa véc-tơ. Các ảnh véc-tơ này được vẽ bằng cách sử dụng một tập hợp được định nghĩa sẵn gồm các thẻ giống HTML liên quan đến các đối tượng đồ họa cơ bản. Các (adsbygoogle = window.adsbygoogle || []).push({});
182
bằng cách sử dụng các thẻ lệnh, chẳng hạn như sau:
HGML cung cấp 18 thẻ sau, được chia thành ba nhĩm ứng với ba danh mục
được thể hiện trong bảng sau:
Bảng A.2. Danh sách 18 thẻ của HGML
Nhĩm đầu tiên trong bảng trên gồm các thẻ dùng cho các chức năng vẽ cơ bản, cho phép tạo một lượng các ảnh ghép đơn giản mà hiệu quả.
Ví dụ:
ARC
Vẽ một cung cĩ độ rộng, chiều cao và gĩc được chỉ định so với gốc tọa
độ tuyệt đối.
<!ELEMENT ARC - O EMPTY> <!ATTLIST ARC Đối tượng đồ họa cơ bản Chủđềảnh Chỉnh sửa ảnh ARC ARROW ELLIPSE LINE LINETO LINEREL LINK ORIGIN POLYGON RECTANGLE SETSTYLE TEXT CLIPART THEME COPY FLIP PASTE ROTATE
<ellipse coords="0,0,50,30", style="dotted", color=orange, fill=yellow, psize="2">
183
cung, theo sau là độ rộng, độ cao, gĩc bắt đầu và gĩc của cung --
color %COLOR #NGẦM ĐỊNH -- màu sắc của
đường--
style %STYLE #NGẦM ĐỊNH -- kiểu của đường -- psize %PSIZE #NGẦM ĐỊNH -- độ dày của đường -- >
<arc coords="20,20,50,30,45,80", color=red>
2. Chủđề / sử dụng lại hình ảnh sẵn cĩ
HGML cung cấp một sốảnh được vẽ trước để dùng trong nội dung một trang. Các ảnh này dễ sử dụng hơn nhiều với các ảnh phải định nghĩa các đối tượng đồ họa cơ bản.
Ví dụ:
CLIPART
Cho phép lấy một ảnh từ một nơi lưu trữ ngay trong máy tính và hiển thị lên ở
các tọa độ xác định.
<!ELEMENT CLIPART - O EMPTY> <!ATTLIST CLIPART
name CDATA #BẮT BUỘC -- tên ảnh--
theme CDATA #NGẦM ĐỊNH -- kiểu của chủđề--
coords %COORDS #BẮT BUỘC -- tọa độ gĩc trái-trên của ảnh--
width NUMBER #NGẦM ĐỊNH -- độ rộng của ảnh (đơn vị là ảnh điểm (pixel)) --
height NUMBER #NGẦM ĐỊNH -- độ cao của ảnh (đơn vị là ảnh điểm (pixel))-- (adsbygoogle = window.adsbygoogle || []).push({});
href % URL #NGẦM ĐỊNH -- ảnh này đĩng vai trị là một liên kết--> <clipart name=ARROW1, coords="50,50", width=150, height = 5, href= "http://www.demo.com/demo.hgm">
184 3. Chỉnh sửa ảnh
HGML cho phép chỉnh sửa ảnh bitmap ngay trên màn hình bằng cách sử dụng các thẻ lệnh COPY, PASTE, FLIP and ROTATE. Những thẻ này được tạo ra nhằm tối ưu hĩa việc tạo các kiểu chính của ảnh. Ví dụ, nếu một ảnh ghép được tạo bằng cách sử dụng một vài đối tượng đồ họa cơ bản thì điều này cũng được yêu cầu ở
những vị trí khác trên màn hình. Do đĩ, nĩ cĩ thể được sao chép đến vị trí mới mà khơng cần phải vẽ lại. Việc sao chép được thực hiện thơng qua bộ nhớ đệm của màn hình. Bộ hiển thị HGML sẽđảm trách việc này.
Chức năng này cũng giúp tối ưu hĩa việc lưu trữ các ảnh chủđề. Ví dụ, thay vì 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 chỉ cần lưu trữ một ảnh đơn trong cơ sở dữ liệu. Sau đĩ dùng các thẻ lệnh ROTATE (phép xoay) và FLIP (di chuyển) để canh chỉnh chúng lại đúng vị trí.
Ví dụ:
COPY
Sao chép một phân đoạn màn hình (dạng hình chữ nhật) vào bộ nhớ đệm.
Ảnh sau khi sao chép hồn tồn giống với ảnh gốc. <!ELEMENT COPY - O EMPTY>
<!ATTLIST COPY
coords %COORDS #REQUIRED -- tọa độ gĩc trái-trên-phải- dưới của phân đoạn màn hình-- >
185
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
(Nguồn: www.w3.org/TR/NOTE-HGML.htm)
Chú thích:* bao gồm thời gian truyền và hiển thị/ vẽ tồn bộ trang. Tốc độ vẽ
là 9600 bps (bits per second).
Ưu điểm của HGML
HGML, khi so sánh với các sử dụng đồ họa nội tuyến trong HTML, cĩ các ưu
điểm chính như sau:
•Tối ưu hĩa hiệu suất cho mạng khơng dây.
•Cửa sổ trình duyệt được xem như là một phơng nền, cho phép phủ các lớp thành phần hình ảnh và định vị tuyệt đối trên trang (nghĩa là hình ảnh sẽ
xuất hiện với “mối quan hệ chặt chẽ giữa các thành phần trong nĩ” khi thể
hiện ở bất kỳ kích thước nào; đồng thời ảnh được phép cuộn, nếu cần thiết, bên trong một cửa sổ trình duyệt tùy ý ).
•Cung cấp các ảnh được định nghĩa sẵn nhằm giúp việc xây dựng trang
được đơn giản.
•Cĩ thểđược nhúng vào trong HTML hoặc được sử dụng độc lập.