Question

我在Debian中使用firefox的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";
};

Answer 1

使用mylayer.batchDraw代替mylayer.drawScene。

batchDraw每个刷新周期只重绘一次你的行，而不是尝试重绘。

...而且，不要在像mousemove这样的活动事件处理程序中执行console.log。

在Firefox中慢速绘制kinetic.js

1 个答案: