如何使用Konva框架与FOR循环创建命名为Line_+i的N条线条？

嘿，我懂你想实现的需求——用Konva配合for循环批量生成n条命名格式为Line_${i}的线条对吧？之前用eval赋值的路子确实走不通，因为JavaScript里没法直接这么动态声明变量名。给你两种实用的解决方案，都是行业里常用的写法：

用一个对象来作为“容器”，把每条线条以Line_i为键名存进去，后续想访问哪条线直接通过对象的键就能拿到，非常灵活。

// 先创建空对象用来存放所有线条
const lineCollection = {};
const lineCount = 5; // 这里改成你需要的线条数量

for (let i = 0; i < lineCount; i++) {
  // 实例化Konva线条，这里可以根据需求调整参数
  const currentLine = new Konva.Line({
    points: [20 + i*30, 30, 20 + i*30, 150], // 让每条线横向错开，避免重叠
    stroke: '#333',
    strokeWidth: 2,
    lineCap: 'round'
  });

  // 把线条存入对象，键名就是"Line_"+i
  lineCollection[`Line_${i}`] = currentLine;

  // 记得把线条添加到Konva的层里（假设你已经创建了layer实例）
  layer.add(currentLine);
}

// 后续访问示例：获取第3条线（i从0开始计数）
console.log(lineCollection.Line_2);
// 或者用字符串键访问
console.log(lineCollection['Line_0']);

如果不需要严格的Line_i变量名，只是要批量生成并能便捷访问，数组会更简洁。要是需要标识每条线，还可以给线条设置name属性：

const linesArray = [];
const lineCount = 5;

for (let i = 0; i < lineCount; i++) {
  const currentLine = new Konva.Line({
    points: [20 + i*30, 30, 20 + i*30, 150],
    stroke: '#333',
    strokeWidth: 2,
    name: `Line_${i}` // 给线条设置name属性，方便后续查找
  });

  linesArray.push(currentLine);
  layer.add(currentLine);
}

// 访问方式1：按数组索引直接取
console.log(linesArray[1]); // 获取第2条线

// 访问方式2：通过Konva的findByName方法从层里查找
const targetLine = layer.findOne(`.Line_3`);
console.log(targetLine);

为啥之前的eval写法不行？ #

你之前写的var eval("Line_" + i) = new Konva.Line()本身语法就错误，eval是个函数，不能这么用。就算改成eval(var Line_${i} = new Konva.Line())能运行，这种写法也极度不推荐——不仅代码可读性差，还容易造成全局变量污染，甚至有安全风险，完全没必要用这种野路子~

内容的提问来源于stack exchange，提问作者R.Mus