Image Zoom on mouseover

Yes, you can do something like that in Anvil. Here’s an app that does it:

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.

  1. First, the Canvas is cleared.
  2. Then a square is drawn at the magnified size.
  3. This is masked off into a circle
  4. The border is drawn around the edge of the circle
  5. 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.