当一个具有偏移量的组被缩放时，如何计算其绝对位置？

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()
}