VẼ CỤM PARABOLS BẦNG SVG

 VẼ CỤM PARABOLS BẰNG SVG ĐỂ SO SÁNH.

SVG là chữ viết tắt của SCALABLE VECTOR GRAPHICS do nhóm nghiên cứu quốc tê W3C tạo ra từ năm1999, được phổ biến để thế giới xử dụng từ năm 2001 với tên www.w3.org/2000/svg

Hình vẽ theo SVG có rất nhiễu đặc điểm rất nhẹ, bị kéo co giản không thay đổi phẫm chất, in được nhiều cở rất  lơn theo nhu cẫu và dùng làm hình chuyến động rất thuận tiện trên wesites.

 

I- THỰC TẬP.

Muốn vẽ loại hình gì theo SVG, phải chọn element  hay object thích ứng với loại hình đó.

 SVG có nhiều elements có tên là : 

path, rect, circle, ellipse, line, polyline, polygon, image…

 

Với hướng dẫn nầy chúng ta chọn chữ path vì nó có đặc tính vẽ được nhiều hình phức tạp kết hợp bởi đường cong và đường thẳng và cần phải biết chọn tên cúa 20 COMMENTS như sau.

                     MoveTo: M, m

                     LineTo: L, l, H, h, V, v

                     Cubic Bézier Curve: C, c, S, s

                     Quadratic Bézier Curve: Q, q, T, t

                     Elliptical Arc Curve: A, a

                     ClosePath: Z, z

 

M nghĩa là move to làm ngòi bút gọi là parser phải di chuyển.

Vẽ hình theo vector tọa độ của SVG phải dung ngoì but parser chứ không vẽ bằng tay.

Thí dụ.  Cho lịnh ngoì bút phải bắt đầu từ tọa độ (x=200,y=150 ) và dừng lại ở tọa độ ( x=54, y=180) thì viết

        d="M 200 150,54 180Z” 

 Chữ d có nghĩa là vẽ (draw) từ tọa độ (x , y) do chúng ta muốn chọn.

Parser sẽ vẽ một đường thẳng.

Chư Z nghĩa là closepath ngoì bủt dừng lại tại tọa độ thứ hai.

Nếu muốn cho ngòi bút vẽ thêm thì tiếp tục viết thêm tọa độ và dời chữ Z tới toạ độ múốn dừng.

II- KINH NGHIỆM CHỌN TỌA ĐỘ X,Y.

 Thay đổi tọa độ tiếp theo chữ Q sẽ tìm được 

parabol vưà ý. Chọn chữ Q để vẽ theo đường 

cong gọi là QUADRATIC BEZIER.

<!...1-Path nây tốt,parabol thẳng đứng 

nhưng ngắn quá...>

<svg width="400" height="400" 

xmlns ="htpp:// www.w3.org/2000/svg">

<path d="M 50 100, Q100 150 ,150 100, 50 100 Z " 

stroke= "red"

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

</svg>

<!...2-Path nầy tốt nhưng parabol 

rộng quá...>

<svg width="400" height="400" 

xmlns = "htpp:// www.w3.org/2000/svg">

<path d="M 50 100, Q200 350 ,350 100, 50 100 Z "

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

</svg>

  <!...3-Path nầy tốt hơn hết nhưng đáy 

của parabol hơi lệch...>

<svg width="500" height="500" 

 xmlns = "htpp:// www.w3.org/2000/svg">  

 <path d="M 50 100, Q200 450 ,300 100, 50 400 Z" 

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

</svg>

 <!...4-Path nầy tốt vẽ parabol 

đã được chỉnh lệch...>

<svg width="500" height="500" 

xmlns = "htpp:// www.w3.org/2000/svg">  

<path d="M 50 100, Q160 450 ,300 100, 50 400 Z" 

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

</svg>

B-Vẽ riêng ba parabols để so sánh.
Parabol màu đỏ.
Path nầy vẽ parabol có hai đầu ngang nhau
nhưng hẹp.
 <svg width="500" height="500" 
xmlns = "htpp:// www.w3.org/2000/svg">
<path d="M 100 100, Q160 450 ,200 100, 100 100 Z"
stroke= "red" stroke-width = "4" fill= "none"/>
</svg>

Parabol màu xanh.
Path nầy vẽ parabol có hai đầu ngang nhau 
nhưng rộng hơn.
<svg width="500" height="500"  
xmlns = "htpp:// www.w3.org/2000/svg">
 <path d="M 100 100, Q160 350 ,200 100, 100 100 Z"
 stroke= "blue" stroke-width = "4" fill= "none"/>
</svg>

Chú ý.Thay đổi hai tọa độ tiếp theo chữ Q thì 
đáy của parabol rộng ra hoặc hẹp lại.
 Parabol màu xanh lá cây.
Path nây vẽ parabol nằm nghiêng.
<svg width="500" height="500" 
xmlns = "htpp:// www.w3.org/2000/svg">
<path d="M 200 150, Q54 280, 260 280, 200 150 Z "
 stroke= "green" stroke-width = "4" fill="none"/>
</svg>