Chapter 9 - 5 : SVG & Canvas Matrix Transformation

これは、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 出来ません。

マトリックスの計算方法は、上の図のようになります。

translate, scale, rotate, skewX, skewY 式にそれぞれの値を代入して、下の図で2つの式を計算させます。transform 属性で書かれている順番に従いさえすれば、頭から計算しても最後から計算しても同じです。

transform = "translate(tx [ ty]) rotate(angle [cx cy]) scale(sx [sy]) skewX(angle) skewY(angle)" transform = "matrix(a, b, c, d, e, f)" --->matrix(a, b, c, d, e, f, 0, 0, 1) transform = "translate(tx, ty)" ---> transform = "matrix(1, 0, tx, d, 1, ty)" transform = "rotate(angle)" ---> transform = "matrix(cos α, -sin α, 0, sin α, cos α, 0)" α = angle * π/180 transform = "skewX(angle)" ---> transform = "matrix(1, tan α, 0, 0, 1, 0)" transform ="skewY(angle)" ---> transform ="matrix(1, 0, 0, tan α, 1, 0)" transform = "scale(sx, sy)" ---> transform = "matrix(sx, 0, 0, 0, sy, 0)"

W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。

<use xlink:href="#cup" transform="translate(0,0)" /> <use xlink:href="#cup" transform="matrix(1,0,0,1,0,0)" /> <use xlink:href="#cup" transform="translate(450,450) scale(-1,1) rotate(165)" /> <use xlink:href="#cup" transform="matrix(0.9659,0.2588,0.2588,-0.9659,450,450)" />

これは、translate, scale, rotate, skew でTransform されたものをMatrix変換して纏めたものです。SVGレンダラーは、transform 属性で設定された各プロパティ値をMatrix変換してして処理するのでMatrix transform属性を使うことで計算量が減少した分、パフォーマンスが得られます。

translate(0,0) と matrix(1,0,0,1,0,0) は同じ位置に表示されます。
同じように、translate(450,450) scale(-1,1) rotate(165) と matrix(0.9659,0.2588,0.2588,-0.9659,450,450) も同じ位置です。

色の名称はこちらを参考：Name, Hex, RGB of Color

下のコードは上のSVGファイルのコードです。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="850" height="530"> <desc>matrix attribute</desc> <title>matrix attribute</title> <style type="text/css"> <![CDATA[ .txt {font-family:Arial;font-weight:bold; font-size:15; } .arrow {stroke:black;stroke-width:2.5; marker-start:url(#start); marker-end:url(#end); } ]]> </style> <defs> <pattern id="gridPattern" width="10" height="10" patternUnits="userSpaceOnUse"> <polyline points="10,0 0,0 0,10" fill="none" stroke="gray" stroke-width="0.25" /> </pattern> <rect id="grids" width="800" height="530" stroke="gray" stroke-width="0.25" fill="url(#gridPattern)" /> <marker id="start" viewBox="0 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 20,-6 16,0 20,6" stroke="black" /> </marker> <marker id="end" viewBox="-20 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 -20,-6 -16,0 -20,6" stroke="black" /> </marker> <linearGradient id="shade1" x2="50%" y2="0%" spreadMethod="reflect"> <stop offset="0%" stop-color="darkslategray"/> <stop offset="100%" stop-color="white"/> </linearGradient> <g id="cup" stroke="black" stroke-linejoin="round" > <rect id="handle" width="35" height="50" x="90" y="30" rx="7" ry="30" style="fill:none;stroke:#002222;stroke-width:10" /> <rect width="100" height="150" rx="8" ry="8" fill="url(#shade1)" /> <rect width="104" height="5" x="-2" y="-1" fill="url(#shade1)" /> </g> <path id="bracket" d="M0,0 Q-30,50 0 100" style="stroke:blue;stroke-width:3;fill:none" /> </defs> <!-- grids //--> <use xlink:href="#grids" /> <use xlink:href="#cup" transform="translate(0,0)" /> <use xlink:href="#cup" transform="matrix(1,0,0,1,0,0)" /> <use xlink:href="#cup" transform="translate(450,450) scale(-1,1) rotate(165)" /> <use xlink:href="#cup" transform="matrix(0.9659,0.2588,0.2588,-0.9659,450,450)" /> <use xlink:href="#cup" transform="matrix(0.8192,-0.5736,-0.5736,-0.8192,500,200)" /> <use xlink:href="#cup" transform="translate(500,200) scale(1,-1) rotate(35)" /> <use xlink:href="#cup" transform="matrix(-0.7071,-0.7071,-0.7071,0.7071,400,200)" /> <use xlink:href="#cup" transform="translate(400,200) scale(-1,1) rotate(-45)" /> <use xlink:href="#cup" transform="matrix(0.39482239,0.58852073,1.2247,-0.7071,150,450)" /> <use xlink:href="#cup" transform="translate(150,450) scale(-1,1) rotate(165) skewX(45) skewY(-25)" /> <g class="txt"> </g> </svg>