Question

首先感谢一个有趣的框架，很棒的工作，我希望将来的文档会更好，我认为它缺少每个对象方法的实际工作示例。

所以这是我的问题，我对这个框架感到困惑，有人可以指责我在这里做错了什么。我是从example构建的。以下是jsfiddle 上的工作代码。最后一个版本应该在画布上移动矩形。

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

Answer 1

以下是您的小提琴的快速更新： 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），这使得它工作，我在注册点添加了一个圆圈，这样你就可以看到它在拖动时的位置。

存储鼠标的初始x / y偏移量，并将其应用于拖动坐标，使其与鼠标按下的位置对齐，而不是拖动器注册点。

不确定这是否是你想要完成的事情。

-

感谢您对文档的反馈。我们（CreateJS devs + gskinner）肯定愿意添加更多示例 - 我不知道如何展示更复杂的东西。绝对愿意接受有关您正在寻找的更具体的例子。

EASELjs拖动事件，这里有什么问题

1 个答案: