HTML5 Canvas - Lens magnify effect

Forum|Forum|3 years ago
March 4, 2022
3 replies
1068 views

I have several (dozens actually) symbols representing optometry lenses of different magnification.

What would be the best solution for acheiving this effect?

This is to dynamically magnify the area behind the lenses (one lens shown fitted to the frame below), e.g. the eyes. The faces will change depending on the patient.

Note: The lenses can be moved left and right and rotated.

This topic has been closed for replies.

Ko.Maruyama

Community Expert

Does your magnification need to animate with some kind of rotation?

Isn't the lens just a value that can be called when a new magnification is chosen?

Doesn't using the lens value as a size/scale multiplier work for this? (plus crop)

F

FlatChatAuthor

Inspiring

@Ko.Maruyama

Thanks for your reply!

1. Magnification and rotation. You can see in the above image and in the video below that there are multiple lenses that are dragged onto a parent MC in each side of the optometry trial frame. Once in place, the lenses can be rotated and moved left and right in their holders. The magnification for the lenses should not make any difference for rotation for symmetrical lenses. So we can just go with that. Rotation no effect. However, with the movement left and right, the lenses would need to magnify the underlying image, the face and eyes etc., on movement.

2. Yes the lens is just a magnification value that can be set when a new lens is placed either from the combo boxes that put the lenses in a position on stage at a certain X Y (they are actually just off stage) or when parented on the frame. There are only four magnification lenses (Concave and Convex types – the first four comboboxes) and when a type and magnification is selected from the comboboxes, the relevant combobox is moved to a location on stage visible to the user. Also the text showing the magnification is changed to match the selected magnification in the combobox.

3. So yes, the lens magnification can just be used as a scale factor together with a mask to potentially achieve the effect. Though of course there are approx. 34 unique magnification multipliers in total if looking at just the magnification factor, which is probably all that needs doing at this stage.