Phaser 3 - 设置最小和最大缩放级别

Question

我正在使用 Phaser 创建在线漫画。为了在小屏幕上清晰易读，我想要的一项功能是可以选择放大图像。

我在保存图像的容器上使用以下内容。

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);
                
});

到目前为止一切顺利，图像缩放。

我想将最小缩放级别设置为 1，将最大缩放级别设置为 1.5。

我认为对代码的这种修改可以做到：

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);
    }
                
});

但是代码根本不会触发。我已经尝试了各种变体，但一无所获 - 有人可以帮忙吗？

Answer 1

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

您正在比较车轮实际旋转的设定量与该范围，这就是它永远不会开火的原因。在我这边，你的 x 值将是 0.24（向下旋转）或 -0.24（向上旋转），具体取决于车轮旋转方向。

这更接近您可能想要实现的目标：

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

Phaser 3 - 设置最小和最大缩放级别

Phaser 3 - set min and max zoom levels

zooming

phaser-framework