当一个组（带偏移量）被缩放时，如何计算它的绝对位置？

Question

例如，我想画一个带偏移量的矩形。

var redRect = new Konva.Rect({
    x: 600,
    y: 60,
    width: 22,
    height: 40,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 1,
    offset: {
        x: -20,
        y: -10
    }
});

当我用代码缩放 redRect 时：

redRect.scaleX(50/22);
redRect.scaleY(100/40);

我希望redRect的绝对位置是一样的，但是不一样。比例尺如何影响偏移量或位置？

Answer 1

如果您需要矩形的top-left角的绝对位置，您可以这样做（以防形状未旋转）：

// calculate the position of the origin of the shape
const absPos = redRect.getAbsolutePosition();

// calculate the position of top-left corner taking offset into account
const topLeftPos = {
  x: absPos.x - shape.offsetX() * shape.scaleX(),
  y: absPos.y - shape.offsetY() * shape.scaleY()
}