typescriptvue.jskonvajs

Konva 9.3.8: Mirroring an image on X axis, then associating a transformer put the rotation anchor down, and not top

I am working with konva for quite some weeks now.

I do have an issue while trying to mirror an image. Setting scaleX is working as expected, and it is mirrored on the vertical axis.

Moreover, I do have an issue (either a bug or understanding) with a transformer that I want to attack to the node. I create it after the image, meaning the flipping is already in place. But the rotation anchor is set down of the image, and not top of the image as usual.

Is there a workaround to this?

Here are examples of what I do in my code concerning the transformer:

const transformer = new Konva.Transformer({
    nodes: [image],
    flipEnabled: false,
    rotateEnabled: true,
    enabledAnchors: ["top-left", "top-right", "bottom-left", "bottom-right", "top-center", "middle-left", "middle-right", "bottom-center"],
});
Solution

  • This is a side effect of negative scaling and transform matrix decomposition. The workaround this use of this https://konvajs.org/api/Konva.Transformer.html#useSingleNodeRotation

    // set flag to false
transformer.useSingleNodeRotation(false);
// attach a shape
transformer.nodes([shape]);
transformer.rotation(45);
transformer.update();