0

更新：

嗨，伙计们，这是我已经走了多远：http: //jsfiddle.net/vsJMn/（我正在使用“RaphaelJS australia”示例进行测试）

我现在无法弄清楚的唯一问题是如何在单击另一个元素时将元素的状态恢复为 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”事件 - 是否有办法在悬停后将元素颜色恢复为原始状态？

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

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

4

2 回答 2

0

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

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

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

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

于 2012-08-23T15:46:37.283 回答
0

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

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

于 2012-08-23T16:23:04.707 回答