为啥我的位图图像使用 EaselJS 在画布中出现别名？

Posted 2023-03-05

【中文标题】为啥我的位图图像使用 EaselJS 在画布中出现别名？

【英文标题】：Why are my bitmap images appearing aliased in canvas using EaselJS?为什么我的位图图像使用 EaselJS 在画布中出现别名？

【发布时间】：2014-05-03 23:39:35

【问题描述】：

我正在使用 html5 画布和 CreateJS 库制作纸牌游戏。

我有卡片图像 (png)，我将其缩小 10 倍，然后将它们显示在画布上。出于某种原因，它们总是出现别名（在所有浏览器和所有操作系统上）。

下面是一段代码摘录，演示了我如何将卡片添加到舞台。

var card = new createjs.Bitmap("images/two_of_hearts.png");
card.setTransform(100, 100, .1, .1);
stage.addChild(card);
stage.update();

正如我所说，我已经在多个浏览器上尝试过这个，并且所有浏览器都出现了相同的情况。我发现有些人在谈论使用 AlphaMaskFilter，它可能会完成这项工作，但我发现没有文档告诉我应该如何使用 AlphaMaskFilter。

有什么想法吗？如何使我的卡片抗锯齿或如何使用 AlphaMaskFilter 来实现抗锯齿？

【问题讨论】：

AlphaMaskFilter 不会帮助您的图像抗锯齿。 EaselJS 直接绘制舞台，如果将其缩小，Canvas 无法很好地缩小图像，这可能是生活中的事实。

【参考方案1】：

您的问题是您将图形缩放了 10 倍！当结果图像的大小显着不同时，缩放图像会导致图像混叠。我建议您创建所需大小的其他图像。这样做可以让您完全控制这些图像的外观。如果您坚持使用较大的图像并对其进行缩放，则需要通过几个步骤来缩放它们以减轻锯齿。这是example using a raw canvas。

【讨论】：

谢谢，我担心是这样。我将尝试使用 SVG 图像以及制作新的、更小的图像，然后看看效果如何。降压缩放似乎会产生太大的开销。顺便说一句，任何关于“显着不同”的不同的迹象？或者任何我能找到合理扩展的限制是什么的地方？

我不知道我头脑中的极限。您试图一次扩展到 90%。我链接到的示例几次缩放到 50%。我的猜测会介于这两个值之间，可能取决于图片的详细程度。关于缩放图像的开销，除非您一次缩放数十个（数百个？），或者在每次渲染时缩放图像，否则这并不是什么大问题。

我决定咬紧牙关，使用 GIMP 手动将原始 PNG 图像的大小调整为原始大小的四分之一。卡片显示精美，一切正常。感谢您的帮助。

大家好，关于如何使用 CreateJS 应用逐步转换有什么想法吗？由于画布是 CreateJS 阶段的容器，因此直接对其​​进行转换似乎不是一种选择。在 BMP 上调用 setTransform 并多次更新阶段并不能解决问题。