Phaser 3 如何设置容器1~1.5的最小最大缩放等级?
问题根因定位
你之前的逻辑触发失败,核心是把区间判断的对象搞混了:
你写的判断条件是“仅当增量x处于1-1.5区间内时才执行缩放累加”,但这里的增量x是通过deltaY * 0.002计算出来的相对变化值——正常滚轮一次的deltaY大概在100300区间,算出来的增量x最多也就0.20.6,反向滚动的时候增量还是负数,这个值本身永远不可能落在1~1.5的区间范围内,所以判断条件永远为假,代码自然完全不执行。你不管怎么调整变体写法都没解决,本质是整个判断逻辑的适用对象从一开始就错了。
正确实现方案
区间限制的校验对象,不应该是滚轮计算出来的相对增量,而应该是应用增量之后的最终容器缩放值,确保最终的容器缩放等级始终落在[1, 1.5]的范围内。
你之前自定义的between函数完全可以保留,只需要调整判断的时机和判断对象即可,参考完整可运行代码:
// 定义区间判断工具函数 const between = (num, min, max) => num >= min && num <= max; // 初始化容器缩放 container.setScale(1); // 绑定滚轮事件 this.input.on('wheel', (pointer, gameObjects, deltaX, deltaY) => { // 计算本次滚轮带来的缩放变化量 const scaleDelta = deltaY * 0.002; // 计算应用变化量后的目标缩放值 const targetScale = container.scale + scaleDelta; if (between(targetScale, 1, 1.5)) { // 目标值在允许区间内,正常应用 container.setScale(targetScale); } else if (targetScale < 1) { // 目标值低于最小限制,直接锁定到最小值 container.setScale(1); } else { // 目标值高于最大限制,直接锁定到最大值 container.setScale(1.5); } })
实战踩坑补充
- 尽量使用Phaser提供的
setScale()方法赋值,不要直接修改container.scale属性:直接赋值虽然视觉上能生效,但不会触发Phaser内部的变换矩阵重算流程,长时间运行可能出现缩放值判断不准、交互错位的问题 - 这种钳制写法可以兼容快速连续滚动的场景:哪怕用户一次性滚轮滚过的距离足够让缩放值超出限制范围好几倍,也会被直接卡到对应的上下限,不会出现缩放值飘到2、或者0.5这类异常值的情况
- 如果后续要优化以鼠标位置为中心的缩放效果,只需要在缩放赋值之后,额外计算容器的坐标偏移即可,现有缩放限制的逻辑不需要改动
内容的提问来源于stack exchange,提问作者shngrdnr
相关产品推荐
相关产品推荐

