清新,倾心~

skying

svg的基础Curve



曲线指令
一共有三组,和直线指令一样,指令字母大写表示坐标位置是绝对坐标,指令字母小写表示坐标位置是相对坐标。

  • 三次贝塞尔曲线指令 (C, c, S, s)

  • 二次贝塞尔曲线指令 (Q, q, T, t)

  • 椭圆弧线 (A, a)

三次贝塞尔曲线指令

我会假设你已经对贝塞尔曲线很熟悉,可能你已经在某些图形编辑器里绘制过。我就不解释他们的数学原理了,但是你可以通过定义一个起点和终点,以及两个控制点(一个控制起点,一个控制终点),绘制一条贝塞尔曲线。

三次贝塞尔曲线指令的格式为:

C (or c) x1,y1 x2,y2 x,y

这里

  • x1,y1 是曲线起点的控制点坐标

  • x2,y2 是曲线终点的控制点坐标

  • x,y 是曲线的终点坐标

曲线的起点是上一条指令的终点,所以我们不需要再次设置。



发现什么了吗?特无语了,不知道哪里出问题了,对比一下“半圆”和“半圆线”,代码一样~只是半圆那个是敲出来的。还有第一副图中的代码中的另一个图是显示不出的。为什么呢?


通常,在连接曲线时,第二条曲线的起点控制点是第一条曲线终点控制点的对称点。

幸运的是,你不必弄清楚如何计算控制点的反射。S 和 s 指令是让浏览器帮你计算对称点的快捷方式,使用(S s)指令创建对称的控制点很容易。

<svgwidth="600"height="300"><pathd="M100,200             C100,100 400,100 400,200             S400,100 300,0"fill="none"stroke="#000"stroke-width="2px" /></svg>


二次贝塞尔曲线指令

二次贝塞尔曲线指令只需要一个控制点,同时作为起点控制点和终点控制点。

<svgwidth="600"height="300"><pathd="M100,200             Q250,100 400,200"fill="none"stroke="#000"stroke-width="2px" /></svg>

我们还是使用moveto指令作为开始,绘制二次贝塞尔曲线。曲线的起点坐标是(100,200),终点坐标是(400,200),控制点坐标是(250,100)。

二次贝塞尔曲线指令也有一个快捷方法,(T 或 t)指令可以用来平滑多条曲线之间的连接。它和三次贝塞尔曲线指令中的快捷方式(S 或 s)是同样的效果,也有助于通过对称的控制点来平滑地开始绘制第二条曲线。

<svgwidth="600"height="300"><pathd="M100,200           Q250,100 400,200           T600 200"fill="none"stroke="#000"stroke-width="2px" /></svg>

椭圆弧线

三种曲线指令中的最后一种是椭圆弧线(A 或 a)。下面这个弧线指令绘制了一段椭圆,它是曲线指令里边需要最多参数的,格式如下:

A rx ry  x-axis-rotation  large-arc-flag  sweep-flag  x y

这里

  • x,y 是弧线的终点

  • rx 是弧线在x轴方向的半径

  • ry 是弧线在y轴方向的半径

  • x-axis-rotation 是与x轴夹角的度数

椭圆弧绘制出的弧线是椭圆的一个片段。若rx和ry的值相同,则绘制出圆

以下两个标志需要一些讲解。给定起点和终点坐标,以及rx ry x-axis-rotation的值,绘制出的弧线有四种可能,用下边的示例看起来比较清晰。

<svgwidth="600"height="300"><pathd="M250,100  A120,80 0 0,0 250,200"fill="none"stroke="red"stroke-width="5" /><pathd="M250,100  A120,80 0 1,1 250,200"fill="none"stroke="green"stroke-width="5"/><pathd="M250,100  A120,80 0 1,0 250,200"fill="none"stroke="purple"stroke-width="5"/><pathd="M250,100  A120,80 0 0,1 250,200"fill="none"stroke="blue"stroke-width="5"/></svg>

示例中,看起来好像有两个相同尺寸的彩色椭圆,但是这其实是四段不同的弧线,具体参考上方的代码。


三个椭圆都有相同的rx, ry, x-axis-rotation值。正如你看到的这四段不同的弧线,分别都是从起点绘制到终点。

这四段弧线的区别是 large-arc-flag 和 sweep-flag 参数的值。图中的红色和紫色弧线,sweep-flag的值都为0,红色弧线 large-arc-flag 的值为0,而紫色弧线 large-arc-flag 的值为1。它们的区别仅在于 large-arc-flag 值的不同。

对比这两段圆弧,你能猜出 large-arc-flag 值是用来干嘛的吗?值为0表示使用较小的弧线,值为1表示使用较大的弧线。

现在比较一下红色和蓝色弧线。这两段弧线的 large-arc-flag 值都为0,所以它们都是较小的弧线。但是红色弧线还有一个 sweep-flag 值为0,而蓝色的 sweep-flag 值为1。

蓝色弧线和红色弧线是关于起点和终点所在的坐标轴对称的。 sweep-flag 的值决定了是使用弧线(值为0)还是使用它的轴对称弧线(值为1)。












http://www.w3cplus.com/svg/svg-paths-curve-commands.html


评论

© skying | Powered by LOFTER