SVG/transform/matrix：修訂版本之間的差異

出自六年制學程
跳轉到： 導覽、 搜尋
（→‎旋轉）
 
（未顯示同用戶所作出之8次版本）
第 1 行： 第 1 行：
 
[[分類:HTML]]
 
[[分類:HTML]]
 +
==矩陣基本演算規則==
 +
<table style='border:none;'><tr>
 +
<td>
 
<table style='border:none;'>
 
<table style='border:none;'>
−
<tr><th style='width:3px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>a b<br/>c d</th><th style='width:3px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
+
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>a c<br/>c d</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 
</table>
 
</table>
 +
</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>ax+by<br/>cx+dy</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td>
 +
</tr></table>
 +
====旋轉====
 +
<table style='border:none;'><tr>
 +
<td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>cosθ -sinθ<br/>sinθ cosθ</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>cosθx-sinθy<br/>sinθx+cosθy</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td>
 +
</tr></table>
 +
====縮放====
 +
<table style='border:none;'><tr>
 +
<td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>S<sub>x</sub> 0<br/>0 S<sub>y</sub></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>S<sub>x</sub>x<br/>S<sub>y</sub>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td>
 +
</tr></table>
 +
====x拉斜====
 +
<table style='border:none;'><tr>
 +
<td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>1 k<br/>0 1</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x+ky<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td>
 +
</tr></table>
 +
====y拉斜====
 +
<table style='border:none;'><tr>
 +
<td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>1 0<br/>k 1</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y+kx</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td>
 +
</tr></table>
 +
====沿經過原點的直線反射====
 +
假設（ux, uy）為直線方向的單位向量。變換矩陣為：
 +
<table style='border:none;'><tr>
 +
<td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>2u<sub>x</sub><sup>2</sup>-1 2u<sub>x</sub>u<sub>y</sub><br/>2u<sub>x</sub>u<sub>y</sub> 2u<sub>y</sub><sup>2</sup>-1</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>(2u<sub>x</sub><sup>2</sup>-1)x+2u<sub>x</sub>u<sub>y</sub>y<br/>2u<sub>x</sub>u<sub>y</sub>x+(2u<sub>y</sub><sup>2</sup>-1)y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td>
 +
</tr></table>
 +
====沿直線 y=(tanθ)x 進行反射====
 +
<table style='border:none;'><tr>
 +
<td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>cos2θ sin2θ<br/>sin2θ -cos2θ</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>cos2θx+sin2θy<br/>sin2θx-cos2θy</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td>
 +
</tr></table>
 +
====投影到一條經過原點的直線====
 +
 +
==SVG transform 矩陣變換==
 +
===(○)基本===
 +
<table style='border:none;'><tr>
 +
<td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>a c e<br/>b d f<br/>0 0 1</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y<br/>1</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>ax+cy+e<br/>bx+dy+f<br/>1</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td><td>=</td><td>
 +
<table style='border:none;'>
 +
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup><br/>1</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
 +
</table>
 +
</td>
 +
</tr></table>

2017年12月14日 (四) 07:52的最新修訂版本

矩陣基本演算規則

a c
c d
x
y
=
ax+by
cx+dy
=
x'
y'

旋轉

cosθ -sinθ
sinθ cosθ
x
y
=
cosθx-sinθy
sinθx+cosθy
=
x'
y'

縮放

Sx 0
0 Sy
x
y
=
Sxx
Syy
=
x'
y'

x拉斜

1 k
0 1
x
y
=
x+ky
y
=
x'
y'

y拉斜

1 0
k 1
x
y
=
x
y+kx
=
x'
y'

沿經過原點的直線反射

假設（ux, uy）為直線方向的單位向量。變換矩陣為：

2ux2-1 2uxuy
2uxuy 2uy2-1
x
y
=
(2ux2-1)x+2uxuyy
2uxuyx+(2uy2-1)y
=
x'
y'

沿直線 y=(tanθ)x 進行反射

cos2θ sin2θ
sin2θ -cos2θ
x
y
=
cos2θx+sin2θy
sin2θx-cos2θy
=
x'
y'

投影到一條經過原點的直線

SVG transform 矩陣變換

(○)基本

a c e
b d f
0 0 1
x
y
1
=
ax+cy+e
bx+dy+f
1
=
x'
y'
1
取自「http://jendo.org/wiki1231/index.php?title=SVG/transform/matrix&oldid=37155」