如何按照指定路径绘制一条曲线

图中，

AB，BC，CD是一阶贝塞尔，e=0.36代表， AF=0.36AB，BG=0.36BC，CH=0.36CD

I点的运动轨迹是AC的二阶贝塞尔，同样可以根据A,B,C三点，加上二阶贝塞尔的公式计算出e=0.36时，I的坐标

J点同理

不改变曲线的点，还有一个思路实现想要的效果

0-t的mesh透明，t-1的mesh的显示

或者

line=[pos ...]
pos=f(t), t∈[current, 1] // 重新构建时间段内的mesh，这个思路是以t为输入参数求解

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    graphics : cc.Graphics = null
    start () {
        this.graphics = this.node.getComponent(cc.Graphics)

        this.test()
        this.node.scale = 3
    }

    
    test(){
        let A = cc.v2(0, 0)
        let B = cc.v2(10, 50)
        let C = cc.v2(100, 0)
        let D = cc.v2(90, 90)

        this.graphics.strokeColor = cc.Color.RED
        this.graphics.moveTo(A.x, A.y)
        this.graphics.bezierCurveTo(B.x, B.y, C.x, C.y, D.x, D.y)
        this.graphics.stroke()


        this.graphics.strokeColor = cc.Color.BLUE
        this.graphics.circle(A.x, A.y, 1)
        this.graphics.stroke()

        this.graphics.strokeColor = cc.Color.YELLOW
        this.graphics.circle(B.x, B.y, 1)
        this.graphics.stroke()

        this.graphics.strokeColor = cc.Color.GREEN
        this.graphics.circle(C.x, C.y, 1)
        this.graphics.stroke()

        this.graphics.strokeColor = cc.Color.GRAY
        this.graphics.circle(D.x, D.y, 1)
        this.graphics.stroke()


        let t = 0.5

        let F = this.linear(A, B, t)
        let G = this.linear(B, C, t)
        let H = this.linear(C, D, t)
        let J = this.linear(G, H, t)
        let I = this.linear(F, G, t)
        let E = this.linear(I, J, t)

        this.graphics.strokeColor = cc.Color.ORANGE
        this.graphics.moveTo(A.x, A.y)
        this.graphics.bezierCurveTo(F.x, F.y, I.x, I.y, E.x, E.y)
        this.graphics.stroke()
    }

    linear(p1, p2, t){
        return cc.v2(p1.x + (p2.x - p1.x) * t, p1.y + (p2.y - p1.y) * t)
    }
}

代码大概是这样， 图中橘色部分重新绘制就行

image1128×968 57 KB

1. 在PS中根据引线图形绘制路径数据，得到SVG路径数据
2. 给引线父节点添加Mask组件，用于裁剪引线
3. 自定义遮罩图形，并设置为反向遮罩
4. 用Tween或GSAP从引线末端沿着SVG路径数据绘制圆形进行遮罩涂抹，达到引线慢慢燃尽的效果
   
   

   image1356×404 59.4 KB
   
   关键代码：
   
   

   image1118×1334 111 KB

具体参考文章：🧨大过年的，给熊孩子整一本妙趣横生的游戏书吧 - 掘金

这个可以不错

是挺牛逼的，但是我还想贴图，而且如果路径非常长，1万个点，这个计算量有点大，最后我还是采用了mesh切割的方式，就像切香肠一样

遮罩的思路有点麻烦，脑壳痛

用mesh切割那如果密度做的不大会不会很生硬

可以顺带着修改开头的mesh就行啦，效果应该会很丝滑

正常来说， 一条线是有N条贝塞尔曲线组成，
如果要实现均匀燃烧的话， 需要事先算出整条曲线的长度，也就是各条贝塞尔曲线的长度之和，以及各自的份量，燃烧一定时间t，根据t的值获取当前燃烧的贝塞尔曲线段x，然后在x里面进行贝塞尔曲线的拆分
按照这个方案，跟N多大没有很大的关系

空间分割的原理么？

关键是想要贴图

最后采用了操作顶点的方式实现了想要的效果，很丝滑

能分享个demo学习学习吗

大佬，我想白嫖个demo，不知道有没有机会

大佬，出教程了记得踢我一下

mark学习一下

下次一定！