javascript - Kinetic JS 火焰路径事件

Question

我根据很棒的教程 here 使用 Kinetic JS 开发了一个交互式 map .

我想要实现的是在 map 下方显示 map 上的工作人员列表，然后发生一个事件，如果访问者从姓名列表中单击此人的姓名，则工作人员在 map 上的位置是突出显示。

我已经为此工作了几个小时，试图找到最佳解决方案，现在我会选择一个可行的解决方案。

我已经向 li 项目添加了一个事件监听器，它可以正确触发:

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

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

我遇到了this post提到 stage.find()，但是当我使用它时，它似乎没有从我的 map 中找到任何项目。

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();
});

然后将路径添加到 map 图层:

mapLayer.add(path)

我创建了一个JSFiddle (这是我第一次，所以希望它能成功!)。

Answer 1

首先，大小写错误:

stage.find  // not stage.Find

当您在 .find 键中使用井号标签 (#) 时，KineticJS 会搜索节点 id。

因此，当您创建每个路径(房间)时，您应该为其分配一个节点 ID(例如“Room1”):

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

然后你的.find就会成功:

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