EaselJS 拖拽动作不流畅答案

【问题标题】：EaselJS dragging movement is not smoothEaselJS 拖拽动作不流畅
【发布时间】：2012-11-20 13:02:37
【问题描述】：

我刚开始尝试 EaselJS，我的第一次尝试是按照https://github.com/CreateJS/EaselJS/blob/master/examples/DragAndDrop.html 的拖放示例加载 jpeg 图像

问题：当我试图拖动一个对象时，拖动的动作很不稳定，而且不流畅！这是为什么呢？

我试过stage.enableMouseOver(50);，但还是一样。它不如使用 KineticJS 的this example 流畅。

【问题讨论】：

和现场演示on their site一样吗？我改编了那个，从来没有出现过性能问题，即使在 Android 上也是如此。但是如果没有您使用的代码，我们无法回答这个问题。
他们网站上的现场演示对我来说也不是很流畅......我基本上使用了他们 github repo 中的相同代码并运行了我自己的 Web 服务器。我有一台相当不错的电脑（4ghz 四核、24GB 内存、ATI 专用显卡、SSD），我看到 Chrome 和 IE10 的不稳定。
当然不是马力问题。在中端手机上应该没问题。听起来您正在运行 Windows。我从来没有在那个平台上测试过。也许尝试提交错误报告或他们的论坛。

标签： jquery html canvas html5-canvas easeljs

【解决方案1】：

我通常在移动和桌面网络应用程序上使用以下公式，而且还不错。仅当显示对象包含许多其他文本和显示对象时，我才会遇到一些性能问题。

这是一个启用拖放到已加载位图的示例。

var canvas;
var stage;  

init = function () {

    canvas = document.getElementById("canvas");
    stage = new createjs.Stage(canvas);
    displayPicture ("YOUR PATH");
}

displayPicture = function (imgPath) {

    var image = new Image();

    image.onload = function () {

        // Create a Bitmap from the loaded image
        var img = new createjs.Bitmap(event.target)

        // scale it
        img.scaleX = img.scaleY = 0.5;

        /// Add to display list
        stage.addChild(img);

        //Enable Drag'n'Drop
        enableDrag(img);

        // Render Stage
        stage.update();

    }

    // Load the image
    image.src = imgPath;
}

enableDrag = function (item) {

    // OnPress event handler
    item.onPress = function(evt) {

        var offset = {  x:item.x-evt.stageX,
                        y:item.y-evt.stageY};

        // Bring to front
        stage.addChild(item);

        // Mouse Move event handler
        evt.onMouseMove = function(ev) {

            item.x = ev.stageX+offset.x;
            item.y = ev.stageY+offset.y;
            stage.update();
        }
    }
}

init()

【讨论】：