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();