Компонент Grid

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

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

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

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

Настройки

Свойство view определяет вид отображаемой миллиметровой сетки. На данный момент компонент grid поддерживает два вида миллиметровой сетки:

Вид webgl-single

Вид webgl-single используется по умолчанию. Он отображает сетку с толстыми линиями, формирующими ячейки размером 1 см.

{
  "settings": {
      "view": "webgl-single",
      "color": "#3F48CC",
      "cellSize_mm": { "width": 10, "height": 10 }
  }
}
Свойство Тип Значение поумолчанию Описание
view string "webgl-single" Вид отображаемой миллиметровой сетки.
color string #C8C8C8 Цвет линии в формате RGBA или HEXA.
cellSize_mm.width number 10 Ширина ячейки в миллиметрах.
cellSize_mm.height number 10 Высота ячейки в миллиметрах.

Вид svg-double

Вид svg-double отображает сетку с двумя уровнями линий: тонкие — для ячеек размером 1 мм, и толстые — для ячеек размером 1 см.

{
  "settings": {
      "view": "svg-double",
      "color": "#F4C5BD",
      "majorCell": {
        "size_mm": { "width": 10, "height": 10 },
        "lineWidth_mm": 0.3
      },
      "minorCell": {
        "size_mm": { "width": 1, "height": 1 },
        "lineWidth_mm": 0.1
      }
  }
}
Свойство Тип Значение поумолчанию Описание
view string "webgl-single" Вид отображаемой миллиметровой сетки.
color string #F4C5BD Цвет линии в формате RGBA или HEXA.
majorCell.size_mm.width number 10 Ширина основной (крупной) ячейки в миллиметрах.
majorCell.size_mm.height number 10 Высота основной (крупной) ячейки в миллиметрах.
majorCell.lineWidth_mm number 0.3 Толщина линии крупной ячейки.
minorCell.size_mm.width number 1 Ширина вспомогательной (мелкой) ячейки в миллиметрах.
minorCell.size_mm.height number 1 Высота вспомогательной (мелкой) ячейки в миллиметрах.
minorCell.lineWidth_mm number 0.1 Толщина линии мелкой ячейки.

Примеры

webgl-single

Код примера

svg-double

Код примера

Доступ к содержимому по ссылке возможен только для авторизованных пользователей GitHub, являющихся участниками организации IncartDev
Ссылка на ресурс

Доступ к содержимому по ссылке возможен только для авторизованных пользователей GitHub, являющихся участниками организации IncartDev
Ссылка на ресурс

Предыдущая
signals
Следующая
border