javascript - 在Firefox中缓慢的dynamic.js绘图

我在使用Firefox的Debian中使用Kinetic.js（5.0.1）遇到了一些问题（在Windows中效果很好，在Chrome中效果很好）。我正在尝试制作绘图板，但是速度很慢。有什么解决方案可以提高性能吗？

谢谢。

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";
};

最佳答案

使用mylayer.batchDraw代替mylayer.drawScene。

batchDraw每个刷新周期仅重画一次行，而不是尝试多次重画。

...并且，不要在活动事件处理程序（例如mousemove）中进行console.log。

关于javascript - 在Firefox中缓慢的dynamic.js绘图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22632159/