unity 曲线可视化图表制作

需求要实现一个动态变化的曲线
思路：
分为两部分：画线和平滑曲线

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

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

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

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

二次贝塞尔

在这里插入图片描述

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);
        }
1
2
3
4
5
6

三次贝塞尔

  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);
        }
1
2
3
4
5
6

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

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

参考
GitHub
bilibili