如何在变换后重置矩形的 x、y、宽度、高度

Question

我有一个使用 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、宽度和高度，因此我无法正确重置它们。是否有一些指标指示变换何时“翻转”矩形？或者其他重置方式？

Answer 1

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

Answer 2

为了直观地了解转换期间属性发生了什么，请查看官方文档中的演示 here 并特别注意 width/height、旋转和缩放当您通过先拖动右边缘调整大小时，然后拖动底边缘重复。

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

长话短说 - 目前我想不出一个有用的用例需要尝试重绘矩形而不影响缩放或旋转，我将其称为 'plain' 矩形与使用 Transformer 后得到的 'exotic' 矩形。

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

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

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

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

并使矩形保持相同的位置和旋转。

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

如何在变换后重置矩形的 x、y、宽度、高度

How to reset a Rectangle's x,y,width,height, after transform

konvajs