Skip to content
教程拖放简单拖拽边界

拖拽边界

为了限制使用 Konva 拖拽形状时的移动范围,我们可以利用 dragmove 事件并在其中覆盖拖拽位置。

该事件可用于以多种方式约束拖放移动,例如限制水平、垂直、对角线或径向移动,甚至可以将节点限定在矩形、圆形或任意路径范围内。

js
shape.on("dragmove", () => {
  // 锁定形状在 x 轴上的位置
  // y 轴位置保持不变
  shape.x(0);
});

提示:您可以使用 shape.absolutePosition() 方法来获取/设置节点的绝对位置,而非相对坐标 x 和 y。

操作说明:拖拽水平文本并观察其仅能水平移动。拖拽垂直文本并观察其仅能垂直移动。