DRAWING A FISH MOVING AROUND AN ELLIPSE PATH

HỌC VẼ CON CÁ DI CHUYỂN TRÊN PATH ELLIPSE.

SVG (Scalable Vector Graphics) là ngôn ngữ ( language ) dùng để vẽ hình hai chiều trong Browser bằng cách viết code, chữ và số trong XML đã thành tiêu chuẩn quốc tế W3 từ năm 1999. Do đó nếu Browser nào không hổ trợ SVG thì không thể vẽ gì được.

Với SVG,chúng ta có thể vẽ được 3 loại hình là : Vector Graphics Shapes, Images, Text

SVG có những tiện lợi là dễ thực hành, đơn giản, dễ nhớ và hình vẽ làm di động rất dể dàng với SMIL ( Synchronized Multimedia Integration Language ) nếu cần.

Chúng ta có thể làm hình vẽ SVG thu nhỏ hay phình lớn tuỳ theo kích thước của màn hình monitor nhưng hình không bị nhòa như hình bitmap vẽ bằng html 5 Canvas.

1-HỌC VIẾT CODES VẼ HÌNH ELLIPSE.

Đây là codes làm xuất hiên một hình ellipse .

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

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

width="100%" height="100%">

<g > 

 <ellipse cx ="300" cy="260" rx = "140" ry = "80"

 stroke="red" stroke-width="4" fill="none"/>

</g>

</svg>

Ghi chú hướng dẫn.

Toạ độ tâm của ellipse là cx ="300" cy="260"

Trục ngang và trục đứng của ellipse là rx = "140" ry = "80"

2-HỌC VIẾT CODES VẼ PATH ELLIPSE.

Vẽ  path ellipse rất phức tạp. Con cá chỉ có thể di chuyển trên path ellipse  chứ không thể di chuyển trên hình ellipse.

Đây là codes vẽ  path ellipse khép kín.

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

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

width="100%" height="100%">

<g> // Vẽ ellipse

<path id = "ellipse" 

       d = " M 225,275

                a 100,50  0  1,1  0,0.0009 " Z

           stroke = "red"  stroke-width = "4"  fill = "none" />

</g>

</svg>

GHI CHÚ HƯỚNG DẪN .

Tọa độ khởi hành là d = " M 225,275, chính là tâm của đường goị la ellipse path .

Phân tách những con số trong :  a 100,50  0  1,1  0,0.0009

a là command of elliptical arc.

100,50 là trục ngang và trục đứng của ellipse.

0 là góc quay bắt buộc phải có của ellipse.Nếu thiếu thì hình không hiện ra.

1,1 : số 1 đầu tiên là của large arc- flag  cho biết ellipse sẽ lớn hơn 180 độ và số 1 tiếp theo là của sweep-flag cho biết ellipse sẽ quay theo chiều dương cùng với chiều kim đồng hồ.Hai con số nầy bắt buộc phải có.

Tại sao ? Lý do như sau để chỉ cho chúng ta biết góc quay của trục ellipse path.

* 1,0 ellipse sẽ lớn hơn 180 độ và quay theo chiều ngược kim đồng hồ.

* 1,1 ellipse sẽ lớn hơn 180 độ và quay theo chiều kim đồng hồ.

* 0,1 ellipse sẽ nhỏ hơn 180 độ và quay theo chiều kim đồng hồ

* 0,0 ellipse sẽ nhỏ hơn 180 độ và quay theo chiều ngược kim đồng hồ.

0,0.0009 : con số nầy cho biết ellipse sẽ khép kin.

0,0.009 : con số nầy cho biết ellipse bị hở chút xíu.

0,1 : con số nầy cho biết ellipse sẽ hở rất lớn.

KHI CHÚNG TA HIỂU TỚI ĐÂY RỒI THÌ THA HỒ VẼ PATH ELLIPSE TUỲ Ý MUỐN

Điều kiện muốn vẽ ellipse path phải có 7 parameters nhưng người viết chỉ nêu ra phần thực hành mà thôi để giúp quý bạn không bị lẫn lộn khi muốn vẽ được ngay.

SVG có một đặc điểm rất hay gọi là transform attribute. Dùng đặc điểm nầy chúng ta có thể thay đổi vị trí của tọa độ, thay đổi hình dạ̣ng và thay đổi độ lớn hay độ nhỏ của hình vẽ mà không cần phải vẽ lại hình khác.

Transform attribute của SVG gồm có.

* transform=” translate(x,y)” để chuyển đổi vị trí toạ độ nếu hình vẽ bị che khuất.

  Thí dụ transform=” translate(175, 150)”.Nếu không xác định y thì default sẽ cho 0

* transform=” scale (x,y)” để thay đổi hình vẽ lớn hơn hay nhỏ hơn tùy ý.

  Thí dụ transform="scale(0.5)”.Nếu chỉ chọn một con số cho scale mà thôi thì tòan bộ thành phần của hình sẽ theo scale của con số đó.

* transform=”rotate(angle,cx,cy)” để xoay chuyển hình vẽ theo góc độ và thay đổi tâm (center ) của hình.

   Thí dụ transform=” rotate(45,100,100)”.Nếu không xác định cx và cy thì default sẽ rotate chung  quanh vị trí đã có ( rotates around the origin)

* transform=”skewX(angle)” làm hình nghiên vào trục X.

  Thí dụ transform=”skewX(5)”.Khỏang cách giữa hình và trục là tan của góc ( the distance of skew is the tan of the angle)

* transform=”skewY(angle)” làm hình nghiên vào trục Y

  Thí dụ transform=” skewY(5)"

3- RÁP CODES VẼ ELLIPSE PATH VÀO CHUNG VỚI CODES VẼ CÁ

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

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

width="100%" height="100%">

<g> //  Viết codes vẽ  path ellipse

<path id = "ellipse" 

           d = " M 225,275

                   a 180,100  0  1,1  0,0.0009 " Z

           stroke = "green"  stroke-width = "4"  fill = "none" />

</g>

<g transform="translate(-160,-160)">

// Viết codes vẽ con cá

<path d="M 200 160,C250 200,350 120,200 160,

          L 200 160,180 170,

          L 200 160,175 150,

          C 175 150,185 160,180 170 z"

          stroke="red" stroke-width="2" fill="green"/>

<circle cx="260" cy="155" r="3" stroke="black" fill="blue"/>

<animateMotion dur="10" rotate="auto" repeatCount="indefinite">

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

</animateMotion>

</g>

</svg>

HƯỚNG DẪN VIẾT CODES VẼ CON CÁ.

Muốn cho con cá nằm trên hình ellipse path thì phải viết

<g transform=" translate(-160,-160)"> có chứa tọa độ  x = - 160, y= - 160

Nếu thiếu chữ translate thì tọa độ sẽ tự động theo default  là  ZERO.

Vì vậy khi vẽ hình theo SVG phải luôn nhớ viết chữ transform = " translate(x,y) “

Khi vẽ con cá  thì cần phải dùng đường cong có ký hiệu C nghĩa là curve, đường thẳng có ký hiệu L và vòng tròn ( trong bài nầy vẽ con mắt tròn của cá có bán kinh  r=3 px ở tọa độ cx=260  cy=155 )

Đây là tọa độ của con cá chưa có con mắt tròn. Và chưa có cái đuôi đầy đủ.

path d="M 200 160,C250 200,350 120,200 160,

          L 200 160,180 170,

          L 200 160,175 150 z"

Path khởi hành từ tọa độ M 200 160.,theo đường cong tới 3 tọa độ C 250 200,350 120,200 160,

Rồi theo đường thẳng tới 4 tọa độ  L 200 160,180 170, L 200 160,175 150

và tới 3 toạ độ C 175 150,185 160,180 170

Đây những tọa độ của cái đuôi cá. :  C 175 150,185 160,180 170

Muốn có đuôi đầy đủ thì viết tọa độ nầy vào như trên.

4-LÀM CHO CON CÁ DI CHUYỂN TỰ ĐỘNG VÀ KHÔNG DỪNG LẠI.

  THÌ VIẾT CODES NHƯ SAU CHO MỘT VÒNG DI CHUYỂN MẤT 10 seconds.

<animateMotion dur="10" rotate="auto" repeatCount="indefinite">

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

CON CÁ DI CHUYỂN CHUNG QUANH VÒNG ELLIPSE PATH

TẠO NÚT START VÀ STOP

 

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

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

             width="100%" height="100%">

<g> //  Viết codes vẽ path ellipse

<path id = "ellipse"

           d = " M 225,275

                   a 180,100  0  1,1  0,0.0009 " Z

           stroke = "green"  stroke-width = "4"  fill = "none" />

</g>

<g transform="translate(-160,-160)">

// Viết codes vẽ con cá

<path d="M 200 160,C250 200,350 120,200 160,

          L 200 160,180 170,

          L 200 160,175 150,

          C 175 150,185 160,180 170 z"

          stroke="red" stroke-width="2" fill="green"/>

<circle cx="260" cy="155" r="3" stroke="black" fill="blue"/>

// Viết codes làm cá chuyển động có nút START Và STOP

<animateMotion dur="10" rotate="auto" repeatCount="indefinite"

 begin ="B.click" end="S.click">

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

</animateMotion>

//Viết codes cuả nút START và STOP

</g>

<g id ="B">

<text x = "250" y = "150" font-size ="15"  font-family = "arial" fill="blue" >START</g>

<g id = "S">

<text x = "80" y = "50" font-size ="15"  font-family = "arial" fill="red" >STOP</g>

</g>

</svg>

 CẦU CHÚC QUÝ BẠN THỰC HÀNH THÀNH CÔNG.

Henry Dương (aka He H Dương)