Изображение (image)
Примитивы image позволяют добавлять в визуализации Vega изображения, например значки и фотографии. Файлы PNG и JPG можно загружать по указанным адресам или задавать изображения непосредственно как свойства данных.
Пример
Свойства примитива image
| Свойство | Тип | Описание |
|---|---|---|
| url | URL | Адрес файла изображения. |
| image | Canvas | Image | Объект изображения для отображения. Позволяет добавлять динамически созданные изображения. Если задан url, свойство игнорируется. ≥ 5.8 |
| aspect | Boolean | Логический признак (по умолчанию true), определяющий, сохранять ли пропорции изображения при изменении размера. Если значение равно true и задано только одно измерение (width или height), второе рассчитывается по пропорциям загруженного файла. |
| smooth | Boolean | Логический признак (по умолчанию true), определяющий, сглаживать ли изображение при изменении размера. При false пиксели масштабируются напрямую, без сглаживающей интерполяции. При выводе SVG свойство может не работать в некоторых браузерах из-за отсутствия единого стандарта. ≥ 5.8 |
| align | String | Выравнивание изображения по горизонтали: left, center или right. По умолчанию left. |
| baseline | String | Выравнивание изображения по вертикали: top, middle или bottom. По умолчанию top. |
Общие свойства примитивов
| Свойство | Тип | Описание |
|---|---|---|
| x | Number | Основная координата x в пикселях. |
| x2 | Number | Дополнительная координата x в пикселях. |
| xc | Number | Координата центра по x. Несовместима с x и x2. |
| width | Number | Ширина примитива в пикселях, если поддерживается. |
| y | Number | Основная координата y в пикселях. |
| y2 | Number | Дополнительная координата y в пикселях. |
| yc | Number | Координата центра по y. Несовместима с y и y2. |
| height | Number | Высота примитива в пикселях, если поддерживается. |
| opacity | Number | Непрозрачность примитива от 0 (прозрачный) до 1 (непрозрачный). |
| fill | Color | Цвет заливки. |
| fillOpacity | Number | Непрозрачность заливки от 0 до 1. |
| stroke | Color | Цвет обводки. |
| strokeOpacity | Number | Непрозрачность обводки от 0 до 1. |
| strokeWidth | Number | Толщина обводки в пикселях. |
| strokeCap | String | Вид конца линии: butt (по умолчанию), round или square. |
| strokeDash | Number[ ] | Массив длин штрихов и промежутков для пунктирной или точечной линии. |
| strokeDashOffset | Number | Смещение начала штрихового узора в пикселях. |
| strokeJoin | String | Вид соединения сегментов обводки: miter (по умолчанию), round или bevel. |
| strokeMiterLimit | Number | Предел заострения соединения, после которого оно срезается. |
| blend | String | Режим смешивания цвета примитива с фоном. Допускается любое значение CSS mix-blend-mode, кроме "normal". Значение по умолчанию null соответствует режиму normal для SVG и source-over для Canvas. |
| cursor | String | Вид указателя мыши над примитивом. Допускается любое корректное значение CSS cursor. |
| href | URL | Адрес, открываемый при щелчке. Если задан, примитив действует как гиперссылка. |
| tooltip | Any | Текст подсказки при наведении. Если значение — объект (кроме Date или массива), каждая пара «ключ — значение» показывается на отдельной строке, например "key1: value1\nkey2: value2". Массивы показываются в квадратных скобках [value1, value2, ...]. Остальные значения преобразуются в строки. Вложенные объекты не раскрываются рекурсивно. |
| zindex | Number | Целое число, задающее порядок наложения соседних экземпляров примитива. По умолчанию 0; элементы с большим значением рисуются поверх элементов с меньшим. При использовании в кодировании влияет только на порядок внутри одного набора и не меняет слой относительно других определений примитивов. В отличие от свойства sort на уровне определения примитива, zindex меняет только порядок отрисовки, но не порядок самих элементов, например точек линии или области. Обычно его используют, чтобы выделенный элемент рисовался поверх соседних. |
У примитивов, поддерживающих ширину и высоту (включая rect и area), горизонтальный размер определяется в таком порядке приоритета: свойствами x и x2, затем x и width, затем x2 и width, затем xc и width. Если указаны все три свойства — x, x2 и width, — значение width игнорируется. Свойства y, y2, yc и height обрабатываются аналогично.
Для примитивов без ширины или высоты (включая path и arc) применяются похожие вычисления, но они определяют только итоговое положение по x и y. Свойство width может повлиять на итоговую координату x, но само по себе не отображается.
Если для одного измерения используются несколько координатных свойств (x и x2 либо y и y2), их нужно задавать в одном наборе кодирования, например вместе в "enter": {...} или в "update": {...}. Разделение между наборами может привести к неожиданному результату.
Свойства доступности ≥ 5.11
Свойства доступности определяют атрибуты ARIA при выводе SVG. Vega автоматически создаёт атрибуты ARIA для элементов контейнера SVG <g> в каждом определении примитива; это настраивается через свойства доступности примитива. Приведённые ниже свойства задаются в наборах кодирования и добавляют атрибуты ARIA отдельным экземплярам.
| Свойство | Тип | Описание |
|---|---|---|
| aria | Boolean | Логический признак (по умолчанию true), определяющий, нужно ли добавлять атрибуты ARIA при выводе SVG. При false элемент SVG получает атрибут aria-hidden и исключается из дерева доступности. |
| description | String | Текстовое описание экземпляра примитива для ARIA (только при выводе SVG). Если задано, становится значением атрибута aria-label. |