Adobe Flash CC HTML5发布画布绘图不准确

Question

我将从图片开始：

Comparison Of Different Publishing Methods From Flash CC

似乎通过Flash CC HTML5与CreateJS发布的内容以及在程序中实际创建的内容之间存在巨大差异，尽管它们是精确副本（我不是在谈论角色的姿势）

构成身体部位的形状都是具有实心填充且没有笔划的三角形。

然而，在HTML5发布的版本中，看起来所有这些形状现在彼此之间都有一个细的透明笔划。

非常感谢任何解释或官方支持！

更新 接受的答案肯定改善了一些问题，但遗憾的是还不够。

由于这是一个平台限制，我决定通过将每一层的所有资产加倍并尽可能精确地重叠它来解决这个问题。

如果您想要更新，这里有一个关于正在实施的工作的链接： link

Answer 1

这是Canvas的一个不幸的问题。 SWF格式实际上绘制了两边都有填充的线条，这使得SWF（和Flash / Animate IDE）在绘制具有对齐边缘的形状时可以创建无缝边缘。 Canvas不能这样做，因此抗锯齿会导致你看到的效果。

可能的方法是将其缓存为更大的尺寸，并将其缩小。

var bounds = character.nominalBounds; // Added by Flash export
character.cache(bounds.x, bounds.y, bounds.width, bounds.height, 2);

最后一个参数是缓存比例因子（在这种情况下，它将缓存大小加倍）。它仍然会以预期的比例绘制。

我做了一个快速示例以显示差异，它确实有所帮助。请注意，缓存也是摆脱边缘别名的好方法。 You can download the sample here。使用Adobe Animate 2016。

1. 从Adobe Animate导出的普通形状



1. 缓存形状容器



1. 将缓存大小加倍



您也可能需要考虑在其后面的形状中放置更接近形状颜色的形状，因此如果边缘透过，则不是深灰色背景。