3.12 Hệ trục toạ độ, các phép biến đổi và các đơn vị đo
3.12.4 Các phép biến đổi hệ trục toạ độ
Một hệ trục toạ độ người dùng mới (nghĩa là một hệ trục toạ độ hiện hiện tại mới – new current coordinate system ) cĩ thể được thiết lập bằng các phép biến đổi thơng qua thuộc tính ‘transform’ của thành phần vật chứa hay thành phần đồ họa,
hay thơng qua thuộc tính ‘viewBox’ của thành phần ‘svg’, ‘symbol’, ‘marker’, ‘pattern’ và thành phần ‘view’. Thuộc tính ‘transform’ và ‘viewBox’ được áp dụng (biến đổi) cho các toạ độ và chiều dài trong hệ trục toạ độ người dùng của thành
89
phần chứa thuộc tính này và tất cả các thành phần con. Các phép đổi cĩ thể lồng nhau, lúc đĩ các phép biến đổi sẽ được cộng dồn lại.
Ví dụ 2:
Dưới đây là ví dụ về một tài liệu khơng cĩ phép biến đổi. Chuỗi văn bản được xác định trong hệ toạ độ ban đầu.
Kết quả trên trình duyệt:
Hình 3.18. Minh họa hiển thị khơng cĩ phép biến đổi
Ví dụ 3:
Thiết lập một hệ trục toạ độ người dùng bằng phép tịnh tiến transfrom=
“translate(50,50)” trên thành phần ‘g’ thứ ba. Hệ trục toạ độ người dùng mới cĩ gốc <?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="400px" height="150px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Example OrigCoordSys - Simple transformations: original picture</desc>
<g fill="none" stroke="black" stroke-width="3" >
<!-- Draw the axes of the original coordinate system --> <line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="150" /> </g>
<g>
<text x="30" y="30" font-size="20" font-family="Verdana" >
ABC (orig coord system)
</text>
</g> </svg>
90
toạ độ tại (50,50) trong hệ trục toạ độ nguyên thủy. Kết quả của phép biến đổi này là một toạ độ (30,30) trong hệ trục toạ độ người dùng mới được ánh xạ thành
(80,80) trong hệ trục toạ độ nguyên thủy . Như vậy các toạ độ được tính tiến 50 đơn vị trên trục x và 50 đơn vị trên trục y.
<?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="400px" height="150px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Example NewCoordSys - New user coordinate system</desc>
<g fill="none" stroke="black" stroke-width="3" >
<!-- Draw the axes of the original coordinate system --> <line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="150" /> </g>
<g>
<text x="30" y="30" font-size="20" font-family="Verdana" >
ABC (orig coord system) </text>
</g>
<!-- Establish a new coordinate system, which is shifted (i.e., translated) from the initial coordinate
system by 50 user units along each axis. -->
<g transform="translate(50,50)">
<g fill="none" stroke="red" stroke-width="3" > <!-- Draw lines of length 50 user units along the axes of the new coordinate system --> <line x1="0" y1="0" x2="50" y2="0" stroke="red" /> <line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="30" y="30" font-size="20" font-family="Verdana" >
ABC (translated coord system) </text>
</g> </svg>
91 Kết quả trên trình duyệt:
Ví dụ 4:
Dùng phép biến đổi tỉ lệ (sclale) và quay (rotate), ví dụ sau định nghĩa hai hệ trục toạ độ người dùng mới.
• Một hệ trục là kết quả của phép tịnh tiến 50 đơn vị theo trục x và 30
đơn vị theo trục y, và phép quay 30o
• Một hệ trục là kết quả của phép tịnh tiến 200 đơn vị theo trục x và 40
đơn vị theo trục y, và phép tỉ lệ 1.5
<?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="400px" height="120px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Example RotateScale - Rotate and scale transforms</desc>
<g fill="none" stroke="black" stroke-width="3" >
<!-- Draw the axes of the original coordinate system --> <line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="120" /> </g>
<!-- Establish a new coordinate system whose origin is at (50,30)
in the initial coord. system and which is rotated by 30 degrees. -->
<g transform="translate(50,30)"> <g transform="rotate(30)">
<g fill="none" stroke="red" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" /> </g>
92
<text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
ABC (rotate) </text>
</g> </g>
<!-- Establish a new coordinate system whose origin is at (200,40)
in the initial coord. system and which is scaled by 1.5. -->
<g transform="translate(200,40)"> <g transform="scale(1.5)">
<g fill="none" stroke="red" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" /> </g>
<text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" > ABC (scale) </text> </g> </g> </svg>
Kết quả trên trình duyệt:
Hình 3.20. Minh họa phép quay và phép co giãn
Ví dụ 5: Định nghĩa hai hệ trục toạ độ được biến đổi xiên tương đối với hệ trục
toạ độ nguyên thủy.
<?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="400px" height="120px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Example Skew - Show effects of skewX and skewY</desc>
<g fill="none" stroke="black" stroke-width="3" >
<!-- Draw the axes of the original coordinate system -- >
93
<line x1="0" y1="1.5" x2="400" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="120" /> </g>
<!-- Establish a new coordinate system whose origin is at (30,30)
in the initial coord. system and which is skewed in X by 30 degrees. -->
<g transform="translate(30,30)"> <g transform="skewX(30)">
<g fill="none" stroke="red" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" /> </g>
<text x="0" y="0" font-size="20" font- family="Verdana" fill="blue" >
ABC (skewX) </text>
</g> </g>
<!-- Establish a new coordinate system whose origin is at (200,30)
in the initial coord. system and which is skewed in Y by 30 degrees. -->
<g transform="translate(200,30)">
<g transform="skewY(30)">
<g fill="none" stroke="red" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" /> </g>
<text x="0" y="0" font-size="20" font- family="Verdana" fill="blue" > ABC (skewY) </text> </g> </g> </svg>
Kết quả trên trình duyệt:
94
Ví dụ 6: Các phép biến đổi lồng nhau.
<?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="400px" height="150px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Example Nested - Nested transformations</desc> <g fill="none" stroke="black" stroke-width="3" >
<!-- Draw the axes of the original coordinate system -->
<line x1="0" y1="1.5" x2="400" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="150" /> </g>
<!-- First, a translate -->
<g transform="translate(50,90)">
<g fill="none" stroke="red" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" /> </g>
<text x="0" y="0" font-size="16" font- family="Verdana" >
....Translate(1) </text>
<!-- Second, a rotate --> <g transform="rotate(-45)">
<g fill="none" stroke="green" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" /> </g>
<text x="0" y="0" font-size="16" font- family="Verdana" >
....Rotate(2) </text>
<!-- Third, another translate --> <g transform="translate(130,160)">
<g fill="none" stroke="blue" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" /> </g>
<text x="0" y="0" font-size="16" font- family="Verdana" > ....Translate(3) </text> </g> </g> </g> </svg>
95 Kết quả trên trình duyệt :
Hình 3.22 Minh họa phép các phép biến đổi lồng nhau