Selecting Kineticjs path by id

问题

I am trying to create an interactive map and have been exploring with some of the prebuilt templates. In this each country is created and highlights when the mouse is over them. My question is how would I go about making it highlight another country such a Brazil when any country has a mouseover. Thus how do I go about selecting another object when a country is highlighted.

<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>

回答1:

At any time, you can get a reference to a country through its id using stage.find:

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

Then use that reference to highlight Brazil.

来源：https://stackoverflow.com/questions/20895614/selecting-kineticjs-path-by-id

标签

javascript

kineticjs