0

我正在努力在这里创建我的纸娃娃游戏的新版本。

现在它在 Flash 中。我想将它更新为 HTML 5，但我不确定是使用 SVG，还是使用 Canvas 绘制的图像，还是导入 Canvas 的 png。从技术角度来看，我想任何一个都可以，但我想考虑性能。

一些事实/要求：

  1. 我有用于图像编辑的 Adob​​e Illustrator 和 Photoshop。还有 Adob​​e Edge Animate，如果这有任何价值的话。
  2. 当我添加一个新图像（例如衬衫）时，如果能够将其放入一个标有“衬衫”标签的文件夹中并将其集成到程序中，而无需进入并将文件名输入到数组中，那就太好了这页纸。使用 PHP 我怀疑我可以从目录中读取这个，但我不确定 SVG 或画布绘图是否可以存储在像这样的单独文件中
  3. 我需要能够调整每个项目的颜色。我想我会为此使用 CSS 过滤器？
  4. 对于某些项目，我希望能够仅更改项目部分的颜色（例如花朵的颜色，但不能更改叶子的颜色）。在 Flash 中，这是通过将滤色器仅应用于元素的一层来完成的。不知道如何在这里处理。也许是通过让两个阵列中的每个阵列具有相互重叠的独立相关图像，并将滤色器仅应用于一个阵列。
  5. 在用户更改结束时，他们应该能够将图像保存到他们的计算机，或者我应该能够将他们的创建保存到服务器上的目录中。我有这个在 Flash 版本上工作，但它现在坏了。我知道为什么并且可以在新系统中使用相同的过程，但可能有更简单的方法。我听说保存画布的内容很容易。
  6. 重叠的形状必须有平滑的边缘，而不是锯齿。
  7. 需要在 iPad 和 iPhone 上工作。我看到的许多画布和 SVG 样本在我的 iPhone 上都不能正常工作，尽管我确实找到了一个与此类似的工作 SVG 娃娃程序。

其中一些可能应该是多个问题，但希望你能指出我正确的方向。我相信无论我尝试哪种方法，我都能弄清楚代码，但我不想从错误的方向开始并浪费时间，因为我对 SVG 和 Canvas 的了解仍然有限。

谢谢你。

4

1 回答 1

3

我的 2 美分：

...

Adobe 插画师：

存储新图像：

  • 由于您正在处理图像的子组件，因此您可能希望将图像保存为路径，而不是图像文件。在 SVG 和 Canvas 路径中，数据都是简单的文本 - 易于存储和服务。

调整组件的颜色：

  • SVG 可以通过更改组件的“填充”属性直接做到这一点。
  • Canvas 可以通过它的合成能力做到这一点。这只是设置起来稍微复杂一些，并且涉及分层。要更改衬衫的颜色，您需要创建一个包含衬衫颜色的单独图层。然后您可以将任何新颜色合成到该图层上。之后，它很容易和有效。或者，通过一点编程工作，您可以识别要重新着色的任何路径并使用不同的“fillStyle”重新绘制该路径。

允许用户将图像保存到他们的本地文件系统：

  • 出于安全原因，SVG 或 Canvas 都不会原生地执行此操作。
  • 简单的解决方案：您可以打开一个新的浏览器窗口并让它们右键单击另存为。
  • 更复杂的解决方案：将图像从您的 Web 服务器中弹出并让用户从服务器下载它

无抗锯齿：

  • 只有 SVG 允许您禁用抗锯齿。
  • Canvas 在抗锯齿方面做得很好，但你不能关闭抗锯齿。

需要在 iPad/iPhone 上工作：

  • SVG 和 Canvas 都受支持，因此您的应用程序应该可以工作。
  • 和往常一样，一定要测试一个微应用来确定！！

结论：

SVG 和 Canvas 都具有您正在寻找的功能，但 SVG 似乎更适合：

  • SVG 可以原生使用导出为 svg 格式的 AI 图像。
  • SVG 在绘制许多对象时会变慢，但您只绘制了几个组件（没问题）。
  • SVG 本机允许您重新着色路径。
  • SVG 可让您关闭抗锯齿（但根据我的经验，这是个坏主意——请继续使用它！）
  • Canvas 擅长快速绘制数千种形状——动画！（在您的情况下不需要）
于 2013-06-06T18:02:47.100 回答