我可以将 class 添加到动态创建的 two.js 元素吗？

Question

我正在使用下面显示的代码在包装器 (div) 绘制形状内创建 46 个小圆圈；

let elem = document.getElementById('draw-shapes');
let params = { width: 1024, height: 768 };
let two = new Two(params).appendTo(elem);

for (let i = 1; i < 47; i++) {
  circle = two.makeCircle(x, y, radius);
  circle.fill = 'green';
  circle.stroke = 'white';
  circle.linewidth = 1;
  circle.id = i;
}

所有绘图均使用 Two.js 库制作。我在文档中读到我可以更改创建的元素的 id，但我还需要为每个元素分配一个 class。我已经尝试了从纯 js setAttribute 到 jQuery .attr 和 .addClass 方法的所有方法，但是其中 none 有效，所以我开始怀疑这是否有可能做到？如果有人知道方法，请告诉我方法。谢谢

Answer 1

没有内部实用程序或属性可以到达每个 Two 元素的 DOM 节点。

但是您指定的 id 确实被添加为 two-<specified-id> 到实际节点。

所以你可以正常使用document.getElementById。

所以在你的情况下

let elem = document.getElementById('draw-shapes');
let params = {
  width: 300,
  height: 300
};
let two = new Two(params).appendTo(elem);

for (let i = 1; i < 20; i++) {
  const circle = two.makeCircle(i * 10, i * 10, 40);
  circle.fill = 'green';
  circle.stroke = 'white';
  circle.linewidth = 1;
  circle.id = `two-circle-${i}`;
}
two.update();

// add classname to every fifth element;
for (let i = 1; i < 20; i += 5) {
  const circleNode = document.getElementById(`two-circle-${i}`);
  circleNode.classList.add('classname');

  circleNode.addEventListener('mouseover', function() {
    const path = two.scene.getById(this.id)
    path.scale = 1.2;
    two.update();
  });

  circleNode.addEventListener('mouseout', function() {
    const path = two.scene.getById(this.id)
    path.scale = 1;
    two.update();
  });
}

.classname {
  stroke-width: 5;
  stroke: red;
  fill:yellow;
  cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.js"></script>

<div id="draw-shapes"></div>

我可以将 class 添加到动态创建的 two.js 元素吗？

Can I add class to dynamically created two.js element?

javascript

two.js