Phaser - 如何缩放焦点（鼠标或捏合）答案

【问题标题】：phaser - How to zoom around point of focus (mouse or pinch)Phaser - 如何缩放焦点（鼠标或捏合）
【发布时间】：2017-12-23 03:44:45
【问题描述】：

我希望我的移相器世界在我的鼠标指针所在的点（或两根手指/捏之间）缩放。默认情况下，移相器围绕左上角缩放/缩放。

这是一个示例（但不是移相器），它显示了我想要达到的目标：https://cloudup.com/blog/how-we-made-zoom-on-mobile-using-css3-and-js

【问题讨论】：

标签： game-engine phaser-framework

【解决方案1】：

根据单击点缩放一组项目。

捕捉组的起始位置(x,y)和鼠标点击点：

startPosX = this.position.x;
startPosY = this.position.y;

clickX = pointer.x;
clickY = pointer.y;

执行组的规模：

var tweenScale = game.add.tween(this.scale).to( { x: 2, y: 2 }, 10,
                    Phaser.Easing.Linear.None, true, 0, 0, false);

缩放完成，补间回到鼠标点击位置：

tweenScale.onComplete.add(function() {                  
    var u = ((1-this.scale.x) * clickX) + startPosX;
    var v = ((1-this.scale.y) * clickY) + startPosY;

    game.add.tween(this.position)
        .to({ x: this.position.x + u, y: this.position.y + v}, 10, 
           Phaser.Easing.Linear.None, true, 0, 0, false );
}, this);

我添加了startPosX 以获取u（和v）来说明该组的原始起点的位置，否则它将偏离该数量。我确信有不同的方法来处理补间链接，但u 和v 的计算才是最重要的。

使用此答案得出基本计算：https://stackoverflow.com/a/39344716/1956540

【讨论】：

【解决方案2】：

查看这些工作实现示例：

http://test.xapient.net/phaser/springtest/indexzoom.html（a 和 o）

【讨论】：

链接不再有效。这就是为什么在 SO 上首选发布代码而不是链接的原因。