Transform attribute Archive

これは、SVG & Canvas で使われているMatrix Transformation をJavascript で計算して値を求めるためのツールです。そのMatrix値を使ってCanvas に描くようにしました。Matrix は、3×3ですので2Dです。3Dは4×4のマトリックスになります。

How to : & example
input value of translate(t_xt_y) ---> translate(50,40)
input value of scale(s_xs_y) ---> scale(2) or scale(1,-0.75)
input value of rotate(angle) ---> rotate(25)
input value of skewX(angle) ---> skew(-45)
"Get Matrix" button is to get values of Matrix Transformation
"Clear Text" button is to clear the textarea
"Draw Matrix" button is to redraw the image below
"Clear Canvas" button is to clear images which is drawn.

IEでも表示させるために Google の excanvas.js を使っていますが、excanvas.js に Matrixで描写するための setTransform 属性がないためにスクリプトを改造しています。しかし、IEでは、外側の赤い部分しか Matrix を Transform 出来ません。

Continue reading

skewX, skewY から構成されるスキュー・トランスフォーメーションは、その形状からシアリング(shearing) と呼ばれたりします。

skewX はX軸に対して、skewY はY軸に対して設定された角度分、図のようにオブジェクトを変形させます。

もし設定角度(angle)がマイナスの場合は、逆の方向になります。

Continue reading

transform 属性の、scale のプロパティ値がマイナスになった場合、オブジェクトはミラーリング(mirroring)します。Chapter 9 の今回のセクションでは、これにrotate, translate などをミックスさせた位置関係を説明します。

Continue reading

Transform 属性の rotate プロパティは、オブジェクトを回転させるためのものですが、回転の軸(cx, cy)がどこにあるかで位置が変わります。rotate(angle, cx, cy) の cx, cy はオプションです。rotate(angle) と指定されてなければ、cx, cy はオブジェクトの x, y の位置になります。

circle 要素は、cx, cy の回転の軸が中心にあるため、このrotate プロパティはグラデーションやstroke-dasharrayなどのスタイル属性に対して有効になります。(ellipse要素は、X軸とY軸の半径（r) -->rx, ry があるので有効です）

Continue reading

transform 属性は、translate, rotate, scale, skewX, skewY の5つのプロパティから構成されています。

translate(tx, ty) はIDのある xlink:href 属性によってリンクされたオブジェクトをX軸(tx)、Y軸(ty)に移動させます。

rotate(angle)は、オブジェクトを回転させます。(Chapter9-2, 9-3)

scale(sx,sy)は、オブジェクトの大きさ(X軸にsx 倍, Y軸にsy 倍)を変更します。(Chapter9-1, 9-3)

skewX(angle)は、オブジェクトをX軸の方向に設定された角度分歪みを加えます。(Chapter9-4) skewY(angle)は、オブジェクトをY軸の方向に設定された角度分歪みを加えます。(Chapter9-4

Continue reading