单击时显示不同文本的交互式多边形形状答案

【问题标题】：Interactive polygon shapes that display different text on click单击时显示不同文本的交互式多边形形状
【发布时间】：2012-09-03 18:35:59
【问题描述】：

更新：

大家好，这就是我所取得的成就：http://jsfiddle.net/vsJMn/（我正在使用“RaphaelJS 澳大利亚”示例进行测试）

我现在唯一想不通的问题是如何在单击另一个元素时将一个元素的状态恢复为 0。我已经弄清楚了如何在单击一个元素时获得“活动/选定”状态，然后悬停在其余元素上起作用，但是随后单击的任何元素都停留在最后一个状态并且悬停事件不会不用再做下去了。

有人知道如何解决这个问题吗？

老问题：

我想创建与此非常相似的东西：http://www.voanews.com/content/olympic-village-map/1446501.html

我希望能够绘制自定义形状，当单击这些形状时，每个形状都会在页面上显示不同的文本（可能在“div”中）。

就像链接中的示例一样，我想通过鼠标悬停、单击等添加交互式样式。当您将鼠标悬停在形状上时，它们会动画，然后当您单击一个时，它会保持选中状态，从而允许悬停动画在其他形状上工作，直到您单击另一个形状。还有文字淡化效果。

我一直在寻找许多方法来创建它，特别是 HTML5 画布、Raphaeljs (http://raphaeljs.com/australia.html) 和其他一些方法，但我似乎无法正确地做到这一点。

那个“奥运村”正是我所需要的——谁能帮帮我。

感谢@vlad-otrocol，我已经查看了您建议的教程，它们真的很有帮助。他们确实有很多我需要的东西，但我找不到我想要的一切。

感谢@kevin-nielsen 提供的示例，您的方法比我在 RaphaelJS 示例网站上研究的“澳大利亚”示例要容易得多。这就是我所取得的成就：http://jsfiddle.net/k2GQj/。

我已将我的示例与您的示例集成在一起，并拥有：http://jsfiddle.net/L3bHz/。

我需要做的是能够单击一个元素，更改其颜色，然后保持该颜色状态，同时允许其他元素在悬停时更改颜色（例如“奥运村地图”）。

从我的示例中可以看出，目前我有一个“mouseout”事件，它将每个元素颜色更改为一种颜色。我是否需要为每个元素创建一个“mouseout”事件 - 是否有办法在悬停后将元素颜色恢复为原始状态？

还有 Kevin，在您的示例中，您如何定位文本？在我一直在处理的示例中，使用了 DIV，因此可以使用 CSS 更改定位。

再次感谢大家的帮助 - 我会在这方面做更多工作，并会报告任何进展！

【问题讨论】：

标签： jquery html canvas raphael interactive

【解决方案1】：

对于这样的显示，我反对使用画布，而支持使用 RaphaelJS 驱动的 SVG，就像您用作模型的奥运村地图一样。它提供了针对悬停和单击的内置事件处理以及持久状态信息，开箱即用，并且对数百或数千个对象保持合理的性能。如果您完全熟悉 javascript，它会使您所描述的地图变得非常容易。考虑一下this little example fiddle，它演示了 Raphael 的 js 以支持悬停和单击任意形状 - 只花了几分钟的时间来编写。

你有你打算构建的地图的路径吗？

【讨论】：

【解决方案2】：

如果您决定为您的项目使用 html 画布元素，我会看看这个：http://simonsarris.com/blog/510-making-html5-canvas-useful 他有一系列非常好的画布教程。

Simon 的教程包含了您需要的几乎所有内容。但您必须记住几个关键要素：

您必须跟踪画布上所有对象的坐标和状态。
Canvas 没有形状/对象事件之类的东西。您只能将事件添加到画布元素。
如果您希望鼠标悬停在某个形状事件上，您需要有一个画布 mouseover 事件，获取光标坐标以检查您的形状位置，然后您可以决定光标是否超出形状。
画布的一般流程是：事件触发->重新计算新的画布状态、对象位置和可见性等->重绘一切

我也会看看html5画布教程http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/

【讨论】：