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

• Thuộc tính ‘path’: SVG cho phép bất kỳ tính năng nào của cú pháp dữ liệu đường của SVG được chỉ định trong thuộc tính ‘path’ của thành phần ‘animateMotion’ SMIL Animtion chỉ cho phép

• ‘set’: hình thức tốc kí thuận tiện cho ‘animate’, rất hữu ích trong việc

chỉ định các giá trị thuộc tính không phải dạng số cho các thuộc tính, chẳng hạn như thuộc tính ‘visibility’

• ‘animateMotion’: dịch chuyển một thành phần dọc theo một đường

• ‘animateColor’: thay đổi giá trị màu của các thuộc tính đặc biệt theo

thời gian

Ngoài ra, SVG bổ sung thêm các mở rộng tương thích với SMIL Animation:

• ‘animateTransform’: thay đổi giá trị của một trong các thuộc tính của

phép biến đổi trong SVG theo thời gian, chẳng hạn như thuộc tính

‘transform’

• Thuộc tính ‘path’: SVG cho phép bất kỳ tính năng nào của cú pháp dữ

liệu đường của SVG được chỉ định trong thuộc tính ‘path’ của thành phần ‘animateMotion’ (SMIL Animtion chỉ cho phép một tập con cú pháp dữ liệu đường trong thuộc tính ‘path’)

• Thành phần ‘mpath’: SVG cho phép một thành phần

‘animateMotion’ chứa một thành phần con ‘mpath’, tham chiếu đến một thành phần ‘path’ để định nghĩa một đường di chuyển

• Thuộc tính ‘keyPoint’: SVG bổ sung thuộc tính ‘keyPoint’ cho thành

phần ‘animateMotion’ cung cấp khả năng điều khiển chính xác về tốc

độ của ảnh động trên đường di chuyển

• Thuộc tính ‘rotate’: SVG bổ sung thuộc tính ‘rotate’ cho thành phần

‘animateMotion’ để điều khiển một đối tượng tự động quay sao cho trục x (x-axis) cùng hướng (hoặc ngược hướng) với vec-tơ tiếp tuyến của đường di chuyển

Để tương thích với các khía cạnh khác của ngôn ngữ, SVG dùng tham chiếu URI thông qua thuộc tính ‘xlink:href’ để xác định các thành phần là đích của hoạt ảnh

SMIL Animation yêu cầu “ngôn ngữ chủ” phải định nghĩa đầy đủ ý nghĩa cho

“thời điểm bắt đầu tài liệu” (document start) và “thời điểm kết thúc tài liệu” (document end) Bởi vì một thành phần ‘svg’ đôi khi là gốc của cây tài liệu XML và đôi khi cũng là một thành phần của văn phạm XML, nên “thời điểm bắt đầu tài liệu” của một phân đoạn tài liệu SVG cho trước sẽ được định nghĩa là thời gian ngay lúc sự kiện ‘SVGLoad’ của thành phần ‘svg’ được kích hoạt “Thời điểm kết thúc tài liệu” của phân đoạn tài liệu SVG là thời điểm mà phân đoạn tài liệu giải phóng và không còn được xử lý bởi tác nhân người dùng Tuy nhiên, các thành phần ‘svg’ được lồng trong một tài liệu SVG sẽ không tạo thành phân đoạn tài liệu trong ngữ cảnh này, không định nghĩa một “thời điểm bắt đầu tài liệu” riêng Tất cả các giá trị thời gian trong phân đoạn tài liệu SVG lồng được tính toán một cách tương đối với thời gian tài liệu của thành phần ‘svg’ gốc

Trong SVG, thuật ngữ thời gian trình diễn (presentation time) chỉ định một vị trí trên thước đo thời gian tương đối so với “thời điểm bắt đầu tài liệu” của phân đoạn tài liệu được cho

3.18.3 Ví dụ ảnh động:

Ví dụ minh họa một tam giác di chuyển dọc theo một đường di chuyển (motion path)

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="5cm" height="3cm" viewBox="0 0 500 300"

xmlns="http://www.w3.org/2000/svg" version="1.1"

xmlns:xlink="http://www.w3.org/1999/xlink" >

<desc>Example animMotion01 - demonstrate motion animation computations</desc>

<rect x="1" y="1" width="498" height="298"

fill="none" stroke="blue" stroke-width="2" />

with three small circles at the start, middle and end >

<path id="path1" d="M100,250 C 100,50 400,50 400,250"

fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" />

<circle cx="250" cy="100" r="17.64" fill="blue" />

<circle cx="400" cy="250" r="17.64" fill="blue" />

<! Here is a triangle which will be moved about the

motion path

It is defined with an upright orientation with the base of

the triangle centered horizontally just above the origin >

<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"

fill="yellow" stroke="red" stroke-width="7.06" > <! Define the motion path animation >

<animateMotion dur="6s" repeatCount="indefinite"

rotate="auto" >

<mpath xlink:href="#path1"/>

</animateMotion>

</path>

</svg>

Kết quả trên trình duyệt tại thời điểm 0s, 3s, 6s:

3.19 Viết script (kịch bản)

3.19.1 Chỉ định ngôn ngữ viết script

3.19.1.1 Chỉ định ngôn ngữ viết script mặc định

Thuộc tính ‘contentScriptType’ trên thành phần ‘svg’ chỉ định ngôn ngữ viết script mặc định cho phân đoạn tài liệu cho trước

• contentScriptType = “content-type”

Hình 3.37 Minh họa thành phần ảnh động animateMotion

Xác định kiểu ngôn ngữ viết script mặc định cho tài liệu cho trước Thuộc tính này thiết lập ngôn ngữ viết script được dùng để xử lý các

“chuỗi giá trị trong thuộc tính sự kiện (event attributes)” Giá trị content-type chỉ định một kiểu phương tiện (media type) Giá trị mặc định là “text/ecmascript” (tại thời điểm công bố, “text/ecmascript” chưa được đăng kí là một loại phương tiện cho ECMAScript ) Giá trị này sẽ là giá trị mặc định cho tới khi có một giá trị thay thế khác được đăng kí

3.19.1.2 Khai báo cục bộ ngôn ngữ viết script

Chúng ta có thể chỉ định ngôn ngữ đặc tả cho mỗi thành phần ‘script’ riêng biệt bằng thuộc tính ‘type’ trên thành phần ‘script’

3.19.2 Thành phần ‘script’

Thành phần ‘script’ tương đương với thành phần ‘script’ trong ngôn ngữ đánh dấu siêu văn bản HTML Đây là nơi viết script (bằng ngôn ngữ ECMAScript) Bất

kỳ hàm nào được định nghĩa trong thành phần ‘script’ đều có phạm vi toàn cục cho toàn bộ tài liệu hiện tại Bằng cách kết hợp ngôn ngữ ECMAScript và SVG DOM, chúng ta có thể truy cập đến tất cả các thành phần SVG trong tài liệu, như thêm, xóa các thành phần trong cây tài liệu, chỉnh sửa thuộc tính… để làm cho tài liệu SVG có thể tương tác với người dùng

Ví dụ 1:

Ví dụ sau định nghĩa một hàm circle_click được triệu gọi bởi thuộc tính sự kiện ‘onclick’ trên thành phần ‘circle’ Khi nhấp chuột lên hình tròn, hình tròn thay đổi bán kính Hình bên trái dưới đây là hình ảnh ban đầu Hình bên phải minh họa kết quả sau khi nhấp chuột lên hình tròn

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="6cm" height="5cm" viewBox="0 0 600 500"

xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example script01 - invoke an ECMAScript function from an onclick event

</desc>

<! ECMAScript to change the radius with each click >

<script type="text/ecmascript"> <![CDATA[

function circle_click(evt) {

var circle = evt.target;

var currentRadius = circle.getAttribute("r");

if (currentRadius == 100)

circle.setAttribute("r", currentRadius*2);

else

circle.setAttribute("r", currentRadius*0.5);

}

]]> </script>

<! Outline the drawing area with a blue line >

<rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>

<! Act on each click event >

<circle onclick="circle_click(evt)" cx="300" cy="225" r="100"

fill="red"/>

<text x="300" y="480"

font-family="Verdana" font-size="35"

text-anchor="middle">

Click on circle to change its size

</text>

</svg>

Kết quả trước và sau khi nhấp chuột lên hình tròn trên trình duyệt:

Một số thuộc tính của thành phần ‘script’:

• type= “content-type”

Hình 3.38 Minh họa chức năng bắt sự kiện chuột

Chỉ định ngôn ngữ viết script cho thành phần ‘script’ được cho Giá trị content-type chỉ định một loại phương tiện

Script có thể được nhúng vào tài liệu SVG trong thành phần ‘script’ như ví dụ trên, hoặc cũng có thể nằm trong một tập tin script (*.js) được liên kết vào trong tài liệu như sau:

Tập tin “createnode.js” chứa đoạn script sau:

function pinta()

{

var circleNode =

svgDocument.createElement("circle");

circleNode.setAttribute("cx", 300*Math.random()); circleNode.setAttribute("cy", 300*Math.random()); circleNode.setAttribute("r", 30);

circleNode.setAttribute("style", "stroke: none; " + "opacity: 0.3; " +

"fill: rgb(" + 255*Math.random() + "," +

255*Math.random() + "," +

255*Math.random() + ");"); setTimeout("window.pinta()", 300);/*sau 0.3s gọi

pinta() này một lần*/

document.getElementById("dr").appendChild(circleNode); }

Nội dung SVG tham chiếu tới tập tin SVG trên thông qua thuộc tính

‘xlink:href’ :

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd ">

<svg width="300" height="300" onload="pinta()">

<script type="text/ecmascript"

xlink:href="createnode.js">

</script>

<g id="dr" />

</svg>

Kết quả trên trình duyệt sau một thời gian:

Hình 3.39 Minh họa bộ timer và thuộc tính mờ ‘opaque’

3.19.3 Quản lý sự kiện

Các sự kiện chính là nguyên nhân kích hoạt script

• Các thuộc tính sự kiện (event attribute) như “onclick” hay “onload” được gắn vào một thành phần SVG cụ thể, các thuộc tính này chứa phần script sẽ được thực thi khi các sự kiện xảy ra

• Bộ lắng nghe sự kiện (event listener), được mô tả trong “Document Object Events” (sự kiện mô hình đối tượng tài liệu – DOM2-EVENTS), được định nghĩa sẽ được triệu gọi khi một sự kiện (tương ứng với sự kiện được cho) xảy ra trên đối tượng được cho

3.19.4 Thuộc tính sự kiện

Các thuộc tính sự kiện có sẵn trên nhiều thành phần SVG

Sau đây là danh sách các thuộc tính sự kiện trên các thành phần đồ họa và vật chứa của ngôn ngữ SVG :

• onfocusin

• onfocusout

• onactivate

• onclick

• onmousedown

• onmouseup

• onmouseover

• onmousemove

• onmouseout

• onload

Các thuộc tính sự kiện cấp tài liệu:

• onunload

• onabort

• onerror

• onresize

• onscroll

• onzoom

Các thuộc tính sự kiện ảnh động :

• onbegin

• onend

• onrepeat

• onload

3.19.5 ECMAScript và DOM

Phần này mô tả một số thao tác cơ bản trên cây tài liệu SVG độc lập kết hợp ECMAScript và DOM

3.19.5.1 Lấy đối tượng tài liệu

function init(evt) {

if ( window.svgDocument == null )

svgDocument = evt.target.ownerDocument;

}

3.19.5.2 Lấy thành phần gốc

svgRoot = svgDocument.documentElement;

3.19.5.3 Tạo một node trong cây tài liệu

Hàm sau dùng để tạo một thành phần ‘circle’

var svgns = "http://www.w3.org/2000/svg";

function makeShape(evt) {

if ( window.svgDocument == null )

svgDocument = evt.target.ownerDocument;

var shape = svgDocument.createElementNS(svgns,

"circle");

shape.setAttributeNS(null, "cx", 25);

shape.setAttributeNS(null, "cy", 25);

shape.setAttributeNS(null, "r", 20);

shape.setAttributeNS(null, "fill", "green");

svgDocument.documentElement.appendChild(shape); }

3.19.5.4 Xóa một thành phần ra khỏi thành phần cha của nó

function RemoveTaget(parentElement,targetElement) {

parentElement.removeChild(targetElement); };

3.19.5.5 Thiết lập thuộc tính sự kiện

<rect x="5" y="5" width="40" height="40" fill="red" onclick="changeColor(evt)"/>

function changeColor(evt) {

var target = evt.target;

target.setAttributeNS(null, "fill", "purple"); }

3.19.5.6 Thiết lập bộ lắng nghe sự kiện

var svgns = "http://www.w3.org/2000/svg";

function makeShape(evt) {

if ( window.svgDocument == null )

svgDocument = evt.target.ownerDocument;

var rect = svgDocument.createElementNS(svgns,

"rect");

rect.setAttributeNS(null, "x", 5);

rect.setAttributeNS(null, "y", 5);

rect.setAttributeNS(null, "width", 40);

rect.setAttributeNS(null, "height", 40);

rect.setAttributeNS(null, "fill", "green");

rect.addEventListener("click", changeColor,

false);

svgDocument.documentElement.appendChild(rect); }

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

4.1 Các kĩ thuật và công nghệ

4.2 WMS

Theo đặc tả của tổ chức OGC (Open Geospatial Consortium), WMS (Web Map Service) là một dịch vụ bản đồ Web Nó phải có các khả năng sau:

1 Tạo bản đồ (là một ảnh , một chuỗi các thành phần ảnh, hay một tập gói

dữ liệu tính năng địa lý)

2 Đáp ứng được các yêu cầu căn bản đối với nội dung của bản đồ,

3 Có khả năng cung cấp thông tin cho các chương trình khác biết về các loại bản đồ nó có thể tạo được và loại nào trong số đó có thể được truy vấn sâu hơn

Một WMS client là một ứng dụng hay một trình duyệt có thể gửi yêu cầu một WMS server như sau:

1 Để tạo bản đồ, các tham số URL cần chỉ định trong câu truy vấn : khu vực cần vẽ, hệ trục tọa độ được dùng, loại thông tin hiển thị, định dạng trả về, kích thước trả về, kiểu hiển thị, và các tham số khác

2 Để yêu cầu nội dung bản đồ, các tham số URL cần chỉ rõ bản đồ được yêu cầu và vị trí được quan tâm trên bản đồ

3 Đề yêu cầu về khả năng của WMS server, các tham số cần chỉ rõ phải chứa loại yêu cầu “capabilities”

Theo đặc tả WMS, một dịch vụ bản đồ web phải cài đặt các tác vụ sau:

1 GetCapabilities (bắt buộc phải có): cung cấp thông tin về khả năng của WMS cho client

2 GetMap (yêu cầu): cung cấp bản đồ địa lý phát sinh từ dữ liệu địa lý theo yêu cầu của client

3 GetFeatureInfo (tùy chọn): cung cấp thông tin một vị trí địa lý trên bản

đồ mà client yêu cầu

4.3 WFS

Theo đặc tả của OGC, WMS cho phép một client có thể nạp đè hình ảnh từ nhiều WMS trên Internet để hiển thị Trong khi đó, WFS là một dịch vụ tính năng web cho phép một client có thể truy xuất và cập nhật dữ liệu địa lý được mã hoá bằng ngôn ngữ đánh dấu thông tin địa lý GML từ nhiều dịch vụ tính năng web WFS Để biết thêm về GML xin tham khảo đặc tả GML tại:

http://www.opengis.org/legal/ipr_faq.htm

Hình 4.1 Mô hình kiến trúc giao tiếp giữa client và WFS.

Một WFS phải cài đặt các chức năng sau:

1 GetCapabilities : Mỗi WFS phải có khả năng mô tả các khả năng của mình Cụ thể, một WFS phải chỉ rõ được loại tính năng nó có thể cung cấp và các tác vụ được hỗ trợ trên mỗi loại tính năng này