하위 요소 확대 PixiJS

Question

하나의 주 캔버스, 즉 스테이지가있는 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의 출처를 읽는 것이 좋습니다. 행렬 곱셈으로 작업 한 것을 빨리 알 수 있습니다.

이 두려움을 두지 말고 새로운 것을 배울 것을 권장하십시오. 매트릭스 계산은 여기에서 매우 유연하고 프로그래밍의 많은 다른 분야에서 유용하기위한 핵심 요소입니다.

행운을 빈다.