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 execution”。

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

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

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

Answer 1

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

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

无法消除2X绘图。

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

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

重新绘制图像缓存的“连接器”比重绘四个贝塞尔曲线创建更少的性能损失。

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

1 个答案: