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

Question

我正在编写一个应用程序，我必须在其中绘制大量可拖动的二次曲线。

我为此使用 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”。

我不明白为什么，我问自己是否有更好的方法。

小提琴的链接： http://jsfiddle.net/solitud/ZpU4J/9/

我的项目的链接： http://modulargrid.net/e/patches/view/92

Answer 1

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

您看到 drawFunc 为该缓冲区画布执行一次，为您的可见画布执行一次。

没有办法消除那个 2X 绘图。

查看您的项目链接，我猜测用户通过视觉拖动插头来创建与各种受体的连接。没有办法提高效率。

但是，一旦任何连接完成，您可以通过将连接器缓存到图像来大大加快重绘连接器的速度：connector1.toImage( ... );

与重绘四贝塞尔曲线相比，重绘图像缓存的“连接器”会产生更少的性能损失。