EaselJS dragging movement is not smooth

Question

I just started trying out EaselJS and my first attempt is at loading a jpeg image following the drag and drop example at https://github.com/CreateJS/EaselJS/blob/master/examples/DragAndDrop.html

Problem: When I attempted to drag an object, the dragging movement is very choppy and not smooth! Why is this?

I tried stage.enableMouseOver(50); but its still the same. Its not as smooth as this example using KineticJS.

Is that the same as the live demo [on their site](http://www.createjs.com/#!/EaselJS/demos/dragdrop)? I adapted that one and never had performance issues, even on Android. But there's no way for us to answer this question without the code you're using. — Potatoswatter, Dec 03 '12 at 16:49
The live demo on their site is not smooth for me too... I basically used the same code from their github repo and ran off my own web server. I have a pretty decent computer (4ghz quadcore, 24GB memory, ATI dedicated graphics, SSD) and i see the choppiness in Chrome and IE10. — Nyxynyx, Dec 03 '12 at 18:52
Certainly not a horsepower issue. It should be fine on a midrange phone. It sounds like you're running Windows. I haven't ever tested on that platform. Maybe try filing a bug report, or their forum. — Potatoswatter, Dec 03 '12 at 19:24

score 0 · Answer 1 · answered Dec 26 '13 at 17:42

I usually use the following formula on mobile and desktop web apps and it's not so bad. I got some performance issues only if the display object contains a lot of other texts and display objects .

Here an example to enable the drag'n'drop to a loaded bitmap.

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 dragging movement is not smooth

1 Answers1