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函数非常适合图像大小调整。

Ol Ata

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

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

5 个答案: