如何让数组中的JS对象返回自身索引？Konva画布节点开发需求

我来帮你搞定这个需求！先梳理下原代码里的几个小问题，再一步步实现点击矩形返回索引的功能，为你的节点连线软件打好基础。

原代码的核心问题 #

1. createModule() 函数没有返回创建的矩形对象，导致 rectArray.push(newRect) 实际上存的是 undefined，数组根本没正确存储节点。
2. 点击矩形时事件会冒泡到背景的 clickRect，导致点击节点时会意外创建新节点。
3. 文本元素被重复添加到图层，应该只初始化一次，之后更新内容即可。

修正后的完整代码 #

var width = window.innerWidth - 50;
var height = window.innerHeight - 100;
var rectArray = [];
var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});
var layer = new Konva.Layer();
stage.add(layer);

// 可点击的背景画布
var clickRect = new Konva.Rect({
  x: 0,
  y: 0,
  width: width,
  height: height,
  stroke: 'black',
  strokeWidth: 2,
  listening: true
});
layer.add(clickRect);

// 信息文本（只初始化一次）
var text = new Konva.Text({
  x: 10,
  y: 10,
  fontFamily: 'Calibri',
  fontSize: 24,
  text: '当前节点数量：0',
  fill: 'black'
});
layer.add(text);

// 点击背景创建节点
clickRect.on('click', function() {
  var newRect = createModule();
  rectArray.push(newRect);
  // 更新节点数量文本
  text.setText('当前节点数量：' + rectArray.length);
  layer.draw();
});

// 创建节点模块的函数
function createModule() {
  var mousePos = stage.getPointerPosition();
  var rect = new Konva.Rect({
    x: mousePos.x - 25, // 让节点中心对齐鼠标位置，更友好
    y: mousePos.y - 25,
    width: 50,
    height: 50,
    stroke: 'black',
    strokeWidth: 2,
    fill: '#f0f0f0', // 给节点加个填充色，区分背景
    draggable: true
  });

  // 点击节点时返回自身在数组中的索引
  rect.on('click', function(evt) {
    // 阻止事件冒泡到背景，避免误创建新节点
    evt.cancelBubble = true;
    // 查找当前节点在数组中的索引
    var nodeIndex = rectArray.indexOf(this);
    alert('我是节点 #' + (nodeIndex + 1) + '，数组索引：' + nodeIndex);
    // 这里可以把nodeIndex传递给你的连线逻辑，作为节点ID使用
    console.log('节点ID（数组索引）：', nodeIndex);
  });

  layer.add(rect);
  stage.draw();
  // 必须返回创建的rect对象，这样数组才能正确存储
  return rect;
}

stage.draw();

<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<p id="display1">-</p>

关键改进点说明 #

• 正确存储节点：createModule() 现在返回创建的矩形对象，确保 rectArray 能真实存储每个节点实例。
• 阻止事件冒泡：在节点的点击事件里添加 evt.cancelBubble = true，避免点击节点时触发背景的创建新节点逻辑。
• 索引获取：使用 rectArray.indexOf(this) 直接获取当前节点在数组中的索引，这个索引就可以作为你的节点唯一ID，用于后续的连线逻辑。
• 优化用户体验：让节点中心对齐鼠标位置，添加填充色区分背景，文本只初始化一次并实时更新节点数量。

后续扩展建议（针对节点连线软件） #

• 给每个节点添加输入/输出端口：可以在节点矩形上添加小圆形作为端口，同样给端口绑定事件，记录所属节点的索引。
• 实现连线逻辑：监听端口的拖拽事件，创建Konva.Line对象连接两个端口，存储连线的起点和终点节点索引。
• 节点自定义属性：可以给每个节点添加自定义数据，比如 rect.setAttr('nodeId', nodeIndex)，后续获取ID更直接，避免数组索引变化导致的问题（如果有删除节点的需求，数组索引会变动，建议用唯一ID而非数组索引）。

内容的提问来源于stack exchange，提问作者alkopop79