https://kotlinlang.org logo
#compose-desktop
Title
# compose-desktop
m

Matt

03/07/2024, 9:32 PM
Hi, I am working on a sort of "infinite canvas" system, I have managed to do dragging and zooming pretty well, I am not trying to figure how to add elements based on where you click on the canvas and I have managed to make it work if the scale is the default one, however when you zoom in or out just a little the entire position goes crazy. I was wondering how to get a relative position of where it was clicked based on the scale. I tried multiplying the offsets by the scale, I tried to divide it, but nothing really changed. Here is the snippet of my code that makes what is in the video possible https://pastebin.com/cnXQRAig
m

mohamed rejeb

03/08/2024, 6:17 AM
First, you need to divide by scale before adding a new rectangle.
Copy code
// Right click to add a rectangle
rectangles.add((clickLocation - canvasOffset) / scale)
Also you need to set transform origin to zero, it's set to center by default, which makes some calculations to be wrong.
Copy code
.graphicsLayer(
    transformOrigin = TransformOrigin(0f, 0f),
    scaleX = scale,
    scaleY = scale,
    translationX = canvasOffset.x,
    translationY = canvasOffset.y,
)
👍🏻 1
m

Matt

03/08/2024, 10:09 AM
Wow okay, so dividing by scale was correct and all I needed was the
TransformOrigin
:') Thank you!