Выделение объектов на картинке

В этом разделе описано, как добавить к картинке редактор для выделения областей и как можно ускорить работу с ним с помощью горячих клавиш. Если вам нужно просто вставить картинку, читайте раздел Вставка картинок.

Добавить редактор для выделения

Чтобы добавить возможность выделять на картинках области, используйте компонент field.image-annotation.

{
  "view": {
    "type": "field.image-annotation",
    "data": {
      "type": "data.output",
      "path": "path"
    },
    "image": "url"
  }
}

Посмотреть пример в песочнице.

Настроить режимы разметки

Компонент предлагает три режима разметки: прямоугольниками, многоугольниками и точками. По умолчанию пользователю доступны все три режима. Вы можете оставить лишь определенные режимы: один или два из них.

Чтобы разрешить выделять области только прямоугольниками, в свойстве shapes добавьте ключ rectangle и передайте ему значение true.

{
  "shapes": {
    "rectangle": true
  }
}

Посмотреть пример в песочнице.

Чтобы разрешить выделять области только многоугольниками, в свойстве shapes добавьте ключ polygon и передайте ему значение true.

{
  "shapes": {
    "polygon": true
  }
}

Посмотреть пример в песочнице.

Чтобы разрешить выделять области только точками, в свойстве shapes добавьте ключ point и передайте ему значение true.

{
  "shapes": {
    "point": true
  }
}

Посмотреть пример в песочнице.

Классифицировать области

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

{
  "labels": [{
      "label": "Вариант 1",
      "value": "value1"
    },
    {
      "label": "Вариант 2",
      "value": "value2"
    }
  ]
}

Посмотреть пример в песочнице.

Каждый новый объект свойства labels добавляет в редакторе кнопку для выбора типа области, а разное значение value дает возможность выделить область уникальным цветом.

Добавить горячие клавиши

Чтобы помочь пользователю работать быстрее, добавьте горячие клавиши с помощью компонента plugin.field.image-annotation.hotkeys. Горячие клавиши можно назначить на стрелки вверх и вниз (up,down), цифры и латинские буквы.

Если вы добавите плагин для горячих клавиш без уточнения значений, то они будут проставлены по умолчанию (как в этом примере). Поменяйте их как описано ниже, если вам они не подходят. Если вам не нужен какой-то вид горячих клавиш, то передайте ему пустое значение.

Если у вас доступны хотя бы два типа областей, то перечислите для них горячие клавиши через запятую в массиве свойства labels. Они добавятся на кнопки выбора разных областей в порядке их отображения.

{
  "type": "plugin.field.image-annotation.hotkeys",
  "labels": [
      "1",
      "2"
  ]
}

Посмотреть пример в песочнице.

Вы можете позволить пользователю переключаться между разными режимами разметки с помощью горячих клавиш. Добавьте в свойстве modes нужный вам ключ и передайте ему значение горячей клавиши:

select — для режима выбора фигур и точек;
point — для режима разметки точками;
rectangle — для режима разметки прямоугольниками;
polygon — для режима разметки многоугольниками.

{
  "type": "plugin.field.image-annotation.hotkeys",
  "modes": {
    "select": "q",
    "point": "w",
    "rectangle": "e",
    "polygon": "r"
  }
}

Посмотреть пример в песочнице.

Настройте горячие клавиши, чтобы пользователь мог подтверждать или отменять создание новой области. Передайте свойствам значения горячих клавиш:

confirm — подтвердить;
cancel — отменить.

{
  "type": "plugin.field.image-annotation.hotkeys",
  "confirm": "x",
  "cancel": "z"
}

Посмотреть пример в песочнице.

Создать задание

Чтобы создать шаблон для задания по выделению областей, используйте следующие компоненты:

field.image-annotation — чтобы добавить редактор для разметки;
plugin.field.image-annotation.hotkeys — чтобы добавить горячие клавиши;
view.text — чтобы добавить описание к заданию;
condition.required — чтобы убедиться, что пользователь выделил хотя бы одну область;
plugin.toloka — чтобы настроить внешний вид задания.

Посмотреть пример в песочнице.