1

我试图在 Raphael 中悬停一个带有路径和文本的集合。在悬停时，我只需要更改路径的颜色，而不是文本。目前我的代码不知道哪个集合被悬停并且仅更改数组的最后一个元素。

这可能是一个愚蠢的错误，但我很难过:)

这是我的小提琴：http: //jsfiddle.net/Kiaaanabal/znacD/1/

    function hexHoverIn() {
  hex.attr({fill: '#00411a'});
  console.log("Hovering Set" + i);
} //hexHoverIn

function hexHoverOut() {
  hex.attr({gradient: '70-#004838-#028151'});
} //hexHoverOut 

var hexArray = new Array();

for(var i = 0; i < hexData.length; i++) {
  var hex = paper.path(hexData[i].pathData);
  hex.attr({rotation: hexData[i].rotation, gradient: '70-#004838-#028151', stroke: '#CFD4D7', 'stroke-width': 5, cursor: 'pointer' });

  var hexText = paper.text(hexData[i].xPos, hexData[i].yPos, hexData[i].text);
  hexText.attr({fill: '#fff', 'font-size': 10, 'font-family': 'Arial', cursor: 'pointer'});

  hexArray[i] = paper.set();
  hexArray[i].push(hex, hexText).hover(hexHoverIn, hexHoverOut);
}
4

1 回答 1

0

您还没有完成实现，请查看我的小提琴http://jsfiddle.net/m4Z2K/以您想要的正确效果显示:)

我的变化主要是：

1.在你的for循环之前声明一个hashmap，这是为了保存所有的路径对象

var hexObjectMap ={}; // maintain a hashmap for all the path object

2.使用（参见Element.data() API细节文档）data()保存每个对象的id

hex.data('key',i); // save a identifier in each object

3.创建十六进制后将路径对象保存在地图中

hexObjectMap[i] = hex; // save each path object to map

4.在 hexHoverIn() 和 hexHoverOut() 中，从对象中取出 id（这将是用户当前悬停在的路径对象）

var key = this.data('key'); // retrieve the 'key' in this path object

并用hexObjectMap[key]替换hex ，因为hex只保留对您创建的最后一个路径对象的引用。

hexObjectMap[key].attr({fill:'#00411a'});

如果您有未来的问题，请告诉我，享受。

于 2013-11-06T16:38:40.853 回答