EASELjs drag event, что здесь не так

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), безусловно, открыты для добавления дополнительных примеров - я не уверен, как нарисовать более сложные вещи, подобные этому. Определенно открыты более конкретные примеры того, что вы ищете.