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

Question

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

我遇到的问题是，即使我的地图是从 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。我希望至少在转型过程中会保持清晰。

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

Answer 1

Animate 可能导出为图像，但除非您指定，否则不应导出。你的图书馆 JavaScript 是什么样子的？是否导出任何图像？也许搜索 .cache 的来源，看看 Adobe 是否在幕后做了一些有趣的事情。

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

可能可以将其加载为更大的位图，然后将其缩小以开始，但这将：

让它在内存中更大
还是只让你缩放这么多

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

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

希望对您有所帮助！

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

Adobe Animate CC Canvas (CreateJS) vector graphics becomes blurry on scale up

createjs

vector-graphics

adobe-animate