将HTML类添加到由two.js控制的DOM元素中 [英] Add an HTML class to a DOM element controlled by two.js

问题描述

我正在尝试向该项目中的特定Two.js对象添加类和ID: http ://itpblog.evejweinberg.com/Homework/Open/(单击几次即可播放) 如果我用console.log这个词作为背景"一词，我会看到它们是two.js对象，但似乎无法使用CSS或jquery向它们添加类/ID.

I'm trying to add a class and ID to specific Two.js objects in this project: http://itpblog.evejweinberg.com/Homework/Open/ (click a few times to play) If I console.log the word 'background' I see that these are two.js objects but I can't seem to use css or jquery to add a class/ID to them.

感谢您的帮助！

我什至尝试将其添加到整个项目中，但这没有用:

I even tried adding it to the whole project but that did not work:

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

推荐答案

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

two.js entities are not DOM elements themselves, but each Scene, Group, or Polygon contains at least one reference to the DOM element that gets drawn when the entity is changed. To reference various DOM elements use the following syntaxes:

// 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.

Here's a screenshot showing all three commands in an actual app along with the outcome of each, with one additional command add a class to the shape that was targeted. The syntax of the last command differs but I omitted the var statements so that the console would display the result instead of outputting undefined.

如果要为单个形状创建自定义HTML ID，请在初始呈现形状之前使用.id设置器.由于大多数代码都是刚刚设置的，因此我提供了一个我自己的项目之一的实际示例.在该代码段中，shape变量包含Two.Polygon的新实例，因此在首次调用two.update()绘制形状之前调用shape.id = 'something-unique'会导致具有自定义HTML ID的DOM元素. 这是一个不完整的设置代码块，其中显示了如何设置ID:

If you'd like to create custom HTML IDs for individual shapes, use the .id setter before the initial render of your shape. Since most of this code is just setup, I offer a practical example on one of my own projects. In that snippet, a shape variable holds a new instance of Two.Polygon so calling shape.id = 'something-unique' before calling two.update() to draw the shape for the first time results in a DOM element with a custom HTML ID. Here is an incomplete block of setup code showing how to set the 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();

这篇关于将HTML类添加到由two.js控制的DOM元素中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！