十分钟学会使用贝塞尔弧线

2017-09-14 10:48:47来源:网络收集作者:管理员人点击

分享

声明,本片文章(笔记)大部分内容,包括图片,例子都来自于 启航大神的《自定义控件三部曲》


首先,看一下贝塞尔弧线的方程式:


十分钟学会使用贝塞尔弧线


看看就行,在数学没点造诣是研究不出什么的。。。


在看看动画:


十分钟学会使用贝塞尔弧线


盯着看了几分钟,可以大概了解贝塞尔弧线的生成过程了吧。

上图中,一共有 P1、P2、P3 三个点,很明显,如果是直接连接这三个点,那么会得到 P0P1P2 这一段折线;


现在希望这三点能以柔和的方式连接起来,那要怎么做?


很好,把它变成贝塞尔曲线:


1. 保持起点和终点不变,即 P0 和 P2;


2. 将中间点 P1 当成控制点;

什么是控制点?


额控制点呐,就是控制最终生成的曲线的弯曲状态的点,影响的是整个曲线的轨迹。。。这种东西要么从公式里推出来,要么还是看图吧:


十分钟学会使用贝塞尔弧线


上图中,使用的是 PS 的钢笔工具,先确定一个起点,然后确定一个终点,拉动终点会出现控制点,调整控制点的位置可以看到最终形成的曲线在变化,置于鼠标拖拽的那个第四个点,忽略就好,它是 PS 提供给我们更方便确定控制点位置的附加点。


所以控制点的作用就是这样。。。


(读者:什么,概念都没有的吗??)


十分钟学会使用贝塞尔弧线


好了,总而言之,贝塞尔曲线就是可以通过添加控制点,在两个点之间形成的一条光滑的曲线。


现在看下 Android Path 类中提供的 贝塞尔弧线的 API 是怎么使用的。


/**
* Add a quadratic bezier from the last point, approaching control point
* (x1,y1), and ending at (x2,y2). If no moveTo() call has been made for
* this contour, the first point is automatically set to (0,0).
*
* @param x1 The x-coordinate of the control point on a quadratic curve
* @param y1 The y-coordinate of the control point on a quadratic curve
* @param x2 The x-coordinate of the end point on a quadratic curve
* @param y2 The y-coordinate of the end point on a quadratic curve
*/
public void quadTo(float x1, float y1, float x2, float y2) {
isSimplePath = false;
native_quadTo(mNativePath, x1, y1, x2, y2);
}



最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台