Canvas rotate transform example

I cannot seem to get the canvas rotate transform to work, can someone provide a brief example so I can how it works, thanks.

Are you working on the speed-o-meter?

canvas rotations really mess with my head because they happen about the top left corner by default

So typically you might do a translation to move the center of rotation
then rotate
then undo the translation
then draw the object

And then continue the above pattern

I once wrote an app in anvil - using anvil’s canvas that had a similar feel to a speedometer:
Screen Shot 2020-10-13 at 08.27.57

And I didn’t use rotate.
Instead I used some maths to work out exactly where the position was in the x,y plane based on the radius and the angle.
It made my head explode less :exploding_head:
But then I’ve been a maths teacher so… yeah.

You can see the basic approach here for drawing two rectangles (one of which is rotated)


image

and converted code to python/anvil

https://anvil.works/build#clone:NNSQVJYVMRPMVDO4=QFJPVA3FLNMCCV5OEA55DLOF

2 Likes

I am working on the speedometer. I’ve considered ceating a canvas that is precisely a certain size and then doing the math to figure out what a particular angle would be but… I cannot afford for my head to explode.

I know that plotly polar indicators is the way to go but I could not figure it out in time.

1 Like