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

我试图向此项目中的特定Two.js对象添加类和ID：http://itpblog.evejweinberg.com/Homework/Open/（单击几次播放）如果我使用控制台。记录单词“背景”我看到这些是two.js对象，但我似乎无法使用css或jquery向他们添加类/ ID。将HTML类添加到由two.js控制的DOM元素

任何帮助表示赞赏！

我甚至试图将它添加到整个项目，但没有奏效：

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

来源

2016-02-15 EJW

添加[最小，完整的，并且可验证示例]（https://stackoverflow.com/help/mcve）你的问题如果你想要别人回答它。并对你面临的问题进行更具描述性的描述。 – GAntoine

该项目是rad！工作很好。 – jonobr1

omg thx！ @ jonobr1 - 意味着很多来自你的！ – EJW

two.js实体不是DOM元素本身，而是每一个场景，集团或多边形至少包含一个参考在实体更改时被绘制的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二传手前的初始渲染你的形状。由于大部分代码只是设置，I offer a practical example on one of my own projects。在该片段中，shape变量保存了Two.Polygon的新实例，因此在调用two.update()第一次绘制形状之前调用shape.id = 'something-unique'会生成具有自定义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();

来源

2016-02-16 10:07:14

除了@Chris Ruppel描述的内容之外，一旦自从实例化一个新形状之后调用了two.update。您可以直接引用该元素：例如'shape._renderer.elem'。这是'SVG'元素，可以修改为：'$（shape._renderer.elem）.addClass（'my-class'）;'。快乐的编码！ – jonobr1

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

回答

相关问题