Adobe Flash CC HTML5 Publishing Canvas 绘图不准确

Posted 2023-03-05

【中文标题】Adobe Flash CC HTML5 Publishing Canvas 绘图不准确

【英文标题】：Adobe Flash CC HTML5 Publishing Canvas Drawing Inaccuracy

【发布时间】：2016-05-30 01:29:06

【问题描述】：

我将从图片开始：

Comparison Of Different Publishing Methods From Flash CC

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

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

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

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

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

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

如果您想要更新，这里是正在实施的工作的链接： link

【参考方案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。使用 Adob​​e Animate 2016。

---

从 Adob​​e Animate 导出的普通形状

缓存形状容器

缓存大小翻倍

---

您可能还需要考虑在其后面放置一个更接近形状颜色的形状，因此如果边缘露出来，则不是深灰色背景。

【讨论】：

感谢 Lanny 提供的非常有用的见解！这里有几件事没有解释。 1）为什么“紧凑形状”高级选项会在图片中看到的形状之间产生更大的间隙，这是否意味着路径编码可能存在重大错误？ 2）看看背景上的白色垂直引导线。它们在 SWF 和 HTML5 版本的宽度上也有所不同。如果抗锯齿是问题，为什么水平线也会受到影响？第一张图片你的水平线形状不受影响，但它们在第二张。

紧凑形状应该相同。它可能存在问题，但它只是在后台转换为 moveTo/lineTo 调用。

您的建议确实改善了一些问题，但不幸的是还不够。由于这是一个平台限制，我只是通过将每一层的所有资产加倍并尽可能重叠它们来解决问题。我需要它几乎完美，因为我计划将这些资产与我的 2D phong 着色器一起用于我的游戏，因此表面需要平滑。如果您想要更新，这里是正在实施的工作的链接：link

非常感谢兰尼的意见。您可能需要做一些测试或提交问题以测试“紧凑形状”路径编码过程之前和之后的差异。