子要素を拡大するPixiJS

Question

私は1つのメインキャンバス、つまりステージを持つPIXI JSを使用してインターフェイスを作成しようとしています。その後、私はステージの子供としてグラフィックス要素を持っています。グラフィック要素をクリックすると、要素を拡大してキャンバスの80％を塗りつぶすことができます。私の主な目標は、複数の要素を持つことです。それぞれの要素をクリックすると、その要素だけが拡大表示されます。

私がこれまでに行っているもの：

this.renderer = this.PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, { 
     transparent: true, 
     anitalias: true 
    }); 
    this.stage = new this.PIXI.Container(); 
    this.graphics = new this.PIXI.Graphics(); 
    this.graphics.beginFill(0x2F7455); 
    this.graphics.drawRect(100, 100, 75, 50); 
    this.graphics.endFill(); 
    this.graphics.interactive = true; 
    this.graphics.click = function(){ 
     self.animate = true; 
     self.grow(); 
     console.log("I WAS CLICKED"); 
    } 
    this.stage.addChild(this.graphics); 

    animation() { 
     requestAnimationFrame(this.animation.bind(this)); 
     this.renderer.render(this.stage); 
    } 

    grow() { 
     this.stage.pivot.x = this.graphics.width/2; 
     this.stage.pivot.y = this.graphics.height/2; 
     if (this.stage.scale.x < 20) { 
      this.stage.scale.x = (this.stage.scale.x * 1.25).toFixed(1); 
     } 
     if (this.stage.scale.y < 20) { 
      this.stage.scale.y = (this.stage.scale.y * 1.25).toFixed(1); 
     } 
    } 

だから、キャンバスはズームイングラフィック要素をクリックする上しかし、それは私が欲しいものではありませんし、私はその意志ロジックのまわりで私の頭を包むように見えることはできません。私が欲しいものを達成するのを助けてください。

誰かが私が取るべきアプローチについて考えていますか？

Answer 1

このような特別な質問をするときは、観客がこれまでに行ったことをすぐに試すことができるように、常にplnkr.coまたはcodepenでデモンストレーションを作成する必要があります。これにより、人々があなたを助けるための障壁が低くなります。

問題については、どのサイズのサイズ（ステージサイズ）を知っているか、オブジェクトのサイズ（バウンディングボックス）を知りたいと思って、サイズ変更の必要量を計算できます。これはハードコードされた値1.25になります。

また、オブジェクトがステージと同じ別の比率（幅と高さ）を持っているときに、何をしたいか考える必要があります。カット、フィット、ストレッチ？これは慣用的なやり方です。

pixi camera js libraryの情報源を読んでおくことをお勧めします。あなたは素早く行列の乗算を扱っていることに気づくでしょう。

これがあなたを恐れることはありませんが、新しいことを学ぶことをお勧めします。マトリックス計算は、ここで非常に柔軟性があり、プログラミングの他の多くの分野でも有用な鍵です。

幸運。