2013-02-19 4 views
2

멍청한 질문. 나는 Google을 학대 해왔고 어떤 이유로 든 놀랍게도 이것에 관해서 아무 것도 찾을 수 없었습니다 ...? 내가 뭔가를 여기에서 놓치고있는 것처럼 느껴진다. : PEaselJS : 도형 변경 도형 치수도

현재 캔버스 크기를 창 크기로 수정하는 resize() 함수가 있습니다. jQuery를 사용하는 최소한의 예제에서는 Shape 객체를 참조하는 변수가 있습니다. 문서에 따르면 셰이프 개체에는 너비 속성 &이 포함되지 않습니다. Shape 객체의 사이즈를 변경하는 가장 효율적인 방법은 무엇입니까? 동적으로 제거/다시 그리기?

이 내가 가진 무엇 :

  var stage; 

      var bgColor; 

      $(document).ready(function(){ 
       init(); 
      }); 

      function init() 
      { 
       stage = new createjs.Stage("canvasStage"); 

       bgColor = new createjs.Shape(); 
       bgColor.graphics.beginFill("#000000").drawRect(0,0, stage.canvas.width, stage.canvas.width); 

       stage.addChild(bgColor); 

       $(window).resize(function(){windowResize();}); 
       windowResize(); 
      } 

      function windowResize() 
      { 
       stage.canvas.width = $(window).width(); 
       stage.canvas.height = $(window).height(); 
       //bgColor.width = $(window).height();// No width property 
       //bgColor.height = $(window).height();// NO height property 

       stage.update();} 
+0

"나는 구글을 학대했습니다"- 나는 당신의 이력서를 그을 떠날 것입니다. 잘못을 저질렀을 수도 있습니다! –

답변

3

당신은 모양을 확장 할 모양의 scaleX가 및 scaleY를 사용할 수 있습니다.

참고 : Shape 객체는 DisplayObject를 확장하므로 많은 유용한 속성/메소드에 대한 DisplayObject 문서를 볼 수도 있습니다.

myShape.scaleX=1.2; 
myShape.scaleY=1.2; 
+1

감사합니다. Kinda는 width/height 속성을 객체에 넣지 않았다고 생각합니다 (HTML 표 플래시백이 나타남). scaleX 및 scaleY는 동일한 용도로 사용되지는 않지만 이것이 수평/수직 변환을 수행하는 유일한 방법 인 것 같습니다. 변환 기능을 사용하여 결국 정확한 너비와 높이 (정확하게 원래 게시물에 추가됨)를 사용할 수있게되었습니다. – Ricebandit

0

변환 방법은 스케일 변경 -> 치수와 반대 : @markE 의해 바와 같이

function dimToScale(origDim, desiredDim) 
{ 
    return desiredDim/origDim; 
} 

function scaleToDim(origDim, scale) 
{ 
    return scale * origDim; 
} 
2

을 단 및 scaleY scaleX를 사용할 수있다.

직접 scaleX가 및 scaleY을 이용한 변환, 픽셀 단위로 기준을 설정할 수
mc_bg = new createjs.Shape(); 
mc_bg.graphics.beginFill("#CCCCCC").drawRect(0,0,1,1); 
stage.addChild(mc_bg); 

mc_left = new createjs.Shape(); 
mc_left.graphics.beginFill("#333333").drawRect(0,0,1,1); 
stage.addChild(mc_left); 

mc_circle = new createjs.Shape(); 
mc_circle.graphics.beginFill("#888888").drawCircle(0,0,1,1); 
stage.addChild(mc_circle); 

렌더링 전에 :

문제를 해결하는 방법은 1 픽셀 폭과 1 픽셀의 높이와 형상을 인스턴스화하는

mc_bg.scaleX = stage_width; 
mc_bg.scaleY = stage_height; 

mc_left.scaleX = stage_width/2; 
mc_left.scaleY = stage_height; 

mc_circle.x = stage_width/4; 
mc_circle.y = stage_width/4; 
mc_circle.scaleX = stage_width/4; 
mc_circle.scaleY = stage_width/4; 

stage.update(); 

창 크기 조절에 라이브 크기 조정과 바이올린 예를 참조하십시오 https://jsfiddle.net/jckleinbourg/go3fs1zt/