在 Firefox 中绘制缓慢的 kinetic.js答案

【问题标题】：Slow kinetic.js drawing in Firefox在 Firefox 中绘制缓慢的 kinetic.js
【发布时间】：2014-05-03 03:40:19
【问题描述】：

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

【问题讨论】：

标签： javascript canvas html5-canvas kineticjs

【解决方案1】：

使用mylayer.batchDraw 代替mylayer.drawScene。

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

...而且，不要在诸如 mousemove 之类的活动事件处理程序中执行 console.log。

【讨论】：

谢谢，但还是很慢