0

如果使用dragBoundFunc，如何（如果有的话）使用过渡到新点？

假设我有一个带有这样的 dragBoundFunc 的矩形：

rect = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 100,
        height: 50,
        id: 'yellow',
        name: 'rect',
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true,
        dragBoundFunc : function(pos) {
        return {
            y : Math.round(pos.y/60)*60,
            x : this.getX(),
        }
    }
    });

拖动此矩形时如何平滑过渡？

编辑：到目前为止，我已经为我所做的事情创造了一个小提琴。如您所见，如果您将一个矩形拖到另一个矩形上，它们会执行平滑过渡，向用户反馈正在发生的事情。我想要的是在拖动矩形时也能获得平滑过渡的反馈，这意味着移动本身是过渡而不是突然跳转到新位置。

4

2 回答 2

0

到目前为止非常好的 jsfiddle，结构也很好。因此，您要做的是将拖动绑定功能逻辑移动到您拥有的 dragend 事件：

dragBoundFunc: function (pos) {
    return {
        y: Math.round(pos.y / 60) * 60, //<---- move the grid logic to a transition event to be fired on dragend
        x: this.getX(),
    }
}

您将网格垂直移动定义为限制为每 60 个像素。您应该让dragBoundFunc 只允许垂直移动，然后在dragend 上让矩形过渡到网格。

于 2013-02-25T00:55:06.797 回答
0

我认为您想要的是缓慢拖动对象，但我想知道这会有什么用。

拖动和过渡使用不同的概念。

拖动是同步的，您希望它在您的干预下立即发生。

过渡是异步的，您不希望它立即发生，但系统会在一段时间后/一段时间内为您实现。例如，如果您将转换设置为一秒钟，它会在没有您干预的情况下发生一秒钟的时间。你可以认为任何自动的都是异步的。

如果你想拖动一些动画效果，我建议不要使用拖动功能，而是使用鼠标事件的几种组合；mouseclick、mousemove 和 mouseup。

不过，我仍然怀疑它的用处。如果你只是好奇，你试试。

于 2013-02-24T17:35:04.083 回答