스케일링 된 스테이지의 센터링 레이어

Question

고정 좌표 공간에서 작업합니다. {x:0, y:0, w:800, h:600}을 예로 들어 봅니다. 캔버스가 창 크기에 맞게 조절 된 다음 무대를 확대하고 다시 그립니다. 그런 다음 무대 내 배경 레이어를 중앙에 배치합니다. 전체 스테이지의 크기 조정을 사용하지 않으면 센터링이 잘 작동하지만 스테이지 크기를 설정할 때 계산 된 좌표가 화면에 표시된 것과 일치하지 않습니다.

무대 스케일링과 그 다음에 레이어를 배치하는 방법은 무엇입니까? http://jsfiddle.net/pronebird/ahqa9a3y/

Answer 1

이 열쇠는 좌표 공간 stage.position과 함께 stage.scale 플러스 절대를 처리 할 수있는 트릭의 몇 가지를 사용하여 고정하는 것이 었습니다 :

// @param size window size {width, height} 
MyScene.prototype.scaleAndCenterScene = function (size) { 
    var hfactor = size.width/this.baseWidth; 
    var vfactor = size.height/this.baseHeight; 
    var factor = Math.min(hfactor, vfactor); 

    // resize stage 
    this.stage.setSize(size); 

    // scale stage 
    this.stage.setScale({ 
     x: factor, 
     y: factor 
    }); 

    // calculate center 
    var pos = { 
     x: (size.width - this.baseWidth) * 0.5, 
     y: (size.height - this.baseHeight) * 0.5 
    }; 
    // center layer 
    this.backgroundLayer.position(pos); 

    // redraw 
    this.stage.batchDraw(); 
}; 

JSFiddle는에서 확인할 수있다. 나는 이것에 블로그 포스트를 썼다 : https://coderwall.com/p/dy_dla.