Hướng phát triển:

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>

<intro>= "SVFv" + <version number> + NullTerminator

<version number> = {"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "."} <header>= {<header item>}

<body>= {<command>}

<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>

<moveto>= MoveTo + <x> + <y> <lineto>= LineTo + <x> + <y>

<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

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ự

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

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

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

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 -- >

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))--

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.

Sự tương thích với các chuẩn khác

Gom nhĩm : thành phần ‘g’: