动态区域绘制答案

【问题标题】：Dynamic area painting动态区域绘制
【发布时间】：2010-06-21 13:01:30
【问题描述】：

我有这样的图（可以是矢量格式）：

alt text http://img228.imageshack.us/img228/2791/dom1.gif

我有必要将它放在一个网站上并动态地绘制它。用户选择颜色（墙壁和屋顶），图片上的墙壁和屋顶都改变颜色（根据用户的选择）。

alt text http://img228.imageshack.us/img228/3946/domq.gif

颜色组不限。

用什么技术来决定这个问题（我觉得应该是客户端技术）？

变体：纯 css、canvas + javascript、jQuery、...

限制：我们不使用闪存技术。

【问题讨论】：

我建议查看 RaphaelJS 包：raphaeljs.com
@Pointy，感谢您的建议，这是一个非常好的库。我决定用它来解决我的任务。

标签： javascript jquery canvas paint

【解决方案1】：

对于 firefox 和 chrome，您可以使用 canvas 元素（尽管我不相信 3d 上下文已实现，如果这很重要的话）。那些 2 也支持svg。 Internet Explorer 有vml 可用，如果您可以处理更改文档类型并可能跳过其他一些问题。你可以使用 javascript 来绘制所有的点和诸如此类的东西。另外，你可以在页面内写vml。

【讨论】：

【解决方案2】：

我选择了 Raphael 库。

我以svg 格式保存图片，并使用http://onlypaths.com/aaopblog/2009/11/7/ 工具将svg 转换为Raphael format（记录，Raphael 可以理解）。

下一步 - 必填字段由超级库 Raphael 填充颜色。

来自svg 的另一个翻译工具，Raphael 可以理解的格式 - http://bkp.ee/atirip/

【讨论】：