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

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

所以我是他们称为 "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。我希望至少在转型过程中会保持清晰。

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

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

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

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

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

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

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

希望对您有所帮助!