Question

我刚开始尝试使用EaselJS，我的第一次尝试是在https://github.com/CreateJS/EaselJS/blob/master/examples/DragAndDrop.html

拖放示例之后加载jpeg图像

问题：当我试图拖动一个物体时，拖动动作非常不稳定且不平滑！这是为什么？

我试过了stage.enableMouseOver(50);，但它仍然是一样的。它不如this example使用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()

EaselJS拖动动作并不顺畅

1 个答案: