一、Path概述
IMG_2101.PNG
IMG_2102.PNG
IMG_2103.PNG
IMG_2105.PNG
1.1 Path命令汇总
IMG_2106.PNG
大写代表绝对位置，小写代表相对位置
IMG_2109.PNG
IMG_2111.PNG
IMG_2112.PNG
1.2 弧线命令
IMG_2113(20170913-094651).jpg
laf 大角，sf 顺时针
IMG_2114.PNG
IMG_2115.PNG
IMG_2116.PNG
IMG_2117.PNG
IMG_2119.PNG
IMG_2120.PNG
IMG_2121.PNG
IMG_2122.PNG
IMG_2123.PNG
IMG_2124.PNG
1.3 贝塞尔曲线
IMG_2125.PNG
1.3.1 一次贝塞尔曲线
IMG_2126.PNG
1.3.2 二次贝塞尔曲线
IMG_2127.PNG
IMG_2128.PNG
1.3.3 三次贝塞尔曲线
IMG_2158.PNG
IMG_2159.PNG
IMG_2160.PNG
IMG_2161.PNG
IMG_2162.PNG
IMG_2164.PNG
1.3.4 四次贝塞尔曲线
IMG_2165.PNG
IMG_2166.PNG
IMG_2167.PNG
IMG_2168.PNG
IMG_2169.PNG
IMG_2170.PNG
1.3.5 贝塞尔曲线汇总
IMG_2171.PNG
1.4 二次贝塞尔曲线命令
Q x1 y1 x y
x1,y1 是控制点1，
x,y 是终点
IMG_2172.PNG
1.5 三次贝塞尔曲线命令
C x1 y1 x2 y2 x y
x1,y1 是控制点1，
x2,y2 是控制点2，
x,y 是终点
IMG_2173.PNG
1.6 贝塞尔曲线演示链接 http://graphic.duapp.com/path-editor.html
IMG_2178.PNG
IMG_2180.PNG
IMG_2182.PNG
IMG_2184.PNG
IMG_2185.PNG
IMG_2186.PNG
IMG_2187.PNG
1.7 光滑曲线
二次贝塞尔曲线(Q)，的光滑曲线命令：T
三次贝塞尔曲线(C)，的光滑曲线命令：S
IMG_2188.PNG
如图：两条 三次贝塞尔曲线 连接的 光滑曲线。
三次光滑曲线命令： S x2,y2 x,y
x2,y2 是第二条贝塞尔曲线的第二个控制点
x,y 是第二条贝塞尔曲线的终点
IMG_2190.PNG
三次光滑曲线命令： S x2,y2 x,y
第二条贝赛尔曲线的第一个控制点，与第一条的第二个控制点关于第一条终点镜像。
IMG_2201.PNG
如图：
M p1 C p2 p3 p4 S p5 p6
光标移动到p1；
画贝塞尔曲线:p2 p3是控制点, p4是终点；
做平滑曲线:第一个控制点是p3关于p4的镜像点，p5为第二个控制点，p6为终点。
IMG_2202.PNG
假如第一段不是贝塞尔曲线，那么做: S p7 p8，衔接处将不是平滑曲线。
IMG_2204.PNG
1.8 前面不是贝塞尔曲线的，做二次平滑曲线，将一直是平滑曲线。
M p1 T p2 p3 p4 p5 p6
IMG_2206.PNG
IMG_2207.PNG
回顾与思考
据说求贝塞尔曲线长度，有一个框架提供一个什么算法？
IMG_2208.PNG
