jquery - EaselJS 拖拽动作不流畅

Question

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

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

我试过stage.enableMouseOver(50);了，但还是一样。它不像这个使用 KineticJS 的例子那么流畅。

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