n阶贝塞尔曲线

新博客:https://ylong765.github.io/Yinl-Blog/

欢迎关注,同步更新

贝塞尔曲线

本文章借鉴自Unity中的曲线绘制.

贝塞尔曲线(Bézier curve)是由法国数学家Pierre Bézier所提出,类似于Photoshop软件中的钢笔工具,不过钢笔工具仅仅只是用了二阶贝塞尔曲线.

原理

在我们写代码之前还是了解一下原理为好,所以贝塞尔曲线的原理就是利用经过所有直线上的点的差值来进行绘制,如图为二阶曲线

下面给出二阶曲线的公式,P0,P1,P2为示例图上三点,t为差值数据:

\[ B(t) = (1 - t)^2P_0 + 2t(1 - t)P_1 + t^2P_2 , t\epsilon[0,1] \]

而一阶曲线自然就是一个直线,公式为:

\[ B(t) = P_0 + (P_1 - P_0)t = (1 - t)P_0 + tP_1 , t\epsilon[0,1]\]

从中我们可以发现规律从而推导到n阶的公式:

\[ B(t) = \sum_{i=0}^nPi(1 -t)^{n-i}t^i , t\epsilon[0,1]\]

而我们要在Scene窗口绘制出贝塞尔曲线,所以这里用到Editor类下的OnInspectorGUI函数绘制Inspector窗口中的贝塞尔曲线配置,OnSceneGUI函数中绘制真正的贝塞尔曲线,绘制方式我们利用Handles函数进行直线模拟曲线方式的绘制.

代码

首先我们需要一个数据类Curve,存储简单的Vector3数组


// 贝塞尔曲线数据
public Vector3[] points;

然后我们需要一个Editor类这里我们起名为CurveTool,继承自Editor并重写刚才说的两个函数,此处代码不懂可以看我之前写过的文章: Unity编辑器

public override void OnInspectorGUI()
{
    serializedObject.Update();
    EditorGUILayout.BeginVertical();
    EditorGUILayout.PropertyField(points, new GUIContent("坐标组"), true);
    EditorGUILayout.EndVertical();
    serializedObject.ApplyModifiedProperties();
}

然后接下来时重写OnSceneGUI函数了,不过在之前我们要看看具体怎么用代码来实现刚才的N阶曲线.

因为我们要利用直线来绘制,所以需要一个for循环来执行绘制,利用GetPoint函数来获取具体每个精度点的位置然后绘制直线就好了.

Vector3 lineStart = GetPoint(0f); // GetPoint函数为获取当前点的位置
for (int i = 1; i <= curve.lineSteps; i++) // lineSteps为绘制精度
{
    Vector3 lineEnd = GetPoint(i / (float)curve.lineSteps);
    Handles.DrawLine(lineStart, lineEnd);
    lineStart = lineEnd;
}

每次取差值就能减少一阶,所以利用递归从n阶到最后的一阶然后的返回值就是最终点的位置.

public Vector3 GetPoint(float t)
{
    Vector3[] pos = new Vector3[curve.points.Length];
    pos = (Vector3[])curve.points.Clone();
    return curve.transform.TransformPoint(GetLerpPoint(pos, t));
}

public Vector3 GetLerpPoint(Vector3[] pos, float t)
{
    if (pos.Length == 2)
    {
        return Vector3.Lerp(pos[0], pos[1], t);
    }
    Vector3[] newPos = new Vector3[pos.Length - 1];
    for (int i = 0; i < pos.Length - 1; i++)
    {
        newPos[i] = Vector3.Lerp(pos[i], pos[i + 1], t);
    }

    return GetLerpPoint(newPos, t);
}

原文地址:https://www.cnblogs.com/SHOR/p/9498801.html

时间: 2024-11-07 21:12:58

n阶贝塞尔曲线的相关文章

n阶贝塞尔曲线绘制(C/C#)

原文:n阶贝塞尔曲线绘制(C/C#) 贝塞尔是很经典的东西,轮子应该有很多的.求n阶贝塞尔曲线用到了?德卡斯特里奥算法(De Casteljau's Algorithm) 需要拷贝代码请直接使用本文最后的例程,文章前面的大部分代码都不是最佳实践,是在编程过程中的摸索(走过的弯路),不过这些示范对笔者今后写算法启发很大. 要完成的功能是根据起点,终点和控制点,绘制n阶贝塞尔曲线 首先看n阶贝塞尔曲线的公式 公式中用了组合数,大数组合数计算也有算法: 简言之就是把 ?大数乘以大数除以大数 ?这个过程

贝塞尔曲线

一.moveTo(float,float) 用于移动路径的起始点到Point(x,y),咱们都知道对于android系统来说,屏幕的左上角的坐标是 (0,0) , 我们在做一些操作的时候默认基准点也是 (0,0),比如调用canvas.rotate(float degrees) 将Canvas (画布) 旋转对应的角度,当然 ,Canvas还有另外一个方法rotate(float degrees,float px, float py),其中所做的事情就是通过 translate(px, py)

浅谈贝塞尔曲线以及iOS中粘性动画的实现

关于贝塞尔曲线,网上相关的文章很多,这里我主要想用更简单的方法让大家理解贝塞尔曲线,当然,这仅仅是我个人的理解,如有错误的地方还请大家能够帮忙指出来,这样大家才能一起进步. 贝塞尔曲线,常用到的可分为如下几类,1阶曲线,2阶曲线(二次函数算是一种),3阶曲线,高阶曲线. 通用的方程为 这是由p0~pn这n+1个点组成的高阶方程. 但是光看这个方程的话或许大家会觉得不太理解,这东西到底能做什么? 我先逐渐的从1阶曲线讲起吧: 这里借鉴下这篇文章的几幅图片来描绘一下下列几个情况: 1阶曲线,是由两个

贝塞尔曲线开发的艺术

贝塞尔曲线开发的艺术 一句话概括贝塞尔曲线:将任意一条曲线转化为精确的数学公式. 很多绘图工具中的钢笔工具,就是典型的贝塞尔曲线的应用,这里的一个网站可以在线模拟钢笔工具的使用: http://bezier.method.ac/ 贝塞尔曲线中有一些比较关键的名词,解释如下: 数据点:通常指一条路径的起始点和终止点 控制点:控制点决定了一条路径的弯曲轨迹,根据控制点的个数,贝塞尔曲线被分为一阶贝塞尔曲线(0个控制点).二阶贝塞尔曲线(1个控制点).三阶贝塞尔曲线(2个控制点)等等. 要想对贝塞尔曲

自定义视图与贝塞尔曲线

APK下载地址 1.贝塞尔曲线 以下公式中: B(t)为t时间下 点的坐标: P0为起点,Pn为终点,Pi为控制点 一阶贝塞尔曲线(线段): 意义:由 P0 至 P1 的连续点, 描述的一条线段 二阶贝塞尔曲线(抛物线): 原理:由 P0 至 P1 的连续点 Q0,描述一条线段. 由 P1 至 P2 的连续点 Q1,描述一条线段. 由 Q0 至 Q1 的连续点 B(t),描述一条二次贝塞尔曲线. 经验:P1-P0为曲线在P0处的切线. 三阶贝塞尔曲线: 通用公式: 高阶贝塞尔曲线: 4阶曲线:

OpenGL超级宝典笔记——贝塞尔曲线和曲面(转)

http://my.oschina.net/sweetdark/blog/183721 参数方程表现形式 在中学的时候,我们都学习过直线的参数方程:y = kx + b;其中k表示斜率,b表示截距(即与y轴的交点坐标).类似地,我们也可以用一个参数方程来表示一条曲线.1962年,法国工程师贝塞尔发明了贝塞尔曲线方程.关于贝塞尔曲线的详细介绍可以参考(维基贝塞尔).这里只介绍OpenGL实现贝塞尔的函数. OpenGl定义一条曲线时,也把它定义为一个曲线方程.我们把这条曲线的参数成为u,它的值域就

贝塞尔曲线原理(转载)

最近在做图形学的实验,关于贝塞尔曲线在网上看到一个非常好的资料: 以下内容转载自:https://www.cnblogs.com/hnfxs/p/3148483.html 原理和简单推导(以三阶为例): 设P0.P02.P2是一条抛物线上顺序三个不同的点.过P0和P2点的两切线交于P1点,在P02点的切线交P0P1和P2P1于P01和P11,则如下比例成立: 这是所谓抛物线的三切线定理. 当P0,P2固定,引入参数t,令上述比值为t:(1-t),即有: t从0变到1,第一.二式就分别表示控制二边

unity 两点间生成随机的贝塞尔曲线

效果如图: 思路: 主要问题在于生成随机控制点. 1. 以start -> end 为z轴建立坐标系,获得 x_Axis, y_Axis, z_Axis 2.以z轴方向随机长度, x轴y轴随机所在位置 3.用贝塞尔曲线公式生成曲线 public class Test : MonoBehaviour { public Transform m_Start; public Transform m_End; Vector3 m_AxisX; Vector3 m_AxisY; Vector3 m_Axis

OpenGL 实践之贝塞尔曲线绘制

说到贝塞尔曲线,大家肯定都不陌生,网上有很多关于介绍和理解贝塞尔曲线的优秀文章和动态图. 以下两个是比较经典的动图了. 二阶贝塞尔曲线: 三阶贝塞尔曲线: 由于在工作中经常要和贝塞尔曲线打交道,所以简单说一下自己的理解: 现在假设我们要在坐标系中绘制一条直线,直线的方程很简单,就是 y=x ,很容易得到下图: 现在我们限制一下 x 的取值范围为 0~1 的闭区间,那么可以得出 y 的取值范围也是 0~1. 而在 0~1 的区间范围内,x 能取的数有多少个呢?答案当然是无数个了. 同理,y 的取值