適合圖像的矩形內的easelJS

Question

我是新來easelJS和我試圖適應矩形內的圖像。我可以設置x，y而不是寬度和高度。什麼是正確的方法？

var stage = new createjs.Stage("canvas"); 
    var layoutWidth = 0.8 * stage.canvas.width; 
    var layoutHeight = 0.6 * stage.canvas.height; 
    var layoutRect = new createjs.Shape(); 
    layoutRect.graphics.beginStroke("black").drawRect((stage.canvas.width - layoutWidth)/2, (stage.canvas.height - layoutHeight)/2, layoutWidth, layoutHeight); 
    var imageContainer = new createjs.Shape(); 
    imageContainer.graphics.beginStroke("black").drawRect((stage.canvas.width - layoutWidth)/2 + (layoutWidth - 0.25 * layoutWidth)/2, (stage.canvas.height - layoutHeight)/2 + 0.1 * layoutHeight, 0.25 * layoutWidth, 0.25 * layoutWidth); 
    var image = new createjs.Bitmap("pizza.jpg"); 
    image.x = (stage.canvas.width - layoutWidth)/2 + (layoutWidth - 0.25 * layoutWidth)/2; 
    image.y = (stage.canvas.height - layoutHeight)/2 + 0.1 * layoutHeight; 
    stage.addChild(layoutRect, imageContainer, image); 
    stage.update(); 

我想將圖像放在圖像容器中。

Answer 1

首先，以適應圖像中，你需要獲得圖像的寬度和高度的矩形，但你不能這樣做，直接如果沒有加載圖像。

你可以做的是手工創建的圖像對象，然後用它作爲createjs.Bitmap第一個參數。

這樣你已經能夠調整圖像大小。我更新，而不是更新imageobj大小這個例子中的基礎撥弄@Lanny在評論中，我設置的image規模爲scale，我把圖像中的圖像容器的中心點。我對EaselJS不太熟悉，所以我以前沒有嘗試更新圖像比例。

var containerX = (stage.canvas.width - layoutWidth)/2, 
    containerY = (stage.canvas.height - layoutHeight)/2; 

var image, 
    imageobj = new Image; 

imageobj.onload = function() { 
    var containerBounds = imageContainer.getTransformedBounds(); 

    var xratio = layoutWidth/this.width, 
     yratio = layoutHeight/this.height; 

    var scale = Math.min(xratio, yratio); 

    image = new createjs.Bitmap(imageobj); 
    image.scaleX = 
    image.scaleY = scale; 
    image.x = containerX + ((imageobj.width/2) * scale); 
    image.y = containerY + ((imageobj.height/2) * scale); 
}; 

imageobj.src = "pizza.jpg";