SVG中以任意直線爲對稱軸的鏡像變換及其矩陣

直線一般方程爲 A x + B y + C = 0

則以該直線爲對稱軸,做鏡像變換的矩陣爲:


任意點P(x,y)變換後的新座標Q(x',y')的座標爲:



SVG中的直線通常是以座標軸形式或者是兩點形式表示的。

如果是以兩點線段形式表示的,需要先求出直線方程的係數。

兩點(x1,y1),(x2,y2)確定的直線方程爲:
(y1-y2)*x + (x2-x1)*y + (x1*y2-x2*y1) = 0
係數分別爲 A=(y1-y2), B=(x2-x1), C=(x1*y2-x2*y1)


示例SVG文件:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">

<rect x="0" y="0" width="800" height="500" fill="#ccffcc" stroke="gray" stroke-width="1"/>

<path id="p1" title="對稱軸" d="M200 0 L 800 500" fill="none" stroke="black" stroke-width="5"/>

<path id="p2" title="三角形" d="M500 100 L500 200 L700 100z" fill="none" stroke="black" stroke-width="2"/>

<path id="p3" title="鏡像三角形" d="M500 100 L500 200 L700 100z" fill="none" stroke="black" stroke-width="2"
 transform="matrix(0.18032786885245902,0.9836065573770492,0.9836065573770492,-0.18032786885245902,163.9344262295082,-196.72131147540983)"/>

</svg>


幾種特例的對稱變換矩陣:


發佈了165 篇原創文章 · 獲贊 151 · 訪問量 148萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章