如何更改画架中的位图宽度和高度？答案

【问题标题】：How to change bitmap width and height in easeljs?如何更改画架中的位图宽度和高度？
【发布时间】：2019-10-12 20:21:24
【问题描述】：

我正在使用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）。

谢谢，沙迪亚

【问题讨论】：

标签： canvas bitmap height width easeljs

【解决方案1】：

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

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

【讨论】：

是的，它将图像放大 2 倍。但我需要将位图宽度和高度转换为 280*150 而不是缩放它。实际尺寸是800*600。像这样，我有 5 张不同宽度和高度的图像
从 800x600 到 280x150，您可以执行多种操作：缩放和裁剪，只需裁剪，只需缩放（拉伸） - 我猜您想要缩放和裁剪，因为您必须应用蒙版并像已经提到的 markE 一样使用 scaleX/scaleY
缩放可以“缩放”图像...缩放也可以“缩小”图像...在您的情况下，您希望将图像从 800x600 缩小到 280x150 ...为此，您可以使用这些比例值来“缩小”您的图像： loading_img.scaleX=280/800 和 loading_img.scaleY=150/600; ...您的图像会缩小并且不会被裁剪...您的图像会有点失真，因为您没有按比例缩放。
它可以工作，但是当我通过更改 regX 和 regY 来移动图像时它看起来很丑
关于如何按比例缩放图像的任何想法？？

【解决方案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';

【讨论】：

【解决方案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;

谢谢，
沙迪亚

【讨论】：

【解决方案4】：

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

奥尔塔

【讨论】：

【解决方案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);

【讨论】：