canvas - 如何在easeljs中更改位图宽度和高度？

Question

我正在使用 easeljs 创建 HTML5 页面。我必须在画布中加载图像。如何更改我正在加载的位图的宽度和高度。

var img = new Image();  
img.src = image_path+images; // image from folder        
var loading_img = new createjs.Bitmap(img);  
stage.addChild(loading_img);

它只是在画布中显示图像，我尝试使用

loading_img.sourceRect = { x:img.width/2, y:img.height/2, width:280, height:150 };

但它裁剪图像（280 * 150）。

谢谢， 沙迪亚

Answer 1

您可以调整 scaleX 和 scaleY，而不是调整宽度和高度。要将图像的大小加倍，您可以这样做：

loading_img.scaleX=2.0;
loading_img.scaleY=2.0;

Answer 2

您必须首先加载图像（这样您就可以知道它的高度和宽度），然后创建位图并设置比例。

var image = new Image();
image.onload = function(){
    var bitmap = new createjs.Bitmap(image);
    bitmap.scaleX = YOUR_WIDTH/image.width;
    bitmap.scaleY = YOUR_HEIGHT/image.height;
    this.stage.addChild(bitmap);
};
image.src = 'thePathToYourImage.png';

Answer 3

这对我有用

img[h] = new Image();
img[h].src = //image path
r_mc[h] = new createjs.Bitmap(img[h]);
r_mc[h].y = 15;
r_mc[h].x = 10
r_mc[h].scaleX=280/r_mc[h].image.width;  //200
r_mc[h].scaleY=140/r_mc[h].image.height; //100
stage.addChild(r_mc[h]);

如果 r_mc[h].image.width 和 r_mc[h].image.height 没有影响您的图像大小意味着尝试在此之前获取图像大小并像这样设置

r_mc[h].scaleX=280/200;
r_mc[h].scaleY=140/100;

谢谢，
沙迪亚

Answer 4

是的，scaleX/Y 函数非常适合调整图像大小。

奥尔阿塔

Answer 5

我通常这样做：

var bitmap = new createjs.Bitmap(image object);
bitmap.scaleX = (your width number value) / bitmap.image.width;    
bitmap.scaleY = (your height number value) / bitmap.image.height;
stage.addChild(bitmap);