Zoom/pan on mouse or trackpad

Coding
1

Hi,

Is there a simple way to allow participants to zoom into/out of an image in experiments? Instead of increasing the size of an image based on time, it would be based on their mouse or trackpad as you would with any regular image. Or would the best option be to try to integrate the panzoom library using CSS?

Thanks in advance!

2

Hi @kaylap, you could achieve this in Builder using a code component, conditionally changing the size of your image or shape depending on the mouse wheel direction. This code assumes you have a mouse called “mouse” and a polygon called “polygon”. In the “Each Frame” tab:

# positive wheel val for up, neg value for down
wheel = mouse.getWheelRel()[1]  
if wheel > 0:
    polygon.size += .1
elif wheel < 0:
    polygon.size -= .1

This should also work online

1 Like
3

Thank you, this works perfectly!

4

By any chance, do you know if it’s possible to zoom on different parts of the image based on where the mouse is or drag the zoom over to different areas? It seems like zoom is locked to the centre of the image.

5

I think you could write a bit of code to zoom anchored to the mouse point, but how about zoom with the ability to drag the image around?