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サイズを更新するので、私はscaleとしてimageの規模を設定していて、私がイメージコンテナの中心点に画像を入れ、コメントで@Lannyフィドルに基づかを更新しました。私は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";