In a previous post we’ve seen how to create a magnifying glass effect with
canvas. But the position of the lens was static, and of course in a useful application a user must be able to move the lens to a point of interest.
Draggable Vue component
To that end we’ll create a Vue component that works as a draggable loupe. The loupe hovers over an image that is likely to be downscaled (otherwise a magnifying glass is not of much use). Furthermore, we allow the image to be responsive. This means the position of the loupe in CSS pixels will not correspond to the image pixels. Since SVG elements may have their own coordinate system, let’s use SVG for the draggable, and make its coordinates match the underlying image.
The coordinate system can be set by the parent via the
viewBox property. In this way we can make the position of the loupe match with the image coordinates.
We’ll implement the draggable with GreenSock’s Draggable:
Single source of truth
The draggable passes the change in position (
deltaY) to the parent while the user drags. The parent component then adds these deltas to the current position after which the
transform property of the CrossHairs component reacts to the updated position. Usually gsap’s Draggable manages the
transform property (when using
type: "x,y"), but here that property is overwritten when the parent component changes
position. This guarantees the Single source of truth remains by the parent component.
Now let’s turn to the parent component.
The CanvasScrutinizer component consists of several layers. First we have a canvas to which we copy our source image. This canvas will also determine the dimensions of the container
div, since the other layers are positioned absolutely. The second canvas is for drawing the magnified part of the image. Top it off with the CrossHairs component to allow the user to move the loupe.
The loupe at work
See the application with UI (set magnification factor, set loupe size, image file input) at work in the lab.