代码之家 › 专栏 › 技术社区 › WillD

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

adobe-animate vector-graphics createjs

0

WillD · 技术社区 · 7 年前

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

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

以下是我使用的代码:

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。我预计,至少在转型时期,这一点会保持清晰。

这是不可避免的吗?应用程序是否在导出时缓存矢量文件的位图版本?我能停下来吗?我可以在我的tween期间和之后强制重新呈现向量文件吗?有什么办法吗?这个应用程序真的支持向量图形吗?

1 回复 | 直到 7 年前

1

Lanny 7 年前

使有生气导出为图像,但不应该,除非你告诉它。你的库JavaScript是什么样子的?是否导出任何图像?也许可以从源头上寻找 .cache 看看Adobe在幕后有没有搞笑。

如果地图是一个SVG源:不幸的是,在EaselJS(动画导出的基础)中,只有SVG支持作为“位图源”。这意味着它被视为一个特定维度的图像,将其缩放到“100%”以上将插值细节。

使它在内存中更大

另一个选择是将SVG资源导入adobeanimate,adobeanimate应将其转换为矢量图形。如果它是EaselJS中的vector,您可以根据需要缩放它,因为它使用Canvas vector api来绘制,而不是使用图像源。

你提到绿色的圆圈是本地的(我假设在动画中有一个形状?)。您确定它不是作为图像而不是形状导出吗?你在缓存什么吗?