选择哪种网络技术提供交互式着色？

Question

客户要求我们在他的网站上添加一项功能，允许访客在简单的线条图中为面板着色。

网站访问者将有一个有限的调色板可供选择，并将选择一种颜色并单击线条图中的形状以将其着色，如下所示： alt text http://i49.tinypic.com/2usg8d5.jpg

这些线条图只有四到五个。图纸本身不需要是交互式或灵活的，只需要着色。

线条图非常简单，我们不需要保存访客的选择，尽管访问者想要打印或通过电子邮件发送结果。

简单的简单东西。大多数时候，你在复杂的网站上看到这一点，我认为它是用Flash完成的。

但Flash是唯一的出路吗？或者可以使用JQuery / Javascript或Silverlight或其他东西吗？我们团队的知识涵盖ASP.NET，HTML，CSS，Javascript。没有Flash的经验。

Answer 1

如果你有一定数量的线条图和有限数量的颜色，你可以预先生成每个可能的颜色/截面组合 - 将每个区域隔离为透明的GIF / PNG并使用position：absolute复合它们创造一个“洋葱皮”/动画cel效果。使用一些老式HTML图像映射代码（或myimage.X / myimage.Y参数或jQuery的服务器端解析）来计算他们点击的位置，识别鼠标单击位置下的图像部分，并替换它仅使用所选颜色的相应版本的图像。

Answer 2

如果不使用画布或SVG，则无法绘制这些形状。我不确定浏览器为这些提供的支持。

如果你可以选择帆布，那么你可以看看

<强> Processing js library

或SVG

<强> Raphaël—JavaScript Library

Answer 3

我只能用两种方式来思考atm：

• 将线条图分割为可着色的元素，并显示每个图像的绝对位置，以便将图像合并到网站上。 使用Javascript通过“onclick”加载该部分的预着色图像（或使用asp / php /无论服务器端生成彩色版本。
  不确定是否可以干净地打印绝对定位的元素。
• 使用flash，它很简单，所以即使没有经验，你也应该能够在1-2个工作日内完成。

Answer 4

我的猜测是，您可以使用新的HTML 5 canvas element以开放，符合标准的方式实现此目标。

注意：canvas是一项新功能，仅在最近的浏览器版本中支持（例如最新的Safari，Firefox或Chrome）。