Question

我正在尝试创建一个交互式地图，并一直在探索一些预建模板。在这个过程中，每个国家都会被创建并在鼠标悬停时突出显示。我的问题是，当任何国家有鼠标悬停时，我将如何强调它突出另一个国家如巴西。因此，当国家/地区突出显示时，如何选择其他对象。

<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script src="http://riskmap.filkor.org/paths.js"></script>
<script src="http://riskmap.filkor.org/gameData.js"></script>
<script defer="defer">
  var stage = new Kinetic.Stage({
    container: 'container',
    width: 1920,
    height: 1080    
  });
  var mapLayer = new Kinetic.Layer({
    y: 20,
    scale: 1
  });
  var topLayer = new Kinetic.Layer({
    y: 20,
    scale: 1    
  });

  /*
   * loop through country data 
   */
  for(id in TerritoryNames) {
    var path = new Kinetic.Path({
      data: TerritoryPathData[id].path,
      fill: '#eee',
      stroke: '#555',
      strokeWidth: 1,
      id: id
    });

    path.on('mouseover', function() {

      this.setFill('#111');
      this.moveTo(topLayer);
      topLayer.drawScene();
    }); 

    path.on('mouseout', function() {
      this.setFill('#eee');
      this.moveTo(mapLayer);
      topLayer.draw();
    });

    mapLayer.add(path);
  }

  stage.add(mapLayer);
  stage.add(topLayer);

</script>

Answer 1

您可以随时使用stage.find

通过其ID获取对某个国家/地区的引用

var Brazil = stage.find("#Brazil")[0];

然后使用该引用来突出显示巴西。

通过id选择Kineticjs路径

1 个答案: