用于描述一个 HTML 元素的类。
绘图可以使用许多元素。常见的元素包括绘图画布, 按钮、滑块、摄像头视频源等等。
所有元素都共享 p5.Element
类的方法。 它们是通过诸如 createCanvas() 和 createButton() 等函数创建的。
示例
语法
p5.Element(elt, [pInst])
参数
被包裹的 DOM 元素。
指向 p5 实例的指针。
方法
Attaches the element to a parent element.
For example, a
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.
Sets the element's ID using a given string.
Calling myElement.id()
without an argument returns its ID as a string.
Adds a class attribute to the element using a given string.
Calling myElement.class()
without an argument returns a string with its current classes.
当鼠标在元素上按下时调用一个函数。
调用 myElement.mousePressed(false)
会禁用该函数。
注意:一些移动浏览器在元素收到快速点击时也可能触发此事件。
当鼠标在元素上双击时调用一个函数。
调用 myElement.doubleClicked(false)
会禁用该函数。
当鼠标滚轮在元素上滚动时调用一个函数。
回调函数,fxn
,会传递一个 event
对象。 event
有 两个数字属性,deltaY
和 deltaX
。 如果鼠标滚轮向用户远离方向旋转,event.deltaY
为负。如果向用户方向旋转,event.deltaY
为正。 如果鼠标滚轮向右移动,event.deltaX
为正。 如果鼠标滚轮向左移动,event.deltaX
为负。
调用 myElement.mouseWheel(false)
会禁用该函数。
当鼠标滚轮在元素上滚动时调用一个函数。
回调函数,fxn
,会传递一个 event
对象。 event
有 两个数字属性,deltaY
和 deltaX
。 如果鼠标滚轮向用户远离方向旋转,event.deltaY
为负。如果向用户方向旋转,event.deltaY
为正。 如果鼠标滚轮向右移动,event.deltaX
为正。 如果鼠标滚轮向左移动,event.deltaX
为负。
调用 myElement.mouseWheel(false)
会禁用该函数。
当鼠标在元素上释放时调用一个函数。
调用 myElement.mouseReleased(false)
会禁用该函数。
注意:一些移动浏览器在元素收到快速点击时也可能触发此事件。
当鼠标在元素上点击并释放时调用一个函数。
调用 myElement.mouseReleased(false)
会禁用该函数。
注意:一些移动浏览器在元素收到快速点击时也可能触发此事件。
当鼠标在元素上移动时调用一个函数。
调用 myElement.mouseMoved(false)
会禁用该函数。
当鼠标移动到元素上时调用一个函数。
调用 myElement.mouseOver(false)
会禁用该函数。
当鼠标从元素上移开时调用一个函数。
调用 myElement.mouseOut(false)
会禁用该函数。
当元素被触碰时调用一个函数。
调用 myElement.touchStarted(false)
会禁用该函数。
注意:触碰功能仅在移动设备上工作。
当用户触碰元素并移动时调用一个函数。
调用 myElement.touchMoved(false)
会禁用该函数。
注意:触碰功能仅在移动设备上工作。
当用户停止触碰元素时调用一个函数。
调用 myElement.touchMoved(false)
会禁用该函数。
注意:触碰功能仅在移动设备上工作。
当用户将文件拖拽到元素上时调用一个函数。
调用 myElement.dragOver(false)
会禁用该函数。
当用户将文件从元素上拖离时调用一个函数。
调用 myElement.dragLeave(false)
会禁用该函数。
为元素添加一个类。
从元素上移除一个类。
检查一个类是否已经应用到元素上。
切换一个类是否应用到元素上。
将元素作为另一个元素的子元素附加。
myElement.child()
接受一个字符串 ID、DOM 节点或 p5.Element。例如, myElement.child(otherElement)
。如果没有提供参数,返回一个 子 DOM 节点的数组。
将元素居中,可以是垂直的、水平的或两者同时居中。
center()
会根据元素的父元素或者如果元素没有父元素则根据页面的 body 来居中元素。
如果没有传递参数,如 myElement.center()
,元素将在垂直和水平同时对齐。
设置元素的内部 HTML,替换任何现有的 HTML。
第二个参数,append
,是可选的。如果传递了 true
,如 "myElement.html('hi', true)
,则 HTML 会被追加而不是" 替换现有的 HTML。
如果没有传递参数,如 myElement.html()
,则返回元素的内部 HTML。
设置元素的位置。
前两个参数,x
和 y
,设置元素相对于网页左上角的位置。
第三个参数,positionType
,是可选的。它设置元素的 定位方案。 "positionType
是一个字符串,可以是 'static'
、'fixed'
、" "'relative'
、'sticky'
、'initial'
或 'inherit'
。
如果没有传递参数,如 myElement.position()
,该方法返回元素的位置为一个对象,如 { x: "0, y: 0 }
。
通过添加一个 CSS 声明来为元素应用一个样式。
第一个参数,property
,是一个字符串。如果传递了一个样式 "属性的名称,如 myElement.style('color')
,方法返回" 当前值为一个字符串或 null
如果它尚未被设置。如果传递了 property:style
字符串,如 "myElement.style('color":"deeppink')
,方法设置样式" property
为 value
。
第二个参数,value
,是可选的。它设置属性的值。 value
可以是一个字符串,如 "myElement.style('color', 'deeppink')
,或一个" p5.Color 对象,如 "myElement.style('color', myColor)
。
为元素添加一个 属性。
此方法适用于高级任务。大多数常用属性, 如 id
,可以使用它们的专用方法设置。例如, "nextButton.id('next')
设置元素的 id
" 属性。调用 "nextButton.attribute('id', 'next')
有相同的效果。
第一个参数,attr
,是属性的名称为一个字符串。调用 "myElement.attribute('align')
返回属性的当前值为一个" 字符串或 null
如果它尚未被设置。
第二个参数,value
,是可选的。它是一个字符串用于设置 属性的值。例如,调用 "myElement.attribute('align', 'center')
设置元素的水平" 对齐为 center
。
从元素中移除一个属性。
参数 attr
是属性的名称为一个字符串。例如, "调用 myElement.removeAttribute('align')
移除其" align
属性如果它已经被设置。
返回或设置元素的值。
调用 myElement.value()
返回元素的当前值。
参数,value
,是一个可选的数字或字符串。如果提供, 如 myElement.value(123)
,它被用来设置元素的值。
显示当前元素。
隐藏当前元素。
设置元素的宽度和高度。
调用 myElement.size()
而不传递参数时,返回元素大小为一个对象,包含属性 width
和 height
。例如, { 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()
。
移除元素,停止所有音频/视频流,并移除所有回调函数。
使元素可拖动。
参数,elmnt
,是可选的。如果传递了另一个 p5.Element 对象,如 myElement.draggable(otherElement)
,则另一个元素将变得可拖动。