EASELjs拖动事件，这里出了什么问题 [英] 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.

这是我的问题，我对此框架感到困惑，有人可以指出我在这里做错了什么。我是通过示例构建的。这是 jsfiddle 上的工作代码。上一个版本应在画布上移动矩形。

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。

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);
});

推荐答案

以下是对您的提琴的快速更新：
https://jsfiddle.net/lannymcnie/n55jk201/7/

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();
});

现在可以拖动矩形（使用 evt.currentTarget 而不是 evt.target ），这使它起作用了，我在注册点添加了一个圆圈，这样您就可以看到拖动时它的位置。

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.

存储鼠标的初始x / y偏移量，并将其应用于拖动坐标以使其捕捉到鼠标所按的位置，而不是拖动器的注册点。

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.

-

感谢您对本文档的反馈。我们（CreateJS开发人员+ gskinner）绝对愿意添加更多示例-尽管我不确定如何浮出更多类似的内容。绝对开放您要寻找的更具体的示例。

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.

这篇关于EASELjs拖动事件，这里出了什么问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！