Adobe Animate CC Canvas（CreateJS）矢量图形在按比例放大时变得模糊

Question

因此，对于这个下一代Flash应用程序我还是陌生的，他们称之为“ Adob​​e Animate CC”，我正在尝试创建一个交互式地图场景...非常基础。如果单击美国，则应放大。再次单击，应缩小。

我遇到的问题是，即使我的地图是从SVG文件导入的-从我在驻留在“ Adob​​e 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

动画可能会导出为图像，但是除非您告知，否则不应该。您的库JavaScript是什么样的？是否导出任何图像？也许在源中搜索.cache，以查看Adobe是否在幕后做任何有趣的事情。

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

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

1. 使其在内存中更大
2. 仍然只能让您扩展这么多

另一个选择是将SVG资产导入Adobe Animate，后者应将其转换为矢量图形。如果在EaselJS中为矢量，则可以根据需要进行缩放，因为它使用Canvas矢量API绘制图像而不是图像源。

您提到绿色圆圈是本地的（我在Animate中采用了形状吗？）。您确定不将其导出为图像而不是形状吗？你在缓存什么吗？

希望有帮助！