--- metadata: - name: generator content: Diplodoc Platform v5.39.1 alternate: - https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.Image.md - https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/layout.Image.md --- # layout.Image Расширяет [ILayout](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md). Класс для создания макетов, содержащих картинку. [Конструктор](#constructor-summary) | [Поля ](#properties-summary) | [События ](#events-summary) | [Методы ](#methods-summary) ## Конструктор {#constructor-summary} ```javascript layout.Image(data) ``` Создает экземпляр макета-картинки. **Параметры:** #| || **Параметр** | **Значение по умолчанию** | **Описание** || || [`data`](#param-data)[*](*star) | — | Тип: [ILayout](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md) Данные макета. || || [`data.options`](#param-data.options) | — | Тип: [ILayout](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md) Опции макета. || || [`data.options.imageClipRect`](#param-data.options.imageClipRect) | — | Тип: Number[][] Координаты отображаемой области исходного изображения в пикселях. || || [`data.options.imageHref`](#param-data.options.imageHref) | — | Тип: String URL графического файла. || || [`data.options.imageOffset`](#param-data.options.imageOffset) | — | Тип: Number[] Смещение картинки относительно точки привязки. || || [`data.options.imageSize`](#param-data.options.imageSize) | — | Тип: Number[] Размеры слоя с картинкой. || || [`data.options.shape`](#param-data.options.shape) | — | Тип: [IShape](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IShape.md)\|Object|null Фигура активной области. Может быть задана экземпляром класса, реализующего интерфейс IShape или JSON-описанием пиксельной геометрии иконки. Если не задана, то автоматически будет рассчитана прямоугольная фигура на основе размера и смещения картинки. Координаты геометрии фигуры отсчитываются от точки привязки. || |# \* Обязательный параметр/опция. **Пример:** ```javascript // Создадим круглую метку радиусом 20 пикселей. var placemark = new ymaps.Placemark([59.936952, 30.343334], null, { iconLayout: 'default#image', iconImageHref: './images/roundImage.png', iconImageSize: [40, 40], iconImageOffset: [-20, -20], // Определим интерактивную область над картинкой. iconShape: { type: 'Circle', coordinates: [0, 0], radius: 20 }, }); ``` ## Поля {#properties-summary} #| || **Имя** | **Тип** | **Описание** || || [events](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#events) | [IEventManager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IEventManager.md) | Менеджер событий. Унаследовано от [IDomEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#events). || |# ## События {#events-summary} #| || **Имя** | **Описание** || || [click](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-click) | Однократное нажатие левой кнопки мыши на объекте. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Экземпляр класса [MapEvent](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/MapEvent.md). Более детальное описание доступно в [domEvent.manager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/domEvent.manager.md). Унаследовано от [IDomEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-click). || || [contextmenu](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-contextmenu) | Вызов контекстного меню на элементе. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Экземпляр класса [MapEvent](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/MapEvent.md). Более детальное описание доступно в [domEvent.manager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/domEvent.manager.md). Унаследовано от [IDomEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-contextmenu). || || [dblclick](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-dblclick) | Двойное нажатие левой кнопки мыши на объекте. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Экземпляр класса [MapEvent](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/MapEvent.md). Более детальное описание доступно в [domEvent.manager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/domEvent.manager.md). Унаследовано от [IDomEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-dblclick). || || [emptinesschange](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#event-emptinesschange) | Изменение признака пустоты макета. Экземпляр класса [Event](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Event.md). Унаследовано от [ILayout](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#event-emptinesschange). || || [mousedown](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-mousedown) | Нажатие кнопки мыши над объектом. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Экземпляр класса [MapEvent](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/MapEvent.md). Более детальное описание доступно в [domEvent.manager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/domEvent.manager.md). Унаследовано от [IDomEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-mousedown). || || [mouseenter](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-mouseenter) | Наведение курсора на объект. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Экземпляр класса [MapEvent](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/MapEvent.md). Более детальное описание доступно в [domEvent.manager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/domEvent.manager.md). Унаследовано от [IDomEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-mouseenter). || || [mouseleave](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-mouseleave) | Вывод курсора за пределы объекта. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Экземпляр класса [MapEvent](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/MapEvent.md). Более детальное описание доступно в [domEvent.manager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/domEvent.manager.md). Унаследовано от [IDomEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-mouseleave). || || [mousemove](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-mousemove) | Перемещение курсора над объектом. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Экземпляр класса [MapEvent](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/MapEvent.md). Более детальное описание доступно в [domEvent.manager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/domEvent.manager.md). Унаследовано от [IDomEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-mousemove). || || [mouseup](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-mouseup) | Отпускание кнопки мыши над объектом. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Экземпляр класса [MapEvent](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/MapEvent.md). Более детальное описание доступно в [domEvent.manager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/domEvent.manager.md). Унаследовано от [IDomEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-mouseup). || || [multitouchend](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-multitouchend) | Окончание мультисенсорного управления. Данное событие доступно только на устройствах, которые поддерживают множественные сенсорные прикосновения. Возвращает реализацию интерфейса IMultiTouchEvent. Унаследовано от [IDomEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-multitouchend). || || [multitouchmove](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-multitouchmove) | Повторящееся событие при мультисенсорном управлении. Данное событие доступно только на устройствах, которые поддерживают множественные сенсорные прикосновения. Возвращает реализацию интерфейса IMultiTouchEvent c информацией о прикосновениях. Определяет свойство touches, которое содержит список прикосновений. Каждое прикосновение описано объектом, которое содержит поля: - clientX - координата касания X относительно видимой области браузера; - clientY - координата касания Y относительно видимой области браузера; - pageX - координата касания X касания относительно начала документа; - pageY - координата касания Y касания относительно начала документа. Унаследовано от [IDomEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-multitouchmove). || || [multitouchstart](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-multitouchstart) | Начало мультисенсорного управления. Данное событие доступно только на устройствах, которые поддерживают множественные сенсорные прикосновения. Возвращает реализацию интерфейса IMultiTouchEvent c информацией о прикосновениях. Определяет свойство touches, которое содержит список прикосновений. Каждое прикосновение описано объектом, которое содержит поля: - clientX - координата касания X относительно видимой области браузера; - clientY - координата касания Y относительно видимой области браузера; - pageX - координата касания X касания относительно начала документа; - pageY - координата касания Y касания относительно начала документа. Унаследовано от [IDomEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-multitouchstart). || || [parentelementchange](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#event-parentelementchange) | Изменение родительского элемента. Экземпляр класса [Event](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Event.md). Унаследовано от [ILayout](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#event-parentelementchange). || || [shapechange](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#event-shapechange) | Изменение фигуры области охватывающей макет. Экземпляр класса [Event](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Event.md). Унаследовано от [ILayout](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#event-shapechange). || || [wheel](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-wheel) | Скролл мышкой. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Экземпляр класса [MapEvent](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/MapEvent.md). Более детальное описание доступно в [domEvent.manager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/domEvent.manager.md). Унаследовано от [IDomEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IDomEventEmitter.md#event-wheel). || |# ## Методы {#methods-summary} #| || **Имя** | **Возвращает** | **Описание** || || [destroy](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#destroy)() | | Деструктор. Вызывается при завершении работы с макетом. Унаследован от [ILayout](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#destroy). || || [getData](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#getData)() | Object | Возвращает объект данных макета. Унаследован от [ILayout](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#getData). || || [getParentElement](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#getParentElement)() | HTMLElement | Возвращает родительский HTML-элемент. Унаследован от [ILayout](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#getParentElement). || || [getShape](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#getShape)() | [IShape](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IShape.md)\|null | Возвращает фигуру, описывающую форму области, охватывающей макет, либо null, если нет возможности рассчитать данную фигуру. Координаты геометрии фигуры должны отсчитываться от точки привязки родительского элемента макета. Унаследован от [ILayout](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#getShape). || || [isEmpty](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#isEmpty)() | Boolean | Возвращает true, если макет пуст, т.е. не имеет содержимого. Данный признак используется для сокрытия пустых объектов, таких как хинт, балун и другие. Унаследован от [ILayout](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#isEmpty). || || [setData](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#setData)([data](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#setData-param-data)) | | Задает данные макета. Унаследован от [ILayout](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#setData). || || [setParentElement](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#setParentElement)([parent](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#setParentElement-param-parent)) | | Добавляет макет в DOM-дерево. Унаследован от [ILayout](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ILayout.md#setParentElement). || |# [*star]: Обязательный параметр.