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

Question

For example, I want to draw a rect with offset.

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

When I scaled the redRect with the code:

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

I want the absolute position of the redRect is the same, but it is not.How the scale affects the offset or the position?

Answer 1

If you need the absolute position of top-left corner of the rectangle you can do this (in case if the shape is not rotated):

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