Persist coordinates of shapes drawn above image after zooming
Closed this issue · 10 comments
Here's a fiddle representing my problem: https://jsfiddle.net/ke3mdbjy/4/
For the first time when the image is drawn, I draw a rectangle under a circle.
After zooming I was hoping the rectangle to stick on the same coordinates as it was before zooming.
I know I'm missing something very basic, but unable to pinpoint that.
Can you please help me?
When zooming/panning the canvas gets cleared and redrawn based on the new coordinates. The canvas can't persist anything.
If you initially draw a rectangle, you're going to have to redraw it when you interact with it (pan/zoom)
My bad. I pasted the wrong link. I've updated my sample code link. Can you please have a look now?
I just fail to understand by what coordinates I have to readjust my rectangle after zoom
It appears to stay in the same position for me. The box itself is not zooming if that's what you're asking.
Also, you don't have the renderCircle() method in the mouseMove event so you lose the box when you pan the image.
You're right, I haven't rendered the circle for panning. I was just focusing on zooming first.
What I was hoping was, if you mousewheel on the bigger circle next to the small one where rectangle is placed, even after zooming, the rectangle should stay inside that small circle.
I tried all sort of possibilities like subtracting (rectangle's x coordinate - zoomX), but didnt understand what should be the math
I'm open for a skype chat or whatever channel you prefer, if you have some time. Otherwise github would be fine :)
Oh, I see. Then you will preform the same logic that the circle image is using.
Alright. Let me try and update you. Thank you so much.
By the way, your idea of sequentially demonstrating the zooming/panning of an image bit by bit is fantastic