Performance 在KineticJS中绘制二次曲线的更好方法？

我正在写一个应用程序，在其中我必须画很多可拖动的二次曲线

我使用的是Kinetic.Shape（KineticJS 4.4.3）

由于性能不是很好，我尝试分析和优化代码，发现drawFunc函数执行了两次。 请看附带的演示代码

var stage = new Kinetic.Stage({
    container: 'kinetic',
    width: 400,
    height: 300
});

var curveLayer = new Kinetic.Layer();

var line = new Kinetic.Shape({
    drawFunc: function (canvas) {
        console.log("drawFunc executed");
        var context = canvas.getContext();
        context.beginPath();
        context.moveTo(10, 10);
        context.quadraticCurveTo(95, 100, 200, 10);
        canvas.stroke(this);
    },
    strokeWidth: 10
});

curveLayer.add(line);
stage.add(curveLayer);

如果运行该脚本，控制台中将有2次“drawFunc executed”

我不明白为什么，我问自己是否有更好的方法来做这件事

小提琴的链接：

指向我的项目的链接：

---

KineticJS总是创建一个不可见的缓冲画布，用于拖动等

您将看到drawFunc对该缓冲区画布执行一次，对可见画布执行一次

没有办法消除那个2X图形

查看您的项目链接，我猜用户通过直观地拖动插头来创建到各种接收器的连接。没有办法提高效率

但是，一旦任何连接完成，您可以通过将连接器缓存到一个映像来大大加快重新绘制该连接器的速度：connector1.toImage（…）

---

重新绘制图像缓存的“连接器”比重新绘制四边形Bezier带来的性能损失要小得多。

非常感谢，这就把事情弄清楚了。我将尝试图像缓存方法。如果我理解正确，我必须在用户与图像交互时将图像转换回形状对象（悬停，单击..）？是否有最佳实践/教程可用？绘制贝塞尔曲线的成本很高，因为每次重新绘制时必须计算曲线上的每个点。您的15根以上电缆乘以每条电缆上的100+计算点=性能惩罚！我会将任何已经就位的贝塞尔“电缆”转换成一个图像，但每个“插头”圆仍然是一个可拖动的动力学对象。如果插头开始拖动，则将电缆设为“带电”可拖动贝塞尔。这样你就可以重画15+个固定的有线电视图像（便宜的重画），而不是重画那么多“实时”的贝塞尔（昂贵的重画）。我会试试这个，谢谢。插头和电缆已经在不同的层上分开，因此这可能会有所帮助。