通过ID选择Kineticjs路径 [英] Selecting Kineticjs path by id

查看:46
本文介绍了通过ID选择Kineticjs路径的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试创建一个交互式地图,并一直在使用一些预构建的模板进行探索. 在此创建每个国家,并在鼠标悬停在它们上方时突出显示.我的问题是,当任何国家/地区将鼠标悬停在某个国家/地区时,我将如何使其突出显示另一个国家(例如巴西).因此,当突出显示一个国家时,我该如何选择另一个对象.

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>

推荐答案

您随时可以使用stage.find通过其ID获取对某个国家的引用:

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.

这篇关于通过ID选择Kineticjs路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆