参考 p5.Element

p5.Element

用于描述一个 HTML 元素的类。

绘图可以使用许多元素。常见的元素包括绘图画布, 按钮、滑块、摄像头视频源等等。

所有元素都共享 p5.Element 类的方法。 它们是通过诸如 createCanvas()createButton() 等函数创建的。

示例

语法

p5.Element(elt, [pInst])

参数

elt
HTMLElement:

被包裹的 DOM 元素。

pInst
P5:

指向 p5 实例的指针。

方法

parent

Attaches the element to a parent element.

For example, a

element may be used as a box to hold two pieces of text, a header and a paragraph. The
is the parent element of both the header and paragraph.

The parameter parent can have one of three types. parent can be a string with the parent element's ID, as in myElement.parent('container'). It can also be another p5.Element object, as in myElement.parent(myDiv). Finally, parent can be an HTMLElement object, as in myElement.parent(anotherElement).

Calling myElement.parent() without an argument returns the element's parent.

id

Sets the element's ID using a given string.

Calling myElement.id() without an argument returns its ID as a string.

class

Adds a class attribute to the element using a given string.

Calling myElement.class() without an argument returns a string with its current classes.

mousePressed

当鼠标在元素上按下时调用一个函数。

调用 myElement.mousePressed(false) 会禁用该函数。

注意:一些移动浏览器在元素收到快速点击时也可能触发此事件。

doubleClicked

当鼠标在元素上双击时调用一个函数。

调用 myElement.doubleClicked(false) 会禁用该函数。

path: p5.Element/doubleClicked mouseWheel: description: >

当鼠标滚轮在元素上滚动时调用一个函数。

回调函数,fxn,会传递一个 event 对象。 event 有 两个数字属性,deltaYdeltaX。 如果鼠标滚轮向用户远离方向旋转,event.deltaY 为负。如果向用户方向旋转,event.deltaY 为正。 如果鼠标滚轮向右移动,event.deltaX 为正。 如果鼠标滚轮向左移动,event.deltaX 为负。

调用 myElement.mouseWheel(false) 会禁用该函数。

mouseWheel

当鼠标滚轮在元素上滚动时调用一个函数。

回调函数,fxn,会传递一个 event 对象。 event 有 两个数字属性,deltaYdeltaX。 如果鼠标滚轮向用户远离方向旋转,event.deltaY 为负。如果向用户方向旋转,event.deltaY 为正。 如果鼠标滚轮向右移动,event.deltaX 为正。 如果鼠标滚轮向左移动,event.deltaX 为负。

调用 myElement.mouseWheel(false) 会禁用该函数。

mouseReleased

当鼠标在元素上释放时调用一个函数。

调用 myElement.mouseReleased(false) 会禁用该函数。

注意:一些移动浏览器在元素收到快速点击时也可能触发此事件。

mouseClicked

当鼠标在元素上点击并释放时调用一个函数。

调用 myElement.mouseReleased(false) 会禁用该函数。

注意:一些移动浏览器在元素收到快速点击时也可能触发此事件。

mouseMoved

当鼠标在元素上移动时调用一个函数。

调用 myElement.mouseMoved(false) 会禁用该函数。

mouseOver

当鼠标移动到元素上时调用一个函数。

调用 myElement.mouseOver(false) 会禁用该函数。

mouseOut

当鼠标从元素上移开时调用一个函数。

调用 myElement.mouseOut(false) 会禁用该函数。

touchStarted

当元素被触碰时调用一个函数。

调用 myElement.touchStarted(false) 会禁用该函数。

注意:触碰功能仅在移动设备上工作。

touchMoved

当用户触碰元素并移动时调用一个函数。

调用 myElement.touchMoved(false) 会禁用该函数。

注意:触碰功能仅在移动设备上工作。

touchEnded

当用户停止触碰元素时调用一个函数。

调用 myElement.touchMoved(false) 会禁用该函数。

注意:触碰功能仅在移动设备上工作。

dragOver

当用户将文件拖拽到元素上时调用一个函数。

调用 myElement.dragOver(false) 会禁用该函数。

dragLeave

当用户将文件从元素上拖离时调用一个函数。

调用 myElement.dragLeave(false) 会禁用该函数。

addClass

为元素添加一个类。

removeClass

从元素上移除一个类。

hasClass

检查一个类是否已经应用到元素上。

toggleClass

切换一个类是否应用到元素上。

child

将元素作为另一个元素的子元素附加。

myElement.child() 接受一个字符串 ID、DOM 节点或 p5.Element。例如, myElement.child(otherElement)。如果没有提供参数,返回一个 子 DOM 节点的数组。

center

将元素居中,可以是垂直的、水平的或两者同时居中。

center() 会根据元素的父元素或者如果元素没有父元素则根据页面的 body 来居中元素。

如果没有传递参数,如 myElement.center(),元素将在垂直和水平同时对齐。

html

设置元素的内部 HTML,替换任何现有的 HTML。

第二个参数,append,是可选的。如果传递了 true,如 "myElement.html('hi', true),则 HTML 会被追加而不是" 替换现有的 HTML。

如果没有传递参数,如 myElement.html(),则返回元素的内部 HTML。

position

设置元素的位置。

前两个参数,xy,设置元素相对于网页左上角的位置。

第三个参数,positionType,是可选的。它设置元素的 定位方案。 "positionType 是一个字符串,可以是 'static''fixed'、" "'relative''sticky''initial''inherit'

"

如果没有传递参数,如 myElement.position(),该方法返回元素的位置为一个对象,如 { x: "0, y: 0 }

"
style

通过添加一个 CSS 声明来为元素应用一个样式。

第一个参数,property,是一个字符串。如果传递了一个样式 "属性的名称,如 myElement.style('color'),方法返回" 当前值为一个字符串或 null 如果它尚未被设置。如果传递了 property:style 字符串,如 "myElement.style('color":"deeppink'),方法设置样式" propertyvalue

第二个参数,value,是可选的。它设置属性的值。 value 可以是一个字符串,如 "myElement.style('color', 'deeppink'),或一个" p5.Color 对象,如 "myElement.style('color', myColor)

"
attribute

为元素添加一个 属性

此方法适用于高级任务。大多数常用属性, 如 id,可以使用它们的专用方法设置。例如, "nextButton.id('next') 设置元素的 id" 属性。调用 "nextButton.attribute('id', 'next') 有相同的效果。

"

第一个参数,attr,是属性的名称为一个字符串。调用 "myElement.attribute('align') 返回属性的当前值为一个" 字符串或 null 如果它尚未被设置。

第二个参数,value,是可选的。它是一个字符串用于设置 属性的值。例如,调用 "myElement.attribute('align', 'center') 设置元素的水平" 对齐为 center

removeAttribute

从元素中移除一个属性。

参数 attr 是属性的名称为一个字符串。例如, "调用 myElement.removeAttribute('align') 移除其" align 属性如果它已经被设置。

value

返回或设置元素的值。

调用 myElement.value() 返回元素的当前值。

参数,value,是一个可选的数字或字符串。如果提供, 如 myElement.value(123),它被用来设置元素的值。

show

显示当前元素。

hide

隐藏当前元素。

size

设置元素的宽度和高度。

调用 myElement.size() 而不传递参数时,返回元素大小为一个对象,包含属性 widthheight。例如, { width: "20, height: 10 }

"

第一个参数,width,是可选的。它是一个数字用于设置元素的宽度。调用 myElement.size(10)

"

第二个参数,'height,也是可选的。它是一个数字用于设置元素的高度。例如,调用"myElement.size(20, 10)` 将元素的宽度设置为20像素,高度设置为10像素。

常量 AUTO 可以用来一次调整一个维度,同时保持宽高比,即 width / height。例如,考虑一个宽200像素,高100像素的元素。调用 myElement.size(20, AUTO) 将宽度设置为20像素,高度 设置为10像素。

注意:对于需要加载数据的元素,如图像,请 等数据加载完成后再调用 myElement.size()

remove

移除元素,停止所有音频/视频流,并移除所有回调函数。

drop

当用户在元素上放置文件时调用一个函数。

第一个参数,callback,是一旦文件加载就调用的函数。 回调函数应该有一个参数,file,是一个 p5.File 对象。如果用户在 元素上放置多个文件,callback,对每个文件调用一次。

第二个参数,fxn,是当浏览器检测到 一个或多个放置文件时调用的函数。回调函数应该有一个 参数,event,是一个 DragEvent

draggable

使元素可拖动。

参数,elmnt,是可选的。如果传递了另一个 p5.Element 对象,如 myElement.draggable(otherElement),则另一个元素将变得可拖动。

Notice any errors or typos? Please let us know. Please feel free to edit src/core/p5.Element.js and open a pull request!

相关参考