EASELjs drag event, what's wrong here

问题:

for the start guys thanks for an interesting framework, great job, I'll hope that documentation in the future will be better, in my opinion it lacks real working examples for each object method.

So here is my question, I have a dilemma with with this framework, can some one put a finger on what I did wrong here. I build it from this example. Here is the working code on jsfiddle . Last version should move the rectangle on the canvas.

P.S. It's the same without Container.

var elementOptions = {
    stroke: 3,
    left: 100,
    top: 50,
    width: 100,
    height: 200,
    transformMatrix: [1, 0, 0, 1, 0, 0]
};

function rectElementCanvasObject(options) {
    var shape,
    rect = new createjs.Graphics()
        .setStrokeStyle(options.stroke)
        .beginStroke('rgba(255, 0, 0, 0.5)')
        .beginFill('rgba(255, 0, 0, 0.5)')
        .rect(
    options.left,
    options.top,
    options.width,
    options.height);
    shape = new createjs.Shape(rect);
    if (options.transformMatrix !== undefined) {
        shape.transformMatrix = new createjs.Matrix2D(
        options.transformMatrix[0],
        options.transformMatrix[1],
        options.transformMatrix[2],
        options.transformMatrix[3],
        options.transformMatrix[4],
        options.transformMatrix[5]);
    }
    return shape;
}

$(document).ready(function () {
    var canvasId, canvasElement, rectangle, dragger;
    canvasId = 'demoCanvas';
    canvasElement = new createjs.Stage(canvasId);
    canvasElement.mouseMoveOutside = true;
    rectangle = rectElementCanvasObject(elementOptions);

    dragger = new createjs.Container();
    dragger.x = dragger.y = 100;
    dragger.addChild(rectangle);

    dragger.on("pressmove", function (evt) {
        evt.target.x = evt.stageX;
        evt.target.y = evt.stageY;
        canvasElement.update();
    });

    dragger.on("pressup", function (evt) {
        console.log("up");
    });

    canvasElement.addChild(dragger);

    canvasElement.update();
    createjs.Ticker.addEventListener("tick", canvasElement);
});

回答1:

Here is a quick update to your fiddle: https://jsfiddle.net/lannymcnie/n55jk201/7/

dragger.on("pressmove", function (evt) {
    evt.currentTarget.x = evt.stageX;
    evt.currentTarget.y = evt.stageY;
    canvasElement.update();
});

The rectangle is draggable now (used evt.currentTarget instead of evt.target), which made it work, and I added a circle at the registration point so you can see how it is positioned when dragging.

Store off the initial x/y offset of the mouse, and apply it to the drag coordinates to make it snap to where your mouse presses, instead of the dragger registration point.

Not sure if this is what you were trying to accomplish or not.

--

Thanks for your feedback on the documentation. We (CreateJS devs + gskinner) are definitely open to adding more examples -- I am not sure how to surface more complex stuff like this though. Definitely open to more specific examples on what you are looking for.