將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元素

回答

相關問題