JavaScript:Библиотеки/p5.dom/Класс p5.Element
Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.
|
Черновик |
Класс p5.Element [1]
Описание
Это базовый класс для всех элементов, добавляемых в скетч, включая холст, буферы графики и другие HTML-элементы. Методы, окрашенные в синий цвет, являются частью ядра p5.js, а методы, окрашенные в коричневый цвет – это методы библиотеки p5.dom. Обращение к этому классу не происходит напрямую, но объекты p5.Element создаются функциями createCanvas() и createGraphics(), а в библиотеке p5.dom они создаются функциями createDiv(), createImg(), createInput() и т.д.
Поля
- elt – это HTML-элемент, обернутый объектом p5.Element. На нем можно вызывать все стандартные HTML-функции.
Методы
- parent() – присоединяет элемент к заданному родительскому элементу. Это способ задать контейнер для элемента. В качестве параметра принимает строковый ID, DOM-узел и объект p5.Element. Если родительский элемент не задан, просто возвращает родительский узел. Более подробно о позиционировании холста читайте в этом руководстве.
- id() – задает ID элемента. Если ID не указан, просто возвращает текущий ID элемента.
- class() – присваивает элементу заданный класс. Если класса не задано, просто возвращает строку, содержащую текущий класс (или классы) элемента.
- mousePressed() – вызывается каждый раз при нажатии кнопки мыши по элементу. Можно использовать для того, чтобы привязывать слушателей событий к элементам.
- doubleClicked() – вызывается каждый раз при двойном нажатии кнопкой мыши по элементу. Можно использовать для того, чтобы привязывать слушателей событий к действиям и элементам.
- mouseWheel() – вызывается каждый раз после прокручивания колесика мыши над элементом. Можно использовать для того, чтобы привязывать слушателей событий к элементам.
- mouseReleased() – вызывается каждый раз после отпускания кнопки мыши над элементом. Можно использовать для того, чтобы привязывать слушателей событий к элементам.
- mouseClicked() – вызывается каждый раз после нажатия и отпускания кнопки мыши над элементом. Можно использовать, чтобы привязывать слушателей событий к элементам.
- mouseMoved() – вызывается каждый раз, когда мышка двигается над элементом. Можно использовать, чтобы привязывать слушателей событий к элементам.
- mouseOver() – вызывается каждый раз после того, как курсор мыши помещается над элементом. Можно использовать, чтобы привязывать слушателей событий к элементам.
- changed() – вызывается, когда меняется значение элемента. Можно использовать, чтобы привязывать слушателей событий к элементам.
- input() – вызывается, когда при помощи элемента были обнаружены какие-либо данные, введенные пользователем. Этот обработчик входящих событий часто используется для обнаружения нажатий по клавишам (при использовании элемента <input>) или изменении позиции ползунка. Можно использовать, чтобы привязывать слушателей событий к элементам.
- mouseOut() – вызывается каждый раз после отдаления курсора мыши от элемента. Можно использовать, чтобы привязывать слушателей событий к элементам.
- touchStarted() – вызывается каждый раз после зарегистрированного касания. Можно использовать, чтобы привязывать слушателей событий к элементам.
- touchMoved() – вызывается каждый раз после движения по тачпаду. Можно использовать, чтобы привязывать слушателей событий к элементам.
- touchEnded() – вызывается каждый раз после зарегистрированного касания. Можно использовать, чтобы привязывать слушателей событий к элементам.
- dragOver() – вызывается каждый раз, когда пользователь помещает файл над элементом. Можно использовать, чтобы привязывать слушателей событий к элементам.
- dragLeave() – вызывается каждый раз, когда перетаскиваемый файл покидает область над элементом. Можно использовать, чтобы привязывать слушателей событий к элементам.
- drop() – вызывается один раз, когда пользователь помещает файл над элементом, а потом отпускает кнопку мыши, «сбрасывая» его. Требуется функция обратного вызова, параметром которой будет «сбрасываемый» файл. Опционально можно воспользоваться двумя функциями обратного вызова: первая (которая необходима в любом случае) будет запускаться после загрузки «сброшенного» файла, а вторая (опциональная) – только после сброса файла (или файлов).
- addClass() – присваивает элементу заданный класс.
- removeClass() – снимает присваивание класса элементу.
- child() – присоединяет дочерний элемент к родительскому элементу. Дочерний элемент можно указать в виде строкового ID, DOM-узла или объекта p5.Element. Если никакого параметра не указано, функция вернет массив дочерних DOM-узлов.
- center() – центрирует объект p5.Element по вертикальной или горизонтальной оси (или по обеим осям сразу) относительно его родительского элемента или, если родительского элемента нет, относительно <body>. Если параметра не задано, центрируется одновременно вертикально и горизонтально.
- html() – если указан один параметр, задает для элемента дочерний HTML-элемент, попутно удаляя все существующие дочерние HTML-элементы. Если указано два параметра, и второй параметр – это «true», то эта функция добавляет заданный HTML-элемент к существующему дочернему HTML-элементу, не удаляя его. Если никаких параметров не указано, возвращает текущий дочерний HTML-элемент.
- position() – задает позицию элемента относительно координат (0, 0) окна. По сути, манипулирует свойствами position (задает абсолютное позиционирование, т.е. absolute), left и top DOM-объекта Style. Если никаких параметров не указано, возвращает координаты X и Y элемента в объекте.
- style() – присваивает заданное значение (или значения) заданному свойству DOM-объекта Style. Свойство – это первый параметр, а его значения – второй, третий и так далее параметры. Если указан только один параметр, функция style() возвращает лишь значение заданного свойства, но если этот параметр задан с помощью синтаксиса CSS ('text-align:center'), то style() обработает его так, будто это несколько параметров. Кроме того, style() совместима со 2-ой и 3-ей версиями CSS. Если первый параметр – это 'rotate', 'translate' или 'position', значения последующих параметров должны иметь тип number. То есть это должно выглядеть примерно так: ('translate', 10, 100, 50).
- attribute() – добавляет элементу новый атрибут или меняет значение уже существующего атрибута. Если значения не указано, возвращает значение заданного атрибута, или, если атрибут не задан, возвращает null.
- removeAttribute() – удаляет атрибут заданного элемента.
- value() – либо возвращает значение элемента (если никаких параметров не задано), либо задает значение этого элемента.
- show() – показывает текущий элемент. По сути, присваивает свойству display DOM-объекта Style значение block.
- hide() – скрывает текущий элемент. По сути, присваивает свойству display DOM-объекта Style значение none.
- size() – задает ширину и высоту элемента. Можно задать автоматическую настройку ширины/высоты, указав в каждом из этим параметров AUTO (или только в одном из них). Если никаких параметров не задано, возвращает ширину и высоту элемента в объекте.
- remove() – удаляет элемент и снимает регистрацию всех слушателей событий.
