Question

如果使用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(),
        }
    }
    });

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

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

Answer 1

我认为你想要的是慢慢地拖动一个物体，但我想知道它会如何有用。

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

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

转换是异步的，你希望它不会马上发生，但是系统会在一段时间之后让你发生。例如，如果您将转换设置为一秒钟，则会在没有您干预的情况下进行一秒钟的转换。你可以想到任何自动都是异步的。

如果你想用一些动画效果拖动，我建议不要使用拖动功能，而是要使用鼠标事件的几种组合;鼠标点击，鼠标移动和鼠标。

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

Answer 2

到目前为止非常好的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上的网格。

KineticJS dragBoundFunc和过渡

2 个答案: