Adobe Animate CC Canvas (CreateJS) 矢量图形在放大时变得模糊

Posted 2023-02-16

【中文标题】Adobe Animate CC Canvas (CreateJS) 矢量图形在放大时变得模糊

【英文标题】：Adobe Animate CC Canvas (CreateJS) vector graphics becomes blurry on scale up

【发布时间】：2019-06-10 19:43:02

【问题描述】：

所以我是这个下一代 Flash 应用程序的新手，他们称之为“Adobe Animate CC”，我正在尝试创建一个交互式地图场景......非常基础。如果你点击美国它应该放大。再次点击它应该缩小。

我遇到的问题是，即使我的地图是从 SVG 文件导入的——从我驻留在“Adobe Animate CC”工作区时的情况来看，它保留了它的矢量数据——当我应用比例时使用 CreateJS 补间图形的边缘变得非常像素化。

这是我正在使用的代码：

var _this = this;
_this.stop();

_this.america.addEventListener("click", zoomMap);

 function zoomMap(event)  

     createjs.Tween.get(exportRoot.world1).to(scaleX: 10, scaleY: 10, x: 4000, y: 1000, 1000);

以下是像素化结果的一些图像：

更令人不安的是，那个蓝绿色的圆圈是符号内的原生圆圈对象。不是svg。我希望至少在转型下这会保持清晰。

这是不可避免的吗？应用程序是否在导出时缓存我的矢量文件的位图版本？我能阻止这一切吗？我可以在补间期间和之后强制重新渲染矢量文件吗？有没有办法解决？这个应用程序是否真的支持矢量图形？

【参考方案1】：

Animate 可能导出为图像，但除非你告诉它，否则它不应该。你的库 javascript 是什么样的？有没有导出图片？也许搜索 .cache 的来源，看看 Adob​​e 是否在做一些有趣的事情。

如果地图是 SVG 源：不幸的是，EaselJS（作为 Animate 导出的基础）中唯一的 SVG 支持是将 svg 作为“位图源”。这意味着它被视为特定尺寸的图像，将其缩放到“100%”以上将插入细节。

也许可以将其加载为更大的位图，然后按比例缩小以开始，但这会：

使其在内存中更大 仍然只能让你扩展这么多

另一种选择是将 SVG 资源导入 Adob​​e Animate，Adobe Animate 应将其转换为矢量图形。如果它是 EaselJS 中的矢量，您可以随意缩放，因为它使用 Canvas 矢量 API 进行绘制，而不是图像源。

您提到绿色圆圈是原生的（我假设 Animate 中的形状？）。你确定它没有被导出为图像，而不是形状吗？你在缓存什么吗？

希望有帮助！

【讨论】：

我在预览时确实看到了这个输出：WARNINGS: ** 593 Bitmaps packed successfully into 7 spritesheet(s).

ok 更新：我可以通过取消选中“将文档导出为纹理”来消除像素问题，但这会在缩放补间期间产生更加不稳定/颠簸的体验。

是的，如果地图中有很多细节，这将成为现实。您可能可以采取一些措施来优化矢量，或者考虑自己将其缓存到您需要的大小。