如何在变换后重置矩形的 x,y,width,height答案

【问题标题】：How to reset a Rectangle's x,y,width,height, after transform如何在变换后重置矩形的 x,y,width,height
【发布时间】：2021-10-12 20:06:09
【问题描述】：

我有一个使用 konvajs 的应用程序，我将矩形设置为可调整大小。我将其设置为在转换矩形后将 scaleX 和 scaleY 设置为 1，这样我就可以使用 x、y、宽度和高度。我使用以下代码执行此操作：

myRectangle.on('transformend',  function() {
    myRectangle.width(Math.round(myRectangle.width() * myRectangle.scaleX()));
    myRectangle.height(Math.round(myRectangle.height() * myRectangle.scaleY()));
    myRectangle.scaleX(1);
    myRectangle.scaleY(1);
});

但是，有时在我调整大小后（通常如果我通过向上或向左拖动来“翻转”矩形），x、y、宽度和高度是奇怪的值。有时宽度或高度是负数，有时 x 和 y 位置似乎不是指矩形的左上角。我希望能够提取有关矩形的信息，因此我希望位置位于矩形的左上角，具有正的宽度和高度值。我不介意在转换矩形后重置这些值，但我不太确定 konvajs 是如何计算 x、y、宽度和高度的，所以我无法正确重置它们。是否有一些指标表明转换何时“翻转”矩形？或者其他方式来重置它？

【问题讨论】：

标签： konvajs

【解决方案1】：

似乎在变压器上将flipEnabled和rotationEnabled设置为false可以防止发生旋转。

【讨论】：

【解决方案2】：

要直观地了解转换期间 attrs 发生的情况，请查看官方文档 here 中的演示，并在通过拖动调整大小时特别注意宽度/高度、旋转和缩放首先是右边缘，然后在下边缘重复。

这将有助于理解拖动 Transformer 手柄会改变矩形的比例 - 而不是宽度或高度。然而这并不是故事的结局——如果你在水平轴上“翻转”形状，那么你会看到旋转从零变为 180 度，并且 scaleX 保持为正。但是如果你在垂直轴上拖动并翻转形状，则没有旋转效果，并且 scaleY 切换为负值。

长话短说 - 目前我想不出一个有用的用例，它需要尝试在没有缩放或旋转影响的情况下重绘矩形，我将其称为“普通”矩形与“异国情调”使用 Transformer 后得到的矩形。

如果用例是通过您自己的数学进行命中检测，那么您在矩形 x 和 y、宽度和高度、旋转以及 scaleX 和 scaleY 中拥有您需要知道的一切。即使您可以获得普通矩形的属性，您仍然可以将相同的参数插入到您的数学中，因此重新计算普通矩形是浪费精力。

如果用例是矩形属性的存储（序列化），那么再次与上面的相同点 - 您需要存储位置、旋转、大小和比例，以便以后能够重绘它。

将比例重置为 1 的合法用例是您的应用的业务案例需要它。但这仅涵盖重置：

rect.seAttrs({
    width: rect.width() * scaleX,
    height: rect.height() * scaleY,
    scaleX: 1,
    scaleY: 1
  }

并将矩形留在相同的位置和旋转位置。

结论：在某些情况下，尝试从外来矩形重新计算普通矩形可能不值得。

【讨论】：