首页 > 技术文章 > 关于photoshop钢笔工具中各点对应到“贝塞尔曲线”中的含义(cocos2d-x与iOS)

BalitaiMonk 2013-07-29 09:41 原文

1.程序中贝塞尔曲线的简单介绍,只介绍曲线部分。
程序中的贝塞尔曲线需要四个点:起始点(startPoint)

,控制点1(controlPoint1),控制点2(controlPoint2),结束点(endPoint)。起始点和结束点确定曲线端点,两个控制点确定曲线形状。
一般sdk中关于贝塞尔曲线api的参数一般有三个:控制点1(
controlPoint1),控制点2(controlPoint2),结束点(endPoint)。若贝塞尔曲线作为路径的一部分,则起始点(startPoint)默认为上一段路径的结束点。若贝塞尔曲线作为单独一条路径,则需要为其设置起始点。

2.photoshop中钢笔工具分析。
如图1所示,钢笔工具的画线时点下的点实际包括三个点,
即上图中的锚点、控制点1、控制点2,控制点1和控制点2关于锚点对称。在画布中直接点击而不拖动,会只产生一个点(参看图2绘制直线),可将这一个点理解为上述三个点聚集在了一个点上。
 
 
如图2,绘制直线时,直接点下两点即可。
 
 
 
 
如图3,这是一段关于结束点1(起始点2)
中心对称的贝塞尔曲线。我们知道,程序中绘制贝塞尔曲线需要四个点,而上图中确实出现了四个点,那么是不是就是我们需要的那四个点呢?实验证明不是。直接使用上述四个点作为贝塞尔曲线的四个参数,绘制出的路径只有起始和结束的一小段是和图中路径吻合的。
分析图1时,我们知道,钢笔工具绘制的路径,
其上的每一个点均有对应的锚点和控制点。从程序实现角度来看,上面这段曲线要分为两段贝塞尔曲线。第一段曲线的起始点1和控制点11重合,控制点12为“杠杆”的一端,结束点1为杠杆的锚点。
 
 
 
 
如图4,这段曲线由三段贝塞尔曲线组成,红线部分为手动添加,
意在标注第一段曲线的控制点2。


贝塞尔曲线的起始点、控制点与结束点的顺序与曲线形状无关,
只是用于标注运动方向。


补充一点:上述的第一起始点和最后结束点,是直接在画布中点击产生的(即图1中的控制点和锚点重合),即图3和图4中的曲线是在图2的基础上增加锚点做成的。
 
 
 
本博客内容均为原创,转载请注明:http://blog.csdn.net/balitaimonk/article/details/9568599

推荐阅读