CODEWITHSUNDEEP
zoomingphaser-framework
shngrdnr
shngrdnr

Reputation: 109

Phaser 3 - set min and max zoom levels

I'm using Phaser to create an online comic. One functionality I want to have is the option to zoom into images, for the sake of legibility on small screens.

I'm using the following on a container holding the image.

container.scale = 1;

this.input.on('wheel', function (pointer, gameObjects, deltaX, deltaY, deltaZ) {
                    
    var x = deltaY * 0.002;
                    
    container.scale += x;
                
    console.log(container.scale);
                
});

So far so good, the image zooms.

I want to set a minimum zoom level of 1 and a maximum zoom level of 1.5.

I thought this modification to the code would do it:

container.scale = 1;

this.input.on('wheel', function (pointer, gameObjects, deltaX, deltaY, deltaZ) {
                
    var x = deltaY * 0.002;
                
    function between(x, min, max) {
        return x >= min && x <= max;
    }
        
    if (between(x, 1, 1.5)) {
        container.scale += x;
        console.log(x, container.scale);
    }
                
});

But the code won't fire at all. I've tried variations and gotten nowhere - can anyone help with this?

Upvotes: 0

Views: 525

Answers (1)

Nelloverflow
Nelloverflow

Reputation: 1779

The WheelEvent.deltaY read-only property is a double representing the vertical scroll amount in the WheelEvent.deltaMode unit.

You're comparing the set amount the wheel is actually spinning versus that range, which is why it'll never fire. On my end your x value will be either 0.24 (down-spin) or -0.24 (up-spin) depending on the wheel spin direction.

This is closer to what you might want to be achieving:

    if((x < 0 && container.scale + x >= 1) || (x > 0 && container.scale + x <= 1.5)) {
      container.scale += x;
    }

Upvotes: 1

Related Questions