Path微语言
<h3>代码用例</h3>
<p><strong>M (Move移动到一个点移动xy到另一个点xy)<br />
L(Line终点xy)<br />
H水平移动x(大写是绝对坐标,小写是相对坐标)<br />
V垂直移动y(大写是绝对坐标,小写是相对坐标)<br />
C三次贝塞尔曲线<br />
Q二次贝塞尔曲线
S平滑三次贝塞尔曲线<br />
T平滑二次贝塞尔曲线<br />
A(弧线:椭圆横轴半径,椭圆纵轴半径,旋转角度、大弧1/小弧0、扫掠方向、坐标xy)
Z 图形封闭</strong></p>
<h3>代码用例</h3>
<pre><code class="language-html">&lt;Path Data=&quot;M10,10 L200,50 A100 100 10 1 0 120 50 H50 V100 Z&quot; Stroke=&quot;Red&quot; StrokeThickness=&quot;2&quot; Margin=&quot;30&quot; Fill=&quot;Orange&quot;&gt;&lt;/Path&gt;</code></pre>
<h4>含义解析:</h4>
<ol>
<li><code>M10,10</code> : 移动到坐标 (10, 10)。</li>
<li><code>L200,50</code> : 从当前点 (10, 10) 画一条直线到点 (200, 50)。</li>
<li><code>A100 100 10 1 0 120 50</code> : 画一个椭圆弧线,椭圆的横轴半径为100,纵轴半径为100,旋转角度为10度,大弧标志为1(即大弧),扫掠方向为0(即逆时针),弧线的终点坐标为 (120, 50)。</li>
<li><code>H50</code> : 从 (120, 50) 水平移动到 x=50。</li>
<li><code>V100</code> : 从目前的 x=50,再垂直移动到 y=100。</li>
<li><code>Z</code> : 关闭路径(即使路径回到起点 (10, 10))。</li>
</ol>
<h4>属性:</h4>
<ul>
<li><code>Stroke=&quot;Red&quot;</code> : 路径的边框颜色是红色。</li>
<li><code>StrokeThickness=&quot;2&quot;</code> : 路径的边框厚度为2个单位。</li>
<li><code>Margin=&quot;30&quot;</code> : 给路径加上一个30个单位的边距。</li>
<li><code>Fill=&quot;Orange&quot;</code> : 使用橙色填充路径内部。</li>
</ul>