2019-07-18 svg --path
2019-07-18 本文已影响0人
DOGirl
image.png
image.png
image.png
image.png
可以自己实现一个path字符串解析器
image.png
image.png
第二部分 移动和直线命令
大写表示绝对位置（位置坐标），小写表示相对位置（长度）
image.png
image.png
image.png
第三部分 弧线命令
image.png
如果起点和终点的距离不大于xr的2倍，在数学上可以证明存在这么一个椭圆，他的位置起点和终点都经过。连接起点和终点的弧有4个
image.png
image.png
// A开始绘制的就是弧线中的命令，后两个参数就是画笔结束的当前位置，中间两个就是laf和sf
image.png
image.png
第四部分 贝塞尔曲线
image.png
image.png
image.png
从绿色的线中在取蓝色的线作为t
svg中只能绘制二次和三次贝塞尔曲线
下面是4次（高阶）贝塞尔曲线
image.png
image.png
Q后面跟的是控制点坐标（x1，y1）和结束点坐标（x,y）,Q是大写时都是相对于path自身坐标系的绝对坐标，小写是相对坐标
image.png
image.png
image.png
三次贝塞尔曲线有两个控制点
image.png
第五部分 光滑贝塞尔曲线
image.png
image.png
image.png
image.png
image.png
一个重要的内容是snap.svg库
