easelJS - 使用 Javascript 调整图像大小，然后将其与 SpriteSheet 一起使用

Posted 2023-03-25

【中文标题】easelJS - 使用 Javascript 调整图像大小，然后将其与 SpriteSheet 一起使用

【英文标题】：easelJS - Resize an image with Javascript then use it with SpriteSheet

【发布时间】：2014-01-19 10:09:33

【问题描述】：

在我的代码中，我将图像存储到直接从 javascript 加载的变量中（我没有创建任何指向该图像的 html 标记链接）并且该图像是高清的。

根据用户的屏幕尺寸，我想用特定的值（宽度和高度）调整图像的大小，并且我已经计算了这些值。 我使用 Javascript 修改了图像的大小

imgHD.width = modifiedWidth;
imgHD.height= modifiedHeight;

这很好用。 我使用

检查了它

alert('newWidth: ' + imgHD.width + ' / newHeight: ' + imgHD.height);

而且值是正确的。

我创建了 SpriteSheet，并且画架在没有修改宽度和高度的情况下使用了高清图像。

var spriteSheet = new createjs.SpriteSheet(
    // image to use
    images: [imgHD],
    // width, height & registration point of each sprite
    frames:  width: imgHD.width / imgSpriteNbr, height: imgHD.height / imgSpriteNbr, regX: imgHD.width / imgSpriteNbr / 2, regY: imgHD.height / imgSpriteNbr / 2,
    animations: 
        walk: [0, imgSpriteNbr - 1, "walk"]
    
);

我可以直接从easelJS 调整我的图像大小吗？我可以用另一种方式从Javascript 调整图像的大小，之后easelJS 可以正确解释吗？

我是画架JS的初学者， 谢谢

【参考方案1】：

要创建不同大小的 SpriteSheet，您必须使用中间画布，并首先以不同大小绘制图像，然后将其与 SpriteSheet 一起使用。

一种更简单的方法是缩放从 SpriteSheet 创建的精灵。