适合图像的矩形内的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";