javascript - 将 HTML 类添加到由 two.js 控制的 DOM 元素

Question

我正在尝试将类和 ID 添加到此项目中的特定 Two.js 对象:http://itpblog.evejweinberg.com/Homework/Open/ (点击几次播放)如果我在 console.log 中记录“背景”一词，我会看到这些是两个 .js 对象，但我似乎无法使用 css 或 jquery 向它们添加类/ID。

感谢任何帮助!

我什至尝试将它添加到整个项目，但没有成功:

$(document.body).addClass("dropshadow");

Answer 1

two.js 实体本身不是 DOM 元素，但每个 Scene、Group 或 Polygon 至少包含一个对 DOM 元素的引用，该元素在实体更改时被绘制。要引用各种 DOM 元素，请使用以下语法:

// Initialize two.js and attach to a dom element referenced by `canvas`
var two = new Two(params).appendTo(canvas);

// Two.Scene
var my_scene = two.renderer.domElement;

// Two.Group
var my_group = document.getElementById(two.scene.id);

// Two.Polygon — requires knowing the ID by means of your custom app logic.
var my_poly  = document.getElementById(my_poly_html_id);
my_poly.classList.add('my-class');

这是一个屏幕截图，显示了实际应用程序中的所有三个命令以及每个命令的结果，另外一个命令将一个类添加到目标形状。最后一个命令的语法不同，但我省略了 var 语句，以便控制台显示结果而不是输出 undefined。

如果您想为单个形状创建自定义 HTML ID，请在初始渲染形状之前使用 .id setter。由于大部分代码只是设置，I offer a practical example on one of my own projects .在该片段中，shape 变量包含 Two.Polygon 的新实例，因此在调用 shape.id = 'something-unique' 之前调用 two.update() 第一次绘制形状会生成具有自定义 HTML ID 的 DOM 元素。 这是一个不完整的设置代码块，展示了如何设置 ID:

// Create new shape
var shape = two.makeRectangle(START_X, START_Y, START_WIDTH, START_HEIGHT);

// Set custom ID
shape.id = 'shape-' + Math.random(10000000);

// Draw shape for first time.
two.update();