移相器 - 如何在焦点周围缩放（鼠标或捏合）

Question

我希望我的移相器世界在我的鼠标指针所在的位置（或在两个手指/捏之间）进行缩放。默认情况下，相位器会在左上角缩放/缩放。

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

Answer 1

请参阅以下工作实现示例：

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

Answer 2

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

捕获组的起始位置（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