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

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
160










Hình 4.7 Cây DOM quản lý qui trình bắt sự kiện
Người dùng tương tác với thành phần này thông qua đoạn mã Javascript. Đoạn
thực thi tương ứng cho mỗi sự kiện có thể được nhúng nội tuyến vào trong tập tin
.svg, hoặc có thể được đặt trong một tập tin Javascript khác rồi tham chiếu đến tập
tin Javascript này từ trong tập tin .svg.
Vậy bằng cách thao tác với một điểm, một đường, hoặc một vùng, ta có thể
truy vấn thông tin mà thành đó chứa. Trong trường hợp c
ủa ứng dụng bản đồ thì đó
là thông tin về tọa độ, chiều dài, có bao nhiêu nhà trên đường đang tương tác.
Khi có những thông tin này, người lập trình có thể tìm đường đi từ một đỉnh
tới một đỉnh khác.

4.8.1.3 Tìm đường đi từ giữa hai điểm
Khi đã xác định được tọa độ hai điểm mà người dùng cần tìm đường đi giữa
chúng, client sẽ gửi câu lệnh yêu cầu server th
ực hiện việc tìm kiếm đường đi với
đỉnh đầu và đỉnh cuối là hai điểm trên. Yêu cầu được server nhận thông qua một








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
161

dịch vụ web (web service) chạy ở phía server. Sau khi việc tìm đường đã hoàn tất,
server thông báo lại kết quả cho client cũng thông qua cùng một web trên.
Client căn cứ vào kết quả trả về mà hiển thị thông tin trên bản đồ .svg. Thông
tin trả về là một tập các tọa độ kề nhau để đi từ điểm A đến điểm B, với A,B là hai
điểm đã được chọn để tìm kiếm đường đi.

4.8.1.4 Vấn đề thay đổi tỉ lệ phóng to thu nhỏ
Bộ hiển thị SVG đã hỗ trợ chức năng phóng to thu nhỏ. Người dùng có thể
phóng to đến mức tùy ý mà luôn an tâm rằng ảnh không bị vỡ.
(Ghi chú
: Chức năng phóng to trong Adobe SVG Viewer là Ctrl+ kéo chuột)
Một cách khác là sử dụng tính năng của server WFS. Khi cần phóng to vùng
nào, người dùng chọn một đường bao ngoài của vùng đó. Server dữ liệu sẽ thực

hiên chức năng truy vấn đến vùng đó, chỉ chọn những tọa độ nằm trong vùng mong
muốn.
Ưu điểm của kiến trúc trên:
− Các xử lý truy vấn dữ liệu được thực hiện ngay bên phía client, không
cần phải chuyển về sever.
− Tốc độ đáp ứng tương tác nhanh hơn so với việc chuyển toàn bộ hàm
về server.
Khuyết điểm của kiến trúc trên:
− Do server nằm phân tán nên việc truy vấn dữ liệu mới từ server sẽ tốn
thời gian truyền tải tập tin .svg trên mạng.
− Kích thước tập tin .svg không được quá lớn vì nếu như thế sẽ làm cho
thời gian truyền tải và thời gian hiển thị nội dung SVG gia tăng.








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
162

− Mỗi lần cần nội dung mới ở server giao diện thì phải chờ cho bộ hiển
thị SVG xây dựng xong hình ảnh trong tập tin .svg được trả về. Khi đó
người dùng phía client mới thấy được ảnh SVG.
4.8.2 Mô tả chi tiết server
Server gồm hai phần con là UIServer (viết tắt của User Interface Server, được
gọi là server giao diện) và DataServer (server chuyên chứa dữ liệu).
Trong kiến trúc ứng được trình bày ở hình phía trên, UIServer gồm hai phần

nhỏ nữa là “B
ản đồ ASPX” và “Service tìm đường”. DataServer gồm hai phần con
là Geoserver và Microsoft SQL Server.
Sau đây là mô tả cho từng phần con:
4.8.2.1 Mô tả chi tiết “Bản đồ ASPX”
Server con này nhận yêu cầu truy vấn tập tin .svg. Sau đó gửi yêu cầu này
xuống cho Geoserver. Geoserver đóng vai trò là một server dữ liệu, chuyên cung
cấp dữ liệu dạng .gml. Sau đó sever “Bản đồ ASPX” sẽ chuyển đổi dữ liệu này sang
định dạng .svg.
Để viết được server con này, người phát triển phải hiểu cú pháp của GML và
SVG, ch
ẳng hạn như chuyển một “LineString(10,10 14,234)” từ GML sang “line x1
= 10, y1=10 x2=14 y2=234 stroke-width = 1” trong định dạng SVG.











Câu lệnh yêu cầu tập tin .svg
Client
Server
Tập tin .svg
“Bản đồ
ASPX”

Geoserver

Hình 4.8. Mô tả chức năng server “Bản đồ ASPX”








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
163

4.8.2.2 Mô tả “Service tìm đường”
Chức năng của “Service tìm đường” là tìm đường đi giữa hai điểm được phía
client yêu cầu. Server con này sẽ truy vấn trên cơ sở dữ liệu (CSDL) trong
Microsoft SQL Server để lấy thông tin cần thiết cho việc tìm đường. Mô tả chi tiết
của cấu trúc bảng trong SQL Server sẽ được mô tả ở mục 4.4.2.4








Hình 4.9. Mô tả server “Service tìm đường”
4.8.2.3 Mô tả Geoserver

Hình 4.10. Mô tả Geoserver
dinhDau, toaDo1, dinhCuoi, toaDo2
Câu lệnh yêu cầu tìm đường
Client
Server
Kết quả: Danh sách các tọa độ
“Service
tìm
đường”
MS
SQL Server
Tập tin hình học
(shape file)
*.frm
*.myd, *.myi

MySQL
Server 4.1
Geoserver 1.3








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
164

Geoserver đóng vai trò là server chuyên cung cấp dữ liệu. Ứng dụng sử dụng
bốn lớp dữ liệu là: đường, bách hóa tổng hợp, bệnh viện, trường học. Trong các lớp
trên, lớp đường được lấy từ dữ liệu của MySQL. Các lớp còn lại được lấy từ
shapefile.
Hiện nay ứng dụng sử dụng hai nguồn dữ liệu là shape file và MySQL. Đối
với shape file thì chỉ cần nạp tậ
p tin .shp vào. Đối với MySQL thì phải nạp tập tin
dữ liệu vào MySQL, sau đó kết nối MySQL với Geoserver.







Hình 4.11. Kết xuất của Geoserver

Các tập tin dữ liệu .gml được Geoserver phát sinh sẽ được server “
Bản đồ
ASPX” chuyển sang tập tin .svg.
Ứng dụng sử dụng phương thức HTTP POST và tác vụ GetFeatureType.
4.8.2.3.1 Phương thức HTTP POST
Sử dụng phương thức HTTP POST sẽ yêu cầu client chuyển các yêu cầu trong
phần thân tài liệu POST vào trong dòng URL. Khi này WFS không bao giờ được
phép yêu cầu thêm bất cứ tham số phụ nào để bổ sung vào cuối dòng URL nhằm
mục đích xây dựng một kết quả hợp lệ cho yêu cầu tác vụ.
Geoserver hỗ trợ cả hai phương thức HTTP GET và HTTP POST. Sử dụng
phương thức nào cũng cho kết quả như nhau. Tuy nhiên, ứng dụng có sử dụng gói
Geoserver 1.3
Tập tin GML
Bản đồ ASPX
Chuyển đổi dữ liệu
sang SVG
Tập tin SVG
Client








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
165

CarbonTools giao tiếp với Geoserver, mà một lớp trong công cụ này (lớp

HandlerWFS) chỉ hỗ trợ phương thức HTTP POST. Do đó, luận văn sử dụng
phương thức HTTP POST để cài đặt. Từ đó, phần báo cáo chỉ đề cập HTTP POST,
còn phần mô tả chi tiết nằm ngoài phạm vi nghiên cứu. (xin xem thêm tập tin “04-
094_Web_Feature_Service_Implementation_Specification_V1[1].1.pdf”, phần
HTTP POST trong thư mục Ref\ThamKhaoChinh\GIS)
4.8.2.3.2 Tác vụ GetFeatureType
Tác vụ GetFeature cho phép nhận về các tính năng từ một WFS. Một yêu cầu
GetFeature được xử lý bởi một WFS. Khi giá trị của thuộc tính outputFormat được
thiết lập là text/gml; subtype=gml/3.1.1, một tài liệu GML chứa kết quả sẽ được trả
về cho trình khách (client).
Nếu một WFS cài đặt “Xlink traversal” (tạm dịch là bộ phân tích liên kết), thì
một WFS client có thể dùng thuộc tính traverseXlinkDepth và traverseXlinkExpiry
để yêu cầu các thành phần được
định danh bằng một liên kết.
Yêu cầu: (Request)
Mã hóa dạng XML của một yêu cầu GetFeature được định nghĩa theo giản đồ
phân đoạn XML sau:

<xsd:element name="GetFeature" type="wfs:GetFeatureType"/>
<xsd:complexType name="GetFeatureType">
<xsd:complexContent>
<xsd:extension base="wfs:BaseRequestType">
<xsd:sequence>
<xsd:element ref="wfs:Query" maxOccurs="unbounded"/>
</xsd:sequence>
<xsd:attribute name="resultType"
type="wfs:ResultTypeType" use="optional"
default="results"/>
<xsd:attribute name="outputFormat"
type="xsd:string" use="optional"

default="text/xml; subtype=3.1.1"/>
<xsd:attribute name="maxFeatures"
type="xsd:positiveInteger" use="optional"/>








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
166

<xsd:attribute name="traverseXlinkDepth"
type="xsd:string" use="optional"/>
<xsd:attribute name="traverseXlinkExpiry"
type="xsd:positiveInteger"
use="optional"/>
</xsd:extension>
</xsd:complexContent>
</xsd:complexType>
<xsd:simpleType name="ResultTypeType">
<xsd:restriction base="xsd:string">
<xsd:enumeration value="results"/>
<xsd:enumeration value="hits"/>
</xsd:restriction>
</xsd:simpleType>
<xsd:element name="Query" type="wfs:QueryType"/>
<xsd:complexType name="QueryType">

<xsd:sequence>
<xsd:choice minOccurs="0" maxOccurs="unbounded">
<xsd:element ref="wfs:PropertyName"/>
<xsd:element ref="ogc:Function"/>
</xsd:choice>
<xsd:element ref="ogc:Filter" minOccurs="0" maxOccurs="1"/>
<xsd:element ref="ogc:SortBy" minOccurs="0" maxOccurs="1"/>
</xsd:sequence>
<xsd:attribute name="handle"
type="xsd:string" use="optional"/>
<xsd:attribute name="typeName"
type="wfs:TypeNameListType" use="required"/>
<xsd:attribute name="featureVersion"
type="xsd:string" use="optional"/>
<xsd:attribute name="srsName" type="xsd:anyURI" use="optional"/>
</xsd:complexType>
<xsd:simpleType name="Base_TypeNameListType">
<xsd:list itemType="QName"/>
</xsd:simpleType>
<xsd:simpleType name="TypeNameListType">
<xsd:restriction base="wfs:Base_TypeNameListType">
<xsd:pattern value="((\w:)?\w(=\w)?){1,}"/>
</xsd:restriction>
</xsd:simpleType>

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
167

4.8.2.3.3 CarbonTools: công cụ hỗ trợ kèm theo Geoserver
CarbonTools là một công cụ phát triển phần mềm được thiết kế dành riêng cho
nhà phát triển và phân tích thông tin địa lý. Công cụ này đóng gói các giải pháp
tương tác thuộc về không gian địa lý như các đặc tả của OGC (Open Geospatial
Consortium). CarbonTools là một sản phẩm của nhiều năm kinh nghiệm, công cụ
này giải quyết nhiều vấn đề và đưa ra một giao diện lập trình ứng dụng (API).
Gói CarbonTools được thiết kế cho phép mở
rộng. Thư viện cốt lõi cung cấp
một nền mở cho phép mở rộng hỗ trợ cho các nguồn dữ liệu không gian địa lý mới,
các bộ quản lý dịch vụ và nhiều kĩ thuật trực quan mới, …. Hơn thế nữa, một lượng
lớn các giải pháp có thể được cung cấp khi sử dụng CarbonTools: các ứng dụng
desktop độc lập, các mở rộng phần mềm của phía thứ ba, các d
ịch vụ Web .Net và
nhiều hơn thế nữa.
Các công cụ CarbonTools .Net, kèm theo bộ cung cụ này, cung cấp một mở
rộng cho các công cụ .Net Form. Điều này làm cho các tác vụ WMS/WFS/GML
phức tạp có thể được thực hiện bằng cách kéo thả các thành phần vào Form. Các
điều khiển này cung cấp một khởi điểm tốt để phát triển các ứng dụng thỏa OGC.
Để giúp đỡ nhà phát triển, một số tiện ích được kèm theo gói này cùng với mã
ngu
ồn đầy đủ. Trong số đó là CarbonViewer, một bộ hiển thị WMS/WFS/GML độc
lập.

CarbonTools gồm có 9 gói riêng rẽ:
• CarbonTools.Controls : Chứa các điều khiển hỗ trợ lập trình giao diện
• CarbonTools.Core.Base : Chứa các lớp cơ sở.
• CarbonTools.Core.Drawing : Chứa các lớp hỗ trợ vẽ hình.
• CarbonTools.Core.Features : Chứa các lớp dùng cho quản lý dữ liệu địa lý
…
• CarbonTools.Core.Geometries: Chứa các lớp về đối tượng hình họ
c như
đường thẳng, đa giác….
• CarbonTools.Core.GML : Chứa các lớp phân tích tài liệu GML








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
168

• CarbonTools.Core.OGCCapabilities : Chứa các lớp hỗ trợ phân tích khả
năng của một WFS hay WMS.
• CarbonTools.Core.WFS : Chứa các lớp hỗ trợ giao tiếp, gởi các yêu cầu
WFS tới WFS server.
• CarbonTools.Core.WMS: Chứa các lớp hỗ trợ giao tiếp, gởi các yêu cấu
WMS tới WFS server
Trong các gói trên, gói được sử dụng chính trong chương trình phát sinh bản
đồ SVG là CarbonTools.Core.WFS, các lớp trong gói này là:
Class Description

HandlerWFS
Quản lý tương tác với một WFS thỏa đặc
tả của OGC
QueryBuilder
Chuyển dữ liệu nguồn (SourceWFS)
thành một câu truy vấn dịch vụ thỏa đặc
tả WFS của OGC
SourceWFS
Quản lý dữ liệu truy cập và truy vấn đối
với một dịch vụ WFS thỏa đặc tả WFS
của OGC. Dữ liệu quản lý bao gồm :
• Address (Một dịnh danh tài
nguyên cho dịch vụ)
• BBox (Đường bao của vùng địa
lý)
• FilterProperty (Tên thuộc tính
chứa hình học mà đường bao sẽ
được áp dụng)
• Format (Định dạng GML được








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
169

Tên cột Kiểu dữ liệu Chiều dài Cho phép rỗng
Id Số nguyên 4 không
Name Chuỗi 255 Có
daiLo Số nguyên 4 Có
yêu cầu)
• Layers (các lớp dữ liệu)
• Maxfeature (Số tính năng tối đa
cần lấy) ….
WFSLayerType
Kiểu và tên lớp được dùng trong câu truy
vấn

Ta sẽ dùng SourceWFS
để lưu trữ các thông tin về một yêu cầu GetFeature.
Đồng thời dùng HandlerWFS để gửi yêu cầu đi và nhận dữ liệu trả về từ WFS
server, sau đó xử lý và tạo nội dung SVG .
4.8.2.4 Mô tả Microsoft SQL Server
Microsoft SQL Server là server chuyên cung cấp dữ liệu cho việc tìm kiếm
đường đi. Trong SQL Server, các bảng sau được sử dụng:
• MapNetworkWithLength
• MapNetworkDanhSachNodeKe
• MapNetworkArc_AutoWithDirection
Sau đây là mô tả cho từng bảng trên:
• Bảng MapNetworkWithLength

B
ảng 4.1. Bảng MapNetworkWithLength
Trong đó:
o Id : mô tả số nguyên định dang cho một đường trong thực tế








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
170

o Name : tên của đường
o daiLo : (nhận giá trị 0 hoặc 1). Nếu là 0 thì không phải là đại lộ. Nếu là 1
thì đó là đại lộ.

• Bảng MapNetworkArc_AutoWithDirection

Bảng 4.2. Bảng MapNetworkArc_AutoWithDirection
Trong đó:
o Id : chính là chiều dài một đoạn tối tiểu
o Path : khóa ngoại tham chiếu đến khóa chính trong bảng
MapNetworkWithLength
o nodeStart : đỉnh bắt đầu của đoạn tối tiểu
o nodeEnd : đỉnh kết thúc của đoạn tối tiểu
o arc : danh sách mô tả tọa độ trong thực tế của đoạn tối tiểu
o direction: (nhận -1, 0 , 1). Nếu là 0 thì đi được cả hai chiều. Nếu là +1 thì
chỉ đi được từ nodeStart đến nodeEnd. Nếu là -1 thì chỉ đi được từ
nodeEnd đến nodeStart.
• Bảng MapNetworkDanhSachNodeKe







Tên cột Kiểu dữ liệu Chiều dài Cho phép rỗng
id Số nguyên 4 không
Path Số nguyên 4 Có
nodeStart Số nguyên 4 Có
nodeEnd Số nguyên 4 Có
Arc Chuỗi 65536 Có

Direction Số nguyên 2 Có
Tên cột Kiểu dữ liệu Chiều dài Cho phép rỗng
id Số nguyên 4 không
DanhSachNodeKe Chuỗi 4 Có
Bảng 4.3. Bảng MapNetworkDanhSachNodeKe








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
171

Trong đó:
o Id : chính là chiều dài một đoạn tối tiểu
o DanhSachNodeKe: danh sách những node kề với node có mã số là id.


4.8.3 Mô tả chi tiết quá trình tìm kiếm đường đi
Quá trình tìm kiếm đường đi được thực hiện bằng thuật toán Dijkstra. Sau đây
là mô tả thuật toán Dijkstra.
Gọi đỉnh bắt đầu là s0, đỉnh kết thúc là t0.
Thuật toán sử dụng các mảng sau:
o doDai : kích thước n phần tử (với n là số
đỉnh (số node) trong đồ thị).
Phần tử thứ i của mảng này lưu chiều dài từ đỉnh bắt đầu s0 đến đỉnh i.
o daDuyet : kích thước n phần tử. Phần tử thứ i của mảng này xác định

nút thứ i đã được duyệt hay chưa. Nếu giá trị này là true thì có nghĩa là
đã duyệt rồi. Nếu giá trị này là false thì có nghĩa là chưa duyệt
o truoc : kích thước n phần tử. Phần t
ử thứ i của mảng này xác định nút
trước nút thứ i là nút nào. Mảng này dùng để xác định đường đi.
Goi tập S là tập các đỉnh đóng. Đỉnh đóng là đỉnh mà hiện nay đã duyệt qua.
Gọi tập T là tập các đỉnh mở, tức chưa xét
• Bước 1: gán S= {s0}, T = T \ {s0}
u = s0;
• Bước 2: tìm đỉnh mở v có sao cho doDai[v] giá trị nhỏ nhất. Nếu v
trùng u thì có nghĩa là đã tìm được đường đi. Khi này chuyển sang
bước 4. Nế
u không thì chuyển sang bước 3.








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
172

• Bước 3: cập nhật giá trị doDai, daDuyet từ đỉnh v. Xét các đỉnh kề v.
Nếu doDai[v] chưa có (tức nhận giá trị VO_CUC) thì cập nhật bằng
doDai[u] + chieuDai[u,v].
Nếu doDai[v] có rồi thì chỉ cập nhật nếu doDai[u] + chieuDai[u,v] <
doDai[v].
Nếu có cập nhật giá trị doDai[v] thì cần phải cập nhật lại giá trị của

truoc[v] = u.
Lặp lại bước 2.
• Bước 4: Truy tìm đường đi dựa vào mảng truoc. Quy tắc truy tìm như
sau
o Bước 4.1: Gán u = t0. Đưa t0 vào danh sách đường đi.
o Bước 4.2: Với mỗi đỉnh u hiện có, ta gán v = truoc[u]. Nếu v ==
VO_CUC thì dừng lại. Ngược lại, đưa v vào danh sách đường đi,
gán u=v, rồi lặp lại bước 4.2.












Chương 5. TỔNG KẾT
173


Chương 5 TỔNG KẾT
5.1 Kết luận
Sau thời gian nghiên cứu, chúng em đã tìm hiểu được cấu trúc tập tin ảnh véc-
tơ SVG, kĩ thuật viết script và các kĩ thuật liên quan để xây dựng được:
• Một server phát sinh bản đồ thành phố với bốn lớp đường, trường học cấp
ba, bệnh viện, bách hóa tổng hợp bằng SVG có định kiểu.

• Một service tìm đường đi ngắn nhất.
• Bản đồ SVG phát sinh có khả năng tươ
ng tác phía người dùng.
• Một ứng dụng phía trình khách có thể dùng để duyệt bản đồ SVG có sẵn
được phát sinh bởi server trên, có khả năng tự chú thích các đối tượng khi
đưa chuột lướt qua các đối tượng đó.
5.2 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 để hoà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 soá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.









Phụ lục A
174

Phụ lục A Mô tả bổ sung cho các định dạng véc-tơ
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 hoà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);

Phụ lục A
175

<identifier>identifier is a symbol which is defined elsewhere
<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>
<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>








Phụ lục A
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.
<circle>= Circle + <radius>
<arc>= Arc + <radius> + <startangle> + <endangle>
<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>








Phụ lục A
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
• Tính ngầm định − Định dạng này đơn giản nên bộ hiển thị Flash nhỏ
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 ngoà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
• UI32 = unsigned integer 32 = số nguyên không dấu độ dài 32 bit

Phụ lục A
178

Tiếp theo header là một dãy các khối dữ liệu được đánh thẻ. Mỗi khối dữ liệu
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 toá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 toá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.








Phụ lục A
179

• Thay đổi cách mã hóa − theo quy ước, các tập tin SWF chỉ chứa các
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 toà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.
tagLen 3: tagSetBackgroundColor RGB_HEX ffffff