Question

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

在我的台式机上它完全没问题，但在我的手机上却很慢而且生涩。并不是性能会随着时间的推移而降低，而是立即显现出来。

我使用画架和扩展形状。在鼠标移动时，它记录点并在勾选时绘制它们。舞台的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

Answer 1

回答我自己的问题。

问题是我没有使用图形的endStroke方法，所有的线条导致绘图后面的一个滴答，以及逻辑错误，我只会绘制线条，如果有一个或多个点，但实际上它应该是2分或更多。

第二部分导致最滞后。有趣的是，由于for循环条件，因为数组索引永远不会超出界限，所以没有错误，所以我认为只有一个不可能的条件在Android浏览器的Chrome上真的很慢，而不会崩溃。

优化移动设备的画架线条画

1 个答案: