Yes, you can do something like that in Anvil. Here’s an app that does it:
https://anvil.works/build#clone:4EZHJ3E3LVREBPUG=Q75ZMLSLG5K6LY6KRJ54YIJZ
https://magnified-wombat.anvil.app/
It uses our Canvas component. The Canvas component has a mouse_move event that gets the x, y position of the mouse, so we can draw a zoomed-in circle at the mouse position.
In particlar, it makes use of a method we added recently for drawing part of an image onto a Canvas - draw_image_part. The comments in the code lay out the sequence of operations.
- First, the Canvas is cleared.
- Then a square is drawn at the magnified size.
- This is masked off into a circle
- The border is drawn around the edge of the circle
- The rest of the image is drawn in underneath.
Of course, you can tweak this however you like - if you want to use a higher-resolution version for the zoomed-in image, you can just pass a different Media object into self.canvas_1.draw_image_part.
If you want to put multiple of these on a page, the Custom Components section of the reference docs will help you.
