EaselJS：更改形狀對象尺寸

總noobob問題。我一直在濫用谷歌，出於某種原因，令人驚訝的是，無法找到任何關於這個......？我覺得我在這裏錯過了一些東西。：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();}

來源

2013-02-19 Ricebandit

「我一直在濫用谷歌」 - 我要離開這關你的簡歷。可能會被誤解！ – 2013-02-19 01:02:17

您可以使用形狀的scaleX和scaleY來縮放形狀。

注意：Shape對象擴展了DisplayObject，因此您可能還想查看DisplayObject文檔以獲取更多有用的屬性/方法。

myShape.scaleX=1.2; 
myShape.scaleY=1.2;

來源

2013-02-19 02:02:06 markE

謝謝你。有點吮吸，他們沒有把寬度/高度屬性對象（我得到HTML表閃回）。 scaleX和scaleY並沒有達到相同的目的，但看起來這是進行水平/垂直轉換的唯一方法。我結束了使用轉換函數，以便我仍然可以準確地使用確切的寬度和高度（添加到我原來的帖子）。 – Ricebandit 2013-02-28 19:00:10

轉換方法來改變尺度 - >尺寸，反之亦然：如通過@markE提到

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

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

來源

2013-02-28 19:06:07 Ricebandit

，僅將scaleX和scaleY是可用的。

來解決這個問題的一個辦法是實例化1px的寬度和1px的高度形狀：

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);

允許設置與像素單元的尺寸，無需轉換，直接使用的scaleX和scaleY呈現之前：

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/

來源

2016-02-21 06:31:14 jck

EaselJS：更改形狀對象尺寸

回答

相關問題