unity 曲线可视化图表制作(lineRenderer + 贝塞尔曲线)-Toy模板网

这篇具有很好参考价值的文章主要介绍了unity 曲线可视化图表制作(lineRenderer + 贝塞尔曲线)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

unity 曲线可视化图表制作(lineRenderer + 贝塞尔曲线)
需求要实现一个动态变化的曲线
思路：
分为两部分：画线和平滑曲线

首先解决画线问题：
1.lineRenderer
2.texture的setpixel
肯定选已经做好的轮子1啦

平滑曲线思路：
1.抛物线
2.贝塞尔曲线
抛物线做连续的曲线太抽象了肯定选贝塞尔曲线
先了解一下贝塞尔曲线
一次贝塞尔

unity 曲线可视化图表制作(lineRenderer + 贝塞尔曲线)

对应代码就是一个简单的插值

Vector2 a, Vector2 b, float time
var p0 = Vector2.Lerp(a, b, time);

二次贝塞尔
unity 曲线可视化图表制作(lineRenderer + 贝塞尔曲线)
在这里插入图片描述

public static Vector2 EvaluateQuadratic(Vector2 a, Vector2 b, Vector2 c, float time)
        {
            var p0 = Vector2.Lerp(a, b, time);
            var p1 = Vector2.Lerp(b, c, time);
            return Vector2.Lerp(p0, p1, time);
        }

三次贝塞尔
unity 曲线可视化图表制作(lineRenderer + 贝塞尔曲线)

  public static Vector2 EvaluateCubic(Vector2 a, Vector2 b, Vector2 c, Vector2 d, float time)
        {
            var p0 = EvaluateQuadratic(a, b, c, time);
            var p1 = EvaluateQuadratic(b, c, d, time);
            return Vector2.Lerp(p0, p1, time);
        }

了解了三次贝塞尔曲线发现是由四个点组成的贝塞尔曲线
其中P0和P3是贝塞尔曲线必经过的点的这样就能画出来自己想要的“一段”曲线了

但想要画连续的曲线怎么办呢首先我们给定一个我们想要的出生点X 然后初始化出来四个点就是一段曲线你想怎么给都行反正这初始化的四个点就能组成一段3次贝塞尔曲线大概就是左右上下各给一个点初始化完成了如果想加进来一个点组成连续的曲线
首先新的曲线
起始点3 为前一段曲线的尾端点
点4 由前一段曲线的2-3切线延申出来相同距离的点4
点5 等于点4和点6的中点
点6 就是你新给到的点
以此类推可以一直新建平滑的曲线
unity 曲线可视化图表制作(lineRenderer + 贝塞尔曲线)