Компонент Rectangle

Визуальный компонент для отображения прямоугольной области произвольного размера и цвета.

Компонент rectangle может использоваться в графиках, работающих как с online-, так и с offline-типами данных

Объявление компонента `rectangle`

{
  "name": "rectangle",
  "sector": "*",
  "layerZ": -1,
  "settings": {...}
},

Свойство	Тип	Значение поумолчанию	Описание
`sector`	string	"central"	Сектор, в котором будет распологаться компонент `rectangle`.
`layerZ`	number	-1	Определяет положение компонента по оси Z. Перекрывающие элементы с большим значением `layerZ` будут накладываться поверх элементов с меньшим `layerZ`.

Настройки

{
  "settings": {
    "name": "",
    "x": "15px",
    "y": "10px",
    "width": "100px",
    "height": "80px",
    "margin": "",
    "padding": "",
    "stroke": "",
    "strokeWidth": "",
    "fill": "#00000000"
  }
}

Свойство	Тип	Значение поумолчанию	Описание
`name`	string	ОТСУТСТВУЕТ	Уникальное имя компонента. Используется для идентификации и управления через контроллер.
`x`	string	0	Позиция компонента по оси X в пикселях.
`y`	string	0	Позиция компонента по оси Y в пикселях.
`width`	string	0	Ширина компонента в пикселях.
`height`	string	0	Высота компонента в пикселях.
`stroke`	string	ОТСУТСТВУЕТ	Цвет обводки текста подписи в формате RGBA или HEXA.
`strokeWidth`	string	ОТСУТСТВУЕТ	Толщина обводки текста в пикселях.
`fill`	string	#00000000	Цвет компонента в формате RGBA или HEXA.

Контроллер

Доступ к прямоугольникам возможно получить через их контроллер.

import { JagmRootProvider } from "@incartdev/jagm-core";
import { JagmRawLineSignalData, JagmRawSignalsChartProvider } from "@incartdev/jagm-chart";
import { RawOfflineVisualizatorConfigJsUnpacker } from "@incartdev/jagm-visualizator";
import VisualConfig from "./VisualConfig.json";

// Получение ссылок на DOM элементы контейнера
const canvasRef = document.querySelector(".canvas-wrap");

// Создание экземпляра класса-конструктора графического полотна
const visProvider = new JagmRootProvider(new RawOfflineVisualizatorConfigJsUnpacker());

// Инициализация создания графических элементов
await visProvider.create({
  settings: VisualConfig,
  rootHtml: canvasRef
});

// Создание контроллера графических элементов библиотеки
const chartProvider = new JagmRawSignalsChartProvider(visProvider.builder);

// Получение контроллера компонента rectangle (для одного графика)
const measurerGroup = chartProvider.charts[0].findContentGroup("rectangle");

API Контроллера

Свойство	Тип	Описание
`findByName(name: string)`	Функция	Возвращает объект прямоугольной области, если объект с указыннм именем существует.

Программное взаимодействие с компонентом

Объект прямоугольной области предоставляет интерфейс для програмнного управленя и взаимодействия с компонентом.

Свойство	Тип	Описание
`move(x?: number, y?: number)`	Функция	Перемещает прямоугольную область на указанные координаты (в пикселях).
`resize(width?: number, height?: number)`	Функция	Изменяет размеры области, устанавливая новую ширину и/или высоту (в пикселях).
`setBackgroundFillColor(color: number[] \| string)`	Функция	Задаёт цвет заливки области в формате RGBA или HEXA.
`setBackgroundStrokeColor(color: number[] \| string)`	Функция	Устанавливает цвет обводки области в формате RGBA или HEXA.
`setBackgroundOpacity(opacity: number)`	Функция	Определяет уровень прозрачности области (от 0 до 1).
`setCornerRadius(radius: number)`	Функция	Устанавливает радиус скругления углов прямоугольной области (в пикселях).

Пример

Примечание

Код примера

Была ли статья полезна?

measurer

meander