贝塞尔 平滑曲线

本次阅读大概需要5分钟
先看效果


平滑曲线

简单说明一下(对名称不清楚的都能在下文中找到,不要着急)
1.本案例适用于类似给定每天的销售额,画出当月的销售曲线
2.本曲线的特点是曲线任意处都是光滑的,数据点之间的曲线任意值都不能大于数据点值同时也不存在极值点(要么是上升曲线要么下降曲线,不可以是又上升又下降)
3.我们实现平滑需求使用的核心功能是三次贝塞尔曲线,我们要解决的核心问题是找到三次贝塞尔曲线的两个控制点
4.贝塞尔曲线本身是平滑的(这个不做证明)

mPath.moveTo(currentPointX,currentPointY);
mPath.cubicTo(firstControlPointX, firstControlPointY, secondControlPointX, secondControlPointY, nextPointX, nextPointY);
数据点P0(currentPointX,currentPointY)和P1(nextPointX,nextPointY)是给定的,我们的核心是如何找到firstControlPoint(firstControlPointX, firstControlPointY,)和secondControlPoint (secondControlPointX, secondControlPointY) 这两个点不是唯一的,准确的说有无数多个,我们只要找到其中一组就可以。
如果firstControlPoint 和secondControlPoint 可以满足以下两个条件就可以实现我们的目标了

  • 生成的曲线是光滑的那么就必须满足C2 P2 C3在同一条直线上, C4 P3 C5在同一条直线上。
  • C1 C2 在P1与P2的矩形范围之间 (可以等于),C3 C4在P2 P3的矩形范围之间并且C2 Y方向距离P2要小于等于C1到P2的距离
    数据点与控制点位置关系图 图1

一. 关于贝塞尔曲线(如果清楚可以跳过)

1. 什么是贝塞尔曲线##

线性贝塞尔曲线:




二次贝塞尔曲线:




三次贝塞尔曲线:

以下证明过程解释为什么我们要使用三次贝塞尔曲线
定理:设三次贝塞尔曲线的四个点为P0,P1,P2,P3(其中P0和P3称为端点,P1和P2称为控制点),则P0和P1的连线是P0的切线,P3和P2的连线是P3的切线。


我们之前说了贝塞尔曲线是光滑的,那如果希望我们所有的位置都是光滑的,那么连接点处必须也要光滑,如下图 我们刚刚证明了,使用三次贝塞尔曲线C2与P2的连线与P1 C1 C2 P2生成的曲线是相切的,同样三次贝塞尔曲线P2与C3的连线与P2 C3 C4 P3生成的曲线也是相切的,(当曲线上每一点处都具有切线,且切线随切点的移动而连续转动,这样的曲线成为光滑曲线。如果C2与P2连成的线C2P2同P2与C3连成的线P2C3是同一条直线那么P1 P2之间的曲线和P2 P3之间的曲线在P2点是光滑的)这就是为什么要使用三次贝塞尔曲线的理论基础 如果生成的曲线是光滑的那么就必须满足C2 P2 C3在同一条直线上, C4 P3 C5在同一条直线上。
如果C1 和C2在我们的P1和P2之间那么生成的曲线就不会超过给数据点这个通过三次贝塞尔曲线的图就可以看出,当然如果C1,C2超过了P1和P2那生成的曲线可能也会在P1和P2之间

二. 关于代码部分


mPath.moveTo(P0.x,P0.y);
mPath.cubicTo(firstControlPointX, firstControlPointY, secondControlPointX, secondControlPointY, P3.x, P3.y);
其中P1(firstControlPointX, firstControlPointY) P2(secondControlPointX, secondControlPointY)是控制点我们生成 不是数据点请注意。
代码地址
https://github.com/jiahengcen/SmoothPoint

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容