javascript - 从 Draggable 获取表面

Question

请大家帮帮我。我有这个代码：

var image = new ImageSurface({
    size: [300, 300],
    properties: {
        border: '4px solid white'
    }
});

image.setContent('/img/' + _.random(1,7) + '.jpg');

var draggable = new Draggable({scale: 1});
image.pipe(draggable);

draggable.on('end', function(e) {
    // SURFACE????
});

var stateModifier = new StateModifier();

node.add(stateModifier).add(draggable).add(image);

stateModifier.setTransform(
    Transform.translate(100, 10, 0),
    { duration : 1000, curve: Easing.outElastic }
);

如何从可拖动事件中获取 Surface 对象？事件的参数只是位置。

Answer 1

首先，我想知道为什么您需要从事件中获取表面信息。如果每个表面有一个可拖动的，那么您可以通过简单的数据绑定来做一些事情。

例如..

var draggable = new Draggable({scale: 1});

draggable.image = image;

draggable.on('end', function(e) {
    var image = this.image;
});

如果您确实需要从事件中获取表面，则必须编辑发出事件的代码。

仅针对结束事件的情况..

从 Draggable.js 的第 129 行开始

function _handleEnd() {
    if (!this._active) return;
    this.eventOutput.emit('end', {position : this.getPosition()});
}

可以改成..

function _handleEnd() {
    if (!this._active) return;
    this.eventOutput.emit('end', {position : this.getPosition(), originalEvent:event });
}

现在你可以做..

var draggable = new Draggable({scale: 1});

draggable.on('end', function(e) {
    var image = e.originalEvent.origin;
});

祝你好运！