Question

我使用Kinetic JS开发了一个基于精彩教程here的交互式地图。

我想要实现的是在地图下方列出地图上的工作人员列表，然后有一个事件，如果访问者从名单中点击该人的姓名，那么地图上的工作人员位置是突出显示。

我一直在努力寻找最佳解决方案几个小时，现在我愿意找到一个有效的解决方案。

我已经为li项添加了一个事件监听器，它正确触发：

document.getElementById(stfArr[i]).addEventListener('click', function () { alert("true"); }, false);

但我想不出如何调用路径对象。

我遇到this post提到stage.find（），但是当我使用它时，它似乎没有从我的地图中找到任何项目。

var room = stage.Find("#Room1")[0];

我有一个JSON，它是对象的对象，通过for循环处理，处理JSON文件中的每个位置：

var path = new Kinetic.Path({
  data: c,
  fill: '#fff',
  stroke: '#555',
  strokeWidth: 1
});

每条路径都有一些事件：

path.on('mouseover', function () {
  this.setFill('#008000');
  this.setOpacity(1);
  mapLayer.drawScene();
});

path.on('mouseout', function () {
  this.setFill('#fff');
  // this.setAlpha(0.1);
  mapLayer.drawScene();
  tooltipBackground.hide();
  tooltip.hide();
  tooltipLayer.drawScene();
});

然后将路径添加到地图图层：

mapLayer.add(path)

我创建了一个JSFiddle（这是我的第一次，所以希望它有效！）。

Answer 1

首先，大写拼写错误：

stage.find  // not stage.Find

当您在.find键中使用＃标签时，KineticJS会搜索节点id。

因此，当您创建每个路径（房间）时，您应该为其分配一个节点ID（例如＆＃34; Room1＆＃34;）：

var path = new Kinetic.Path({
  id:"Room1",
  data: c,
  fill: '#fff',
  stroke: '#555',
  strokeWidth: 1
});

然后你的.find会成功：

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

Kinetic JS Fire Paths活动

1 个答案: