0

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

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

我不明白为什么，我问自己是否有更好的方法来做到这一点。

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

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

4

1 回答 1

0

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

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

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

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

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

与重绘四贝塞尔曲线相比，重绘图像缓存的“连接器”对性能的影响要小得多。

于 2013-05-07T21:56:17.330 回答