Javascript 使用管理单元interact.js调整大小

在这里，我有一个interact.js rect，它可以通过10px乘以10px的快照调整大小。rect位于x=95px，当我向左移动时，它会移动到x=90x。这很好，但是右侧也会向右移动，不应该

这个代码怎么了？rect有句柄，这是问题的根源吗

  .on('resizemove', function(event) {

    const target = event.target.querySelector('rect');

    for (const attr of ['width', 'height']) {
      let v = Number(target.getAttribute(attr));
      v += event.deltaRect[attr];
      target.setAttribute(attr, Math.round(v/10)*10);
    }

    for (const attr of ['top', 'left']) {
      const a = attr == 'left' ? 'x' : 'y';
      let v = Number(target.getAttribute(a));
      v += event.deltaRect[attr];
      target.setAttribute(a, Math.round(v/10)*10);
    }

    findLocations(rect, handles);


 });

---

啊，我看到问题了。发生的情况如下：调整矩形的大小时，您正在舍入大小和位置。这具有以下效果：

• 您有一个矩形，其边从

  x=95

  到

  x=115

  。它的左侧移动了

  -3

  个单位。现在是

  92

  到

  115

• 您可以检查宽度：宽度为

  115-92=23

  单位，因此您可以四舍五入到最接近的十个：

  20

  单位
• 您检查位置：它位于

  92

  ，因此您将其移动到

  90

  这将滑动整个现已调整大小的矩形。

您需要处理

顶部

和

左侧

案例，与

右侧

和

底部

案例不同，因为前两个案例会更新其大小顶部的矩形位置。最重要的是，您只需将更改后的各边绕成一圈：当您向右移动时，您不想将底部绕成一圈

• 对于

  左侧

  或

  顶部

  。。。
  • 将

    x

    或

    y

    移动到新位置，四舍五入
  • 不要旋转

    宽度

    或

    高度

    ，因为这样会移动

    右侧

    或

    底部

• 对于

  右侧

  或

  底部

  。。。
  • 不要对

    x

    或

    y

    执行任何操作，因为将它们四舍五入将使整个矩形移动
  • 好吧，我们仍然可以更改

    x

    或

    y

    ，因为它们将为零，但我们不能对它们进行取整
  • 仅更改

    宽度

    或

    高度

    ，但此时间为四舍五入

有很多情况需要检查，但通过使用函数，不难看出它是如何工作的：

.on（'resizemove'，函数（事件）{
const target=event.target.querySelector（'rect'）；
函数changeVal（属性、更改、舍入）{
让val=Number（target.getAttribute（change））；
val+=event.deltaRect[attr]；
如果（四舍五入）val=数学四舍五入（val/10）*10；
target.setAttribute（change，val）；
}
让圆=假；
如果（event.deltaRect.top！=0）round=true；
changeVal（'顶部'，'y'，圆形）；
圆形=假；
如果（event.deltaRect.left！=0）round=true；
changeVal（'左'，'x'，圆形）；
圆形=假；
如果（event.deltaRect.right！=0）round=true；
changeVal（'宽度'，'宽度'，圆形）；
圆形=假；
如果（event.deltaRect.bottom！=0）round=true；
changeVal（‘高度’、‘高度’、圆形）；
findLocations（矩形、句柄）；
});

缩短此循环并更改为与以前相同的循环样式：

.on（'resizemove'，函数（事件）{
const target=event.target.querySelector（'rect'）；
常量属性=[
{检查：'top'，更改：'y'}，
{检查：'左'，更改：'x'}，
{检查：'右'，更改：'宽'}，
{检查“底部”，更改“高度”}
];
for（属性的常量{check，change}）{
让val=Number（target.getAttribute（change））；
val+=event.deltaRect[check]；
if（event.deltaRect[check]）val=Math.round（val/10）*10；
target.setAttribute（change，val）；
}
findLocations（矩形、句柄）；
});

这使用了，所以它在IE中不起作用

---

调整左边缘的大小时，右边缘似乎仍有一些刺耳的声音，但我认为这是舍入的错误

---

即使没有，我也希望这足以让您开始。

您是说您不希望未与之交互的一侧捕捉到网格？确切地说，如果您不显式移动该一侧，它就不应该移动该矩形是否会移动，或者只是调整大小？在本例中，仅调整大小（在实际情况下，它也会被拖动）是的，正确的移动可能是因为舍入，我认为舍入将不起作用，我试图为@ps0604找到一个解决方案。如果您还没有找到解决方案，我将尝试的最后一件事是在

'resizemove'

事件处理程序中设置一个断点，并观察它调整大小时发生的情况：看看您是否能够捕捉到右边缘移动的原因？