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

Question

我正在尝试将类和ID添加到此项目中的特定Two.js对象：http://itpblog.evejweinberg.com/Homework/Open/（单击几次以进行播放） 如果我在console.log中使用'background'这个词，我看到这些是两个.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。 这是一个不完整的设置代码块，显示了如何设置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();