{"id":815,"date":"2020-10-08T13:41:42","date_gmt":"2020-10-08T13:41:42","guid":{"rendered":"https:\/\/potatodie.nl\/diffuse-write-ups\/?p=815"},"modified":"2021-10-03T08:17:19","modified_gmt":"2021-10-03T08:17:19","slug":"magnify-an-image-with-a-draggable-loupe","status":"publish","type":"post","link":"https:\/\/potatodie.nl\/diffuse-write-ups\/magnify-an-image-with-a-draggable-loupe\/","title":{"rendered":"Magnify images with a draggable loupe"},"content":{"rendered":"\n

In a previous post<\/a> we’ve seen how to create a magnifying glass effect with canvas<\/code>. 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.<\/p>\n\n\n\n

\"\"
Static image of magnifying glass. Hang on for interactive version.<\/figcaption><\/figure>\n\n\n\n

Draggable Vue component<\/h2>\n\n\n\n

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.<\/p>\n\n\n

\n
\n
\n HTML <\/div>\n
\n CrossHairs.vue <\/div>\n <\/header>\n