Thuộc tính ‘transform’

Một phần của tài liệu tìm hiểu svg và ứng dụng (Trang 96 - 98)

3.12 Hệ trục toạ độ, các phép biến đổi và các đơn vị đo

3.12.5 Thuộc tính ‘transform’

Thuộc tính ‘transform’ (biến đổi) là một <transform-list>” (danh sách các biến

đổi). Thuộc tính này dùng để định nghĩa một mảng các phép biến đổi, các phép biến đổi sẽ được áp dụng theo trình tự cung cấp trong mảng. Các phép biến đổi riêng biệt được phân nhau bởi khoảng trắng hoặc dấu phẩy (‘,’). Các phép biến đổi được định

nghĩa trước là:

• matrix(<a><b><c><d><e><f>) được dùng để định nghĩa một phép biến

đổi bằng ma trận biến đổi. Các giá trị a,b,c,d,e,f là các phần tử của ma

trận biến đổi affine 3x3:

• translate(<tx><[ty]>) được dùng để định nghĩa một phép tịnh tiến.Với

tx độ dời theo trục x, ty là độ dời theo trục y. Nếu <ty> khơng được

cung cấp thì được cho bằng 0.

• scale(<sx>[<sy>]) được dùng để định nghĩa một phép tỉ lệ. Với sx và sy là chỉ số co dãn theo trục x va trục y. Nếu trị tuyệt đối của sx và sy lớn hơn 1 thì phép biến đổi dùng để phĩng to hình, ngược lại thì thu nhỏ

96

• rotate(<rotate-angle>[<cx><y>]) được dùng để định nghĩa một phép

quay quanh một điểm được cho trước <rotate-angle> độ. Nếu tham số

<cx> và <cy> khơng được cung cấp thì sẽ quay quanh gốc toạ độ của hệ trục toạ độ người dùng hiện tại. Phép biến đổi này tương đương ma trận [cos(a) sin(a) –sin(a) cos(a) 0 0].

Nếu tham số <cx> và <cy> được cung cấp thì sẽ quay quanh điểm (<cx>,<cy>). Phép biến đỏi này tương đương với dãy các biến đổi sau:

translate(<cx>,<cy>) rotate(<rotate-angle>) translate(-<cx>,-cy>).

• skewX(<skew-angle>) chỉ định một phép biến đổi xiên dọc theo trục x.

• skewY(<skew-angle>) chỉ định một phép biến đổi xiên dọc theo trục y. Khi áp dụng mảng các phép biến đổi thì kết quả cũng giống như khi áp dụng các phép biến đổi riêng rẽ theo trình tự trong mảng.

Ví du 1:

Định nghĩa mảng các phép biến đổi:

<g transform="translate(-10,-20) scale(2) rotate(45) translate(5,10)">

<!-- graphics elements go here --> </g>

Cũng cĩ kết quả như định nghĩa các phép biến đổi riêng biệt sau:

<g transform="translate(-10,-20)"> <g transform="scale(2)">

<g transform="rotate(45)">

<g transform="translate(5,10)">

<!-- graphics elements go here --> </g>

</g> </g> </g>

Thuộc tính ‘transform’ được áp dụng trước khi xử lý bất kỳ toạ độ hay giá trị

97

<rect x="10" y="10" width="20" height="20" transform="scale(2)"/>

Các giá trị x, y, width, height được xử lý sau khi hệ trục toạ độ hiện tại được

áp dụng phép biến đổi tỉ lệ scale(2). Thuộc tính ‘x’, ‘y’, ‘width’ và ‘height’ được tính theo hệ trục toạ độ người dùng mới. Do đĩ thành phần ‘rect’ sẽ tương đương

với :

<g transform="scale(2)">

<rect x="10" y="10" width="20" height="20"/> </g>

Một phần của tài liệu tìm hiểu svg và ứng dụng (Trang 96 - 98)

Tải bản đầy đủ (PDF)

(195 trang)