transform with CGAffineTransform scale, or rotation also moves the position of the node

[RajaSeshadri]

Hi. I am trying the package with a simple use very similar to your Pikachu example. Instead of translation, I am using scale. Basically, when the part of the image is tapped, it should scale up slightly. The scaling works, but the position also moves - the larger the scaling, the larger the movement. (making it smaller moves it in the opposite direction). I suspect it has to do with the svg having relative or absolute coordinates, but it is not clear what I need to do to fix this.

[ystrot]

Hi @RajaSeshadri,

If you want to have an anchor point for your shape during scaling (usually a center) you need to combine following transformations:

1. Move your shape to the center of coordinates, so that anchor point will be in (0,0) coordinates.
2. Scale.
3. Move your shape back.

So the code will look something like this:

shape.transform = CGAffineTransform.identity
        .translatedBy(x: anchorPoint.x, y: anchorPoint.y)
        .scaledBy(x: scale, y: scale)
        .translatedBy(x: -anchorPoint.x, y: -anchorPoint.y)

[RajaSeshadri]

Thanks - I understand your suggestion. However, how will I know the anchorPoint ? My situation is similar to the example you have given where you affect the opacity of the node 'part' which is obtained by getting the Node for a particular node name. How to get the anchorPoint for this node, so that I can do the adjustment as suggested?