javascript - Kinetic.js 在 Firefox 中绘制速度缓慢

Question

我在 Debian 和 Firefox 中使用 Kinetic.js (5.0.1) 时遇到一些问题(在 Windows 中运行良好，在 chromium 中运行良好)。我正在尝试做一个绘图板，但速度很慢。有什么解决方案可以提高性能吗？

谢谢。

PD:这是我的代码。

var initializeDrawings = function() {
    var myExistingLine;
    var currentLine = [];
    var mouseDrag = false;
    var stage;
    var background;
    var backgroundlayer = new Kinetic.Layer();
    var mylayer = new Kinetic.Layer();
    var lineColor = 'black';
    var lineWeight = 5;
    var allmoves = [];
    // Create an invisible shape that will act as an event listener
    stage = new Kinetic.Stage({
        container: 'container',
        width: 600,
        height: 600
    });
    var imageObj = new Image();
    imageObj.onload = function() {
        background = new Kinetic.Image({
            width: stage.getWidth(),
            height: stage.getHeight(),
            image: imageObj
        });
        // Attach handlers
        background.on('mousedown touchstart', function(e) {
            var position = getPosition("container", e);
            mouseDrag = true;
            myExistingLine = new Kinetic.Line({stroke: lineColor, strokeWidth: lineWeight});
            mylayer.add(myExistingLine);
            currentLine.push(position.x);
            currentLine.push(position.y);
        });
        background.on('mousemove touchmove', function(e) {
            if(mouseDrag === true) {
                var position = getPosition("container", e);
                currentLine.push(position.x);
                currentLine.push(position.y);
                myExistingLine.setPoints(currentLine);
                mylayer.batchDraw();
            }
        });
        background.on('mouseup touchstop', function(e) {
            allmoves.push ({ color: lineColor, grosor: lineWeight, points: currentLine });
            mouseDrag = false;
            currentLine = [];
        });
        stage.add(backgroundlayer.add(background));
        stage.add(mylayer);
    }
    imageObj.src = "summoners-map.png";
};

Answer 1

使用mylayer.batchDraw而不是mylayer.drawScene。

batchDraw 每个刷新周期仅重绘一次线条，而不是尝试多次重绘。

...并且，不要在事件事件处理程序(如 mousemove)中执行 console.log。