为移动设备优化easeljs线条绘制答案

【问题标题】：Optimizing easeljs line drawing for mobile为移动设备优化easeljs线条绘制
【发布时间】：2014-03-07 18:34:17
【问题描述】：

我正在尝试制作一个简单的应用程序，用户可以通过单击拖动鼠标或通过触摸设备屏幕上的手势来绘制线条。

在我的台式机上非常好，但在我的手机上却非常缓慢和生涩。并不是说性能会随着时间的推移而下降，而是会立即引起注意。

我正在使用画架，我扩展了形状。在鼠标移动时，它会记录点并在滴答时绘制它们。舞台的 autoClear 设置为 false，并且图形对象在绘制之前会被清除，因此它不会重新绘制上一个刻度的任何内容。

(function (window) {
    function LineDrawer() {
        this.initialize();
    }
    //Inheritance from Container
    LineDrawer.prototype = new createjs.Shape();
    LineDrawer.prototype.Shape_initialize = LineDrawer.prototype.initialize;
    LineDrawer.prototype.Shape_tick = LineDrawer.prototype._tick;

    LineDrawer.prototype.initialize = function () {
        //call to initialize() method from parent class 
        this.Shape_initialize();

        this.points = [];
        this.mouseMoveEventListener = $.proxy(this.onMouseMove, this);
    }
    LineDrawer.prototype._tick = function (e) {
        //call to _tick method from parent class 
        this.Shape_tick();

        var points = this.points;
        if (points.length > 0) {
            var graphics = this.graphics.clear()
                                .setStrokeStyle(3, 'round', 'round')
                                .beginStroke("#000000")
                                .moveTo(points[0].x, points[0].y)

            var pt;                
            for (var i = 1; i < points.length; i = i + 1) {
                pt = points[i];
                graphics.lineTo(pt.x, pt.y);
            }

            points.length = 0;
            if (typeof pt !== 'undefined') {
                points.push(new createjs.Point(pt.x, pt.y));
            }
        }
    }

    LineDrawer.prototype.onMouseDown = function (e) {
        this.points.push(new createjs.Point(e.stageX, e.stageY));
        this.parent.addEventListener("stagemousemove", this.mouseMoveEventListener);
    }

    LineDrawer.prototype.onMouseMove = function (e) {
        this.points.push(new createjs.Point(e.stageX, e.stageY));
    }

    LineDrawer.prototype.onMouseUp = function (e) {
        this.points.push(new createjs.Point(e.stageX, e.stageY));
        this.parent.removeEventListener("stagemousemove", this.mouseMoveEventListener);
    }

    window.LineDrawer = LineDrawer;
}(window));

这是设置舞台的代码：

var stage,
    lineDrawer;

$(document).ready(function () {
    lineDrawer = new LineDrawer();

    var $canvas = $('#canvasMain');

    stage = new createjs.Stage($canvas[0]);
    createjs.Touch.enable(stage);
    stage.addChild(lineDrawer);
    stage.autoClear = false;

    stage.addEventListener("stagemousedown", $.proxy(lineDrawer.onMouseDown, lineDrawer));
    stage.addEventListener("stagemouseup", $.proxy(lineDrawer.onMouseUp, lineDrawer));

    createjs.Ticker.timingMode = createjs.Ticker.RAF;
    createjs.Ticker.addEventListener("tick", stage);
})

这里有一个fiddle 用于所有内容。其他信息：我正在使用 jquery-1.8.3 和 RAF polyfill，这些是 my phone specs。我还请人尝试使用更好的三星手机，结果相同。

虽然不可否认，我的手机属于低端手机，但它不是手机的恐龙。它是 android 4.0+，据我所知，我正在做的事情并没有那么复杂。我做错了什么和/或有什么可以改善的吗？我想知道是否可能是触摸事件的问题，而不是绘图速度的问题。

编辑：另一部绘图滞后的手机是三星 S3

【问题讨论】：

标签： javascript performance mobile easeljs createjs

【解决方案1】：

回答我自己的问题。

问题是我在所有线条之后没有使用图形的 endStroke 方法导致绘图落后一个刻度，以及一个逻辑错误，我只会在有一个或多个点时绘制线条，但确实如此应该是 2 分或更多分。

第二部分造成了最大的延迟。有趣的是，没有错误，因为由于 for 循环条件，数组索引永远不会越界，所以我猜在 Chrome for android 浏览器上只有一个不可能的条件真的很慢，没有崩溃。

【讨论】：