优化移动设备的easyljs线条图

Question

I'm trying to make a simple application where the user can draw lines by click-dragging the mouse or through gestures on their touch device screen.

It's perfectly fine on my desktop machine, but on my phone its very slow and jerky. It's not that performance degrades over time, it's immediately noticable.

I'm using easeljs and I extended shape. On mouse movements it records the points and on tick it draws them. The stage's autoClear is set to false and the graphics object clears before it draws so it doesn't redraw anything from the previous tick.

(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));

Here's the code for setting up the stage:

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

Here's a fiddle for everything. Other information: I'm using jquery-1.8.3 and a RAF polyfill, these are my phone specs . I also got somebody to try with a much better Samsung phone with the same results.

Although admittedly my phone is on the low end of the spectrum, its not a dinosaur of a phone. It is android 4.0+ and what I'm doing really isn't that complicated as far as I can tell. Am I doing anything wrong and/or is there anything I can do to improve this? I wonder if maybe its a problem with the touch events and not the drawing speed as well.

EDIT: the other phone with laggy drawing was a Samsung S3

Answer 1

Answering my own question.

The problem was a combination of me not using the graphic's endStroke method after all the lines causing the drawing to be one tick behind, and a logic error where I would only draw lines if there was one or more points, but really it was supposed to be 2 or more points.

The second part was causing the most lag. Interestingly there was no error since the array index is never out of bounds because of the for loop condition, so I guess just having an impossible for condition was really slow on the Chrome for android browsers, without crashing.