Редактор для выделения области на картинке

Редактор дает возможность выделить область на картинке либо прямоугольником, либо произвольным многоугольником:

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

Чтобы добавить редактор в задание:

Подключите библиотеку $TOLOKA_ASSETS/js/image-annotation.js (нажмите в блоке Интерфейс задания на странице проекта).

Включите в HTML-код интерфейса компонент {{field type="image-annotation" name="<идентификатор поля>" src=<URL изображения>}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Например:

{{field type="image-annotation" name="result" src=url}}

Полный список параметров


Параметр	Описание	Обязательный	Значение по умолчанию
`type`	Тип поля: `image-annotation` — редактор для выделения области на картинке.	да	нет
`name`	Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.	да	нет
`src`	URL изображения. Варианты значений: URL из входных данных задания. Например, из поля с идентификатором `url`: `src=url`. Прямая ссылка. Рекомендуется использовать протокол HTTPS. Например: `src="https://mywebsite.ru/img1.png"`. Относительная ссылка. Укажите Handlebars-компонент `proxy` и идентификатор поля входных данных. Например: `src=(proxy image)`. Чтобы добавить картинку в редактор для выделения области, измените тип поля входных данных — строка.	да	нет


Параметр	Описание	Обязательный	Значение по умолчанию
`type`	Тип поля: `image-annotation` — редактор для выделения области на картинке.	да	нет
`name`	Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.	да	нет
`src`	URL изображения. Варианты значений: URL из входных данных задания. Например, из поля с идентификатором `url`: `src=url`. Прямая ссылка. Рекомендуется использовать протокол HTTPS. Например: `src="https://mywebsite.ru/img1.png"`. Относительная ссылка. Укажите Handlebars-компонент `proxy` и идентификатор поля входных данных. Например: `src=(proxy image)`. Чтобы добавить картинку в редактор для выделения области, измените тип поля входных данных — строка.	да	нет

Добавьте поле с типом json в описании выходных данных. Например:
```
{
  "result": {
    "type": "json",
    "required": true
  }
}
```
В выходные данные записывается объект JSON c координатами точек. Например:
```
{"data":{"p1":{"x":0.472,"y":0.413},"p2":{"x":0.932,"y":0.877}},"type":"rectangle"},
{"data":[{"x":0.143,"y":0.807},{"x":0.317,"y":0.87},{"x":0.511,"y":0.145},{"x":0.328,"y":0.096},{"x":0.096,"y":0.554}],"type":"polygon"}]"	
```
Значения x и y — числа от 0 до 1. Длина и ширина изображения принимаются за 1, начало координат находится в левом нижнем углу картинки.

Горячие клавиши

По умолчанию в задании будут работать горячие клавиши:

С закрывает многоугольник — соединяет линией первую и последнюю точки.
D удаляет выделенную точку, выделенный объект или последнюю точку при создании многоугольника.
Стрелки перемещают выделенную точку. При нажатой клавише Alt — медленнее. При нажатых клавишах Alt+Shift — быстрее.
Tab — переход от выделенной точки к следующей.
Shift+Tab — переход от выделенной точки к предыдущей.

Расскажите исполнителям о горячих клавишах в инструкции, чтобы ускорить выполнение задания.

Инструменты для выделения

По умолчанию в интерфейс задания будет добавлен один инструмент редактора — многоугольник.

Вы можете изменить набор инструментов:

Чтобы добавить прямоугольник, удалите CSS-селектор:

.image-annotation-editor__shape-rectangle {
  display: none;
}

Чтобы скрыть многоугольник, добавьте CSS-селектор:

.image-annotation-editor__shape-polygon {
  display: none;
}

Чтобы скрыть прямоугольник, добавьте CSS-селектор:

.image-annotation-editor__shape-rectangle {
  display: none;
}

Аннотация

Чтобы исполнитель мог ввести аннотацию к выделенной области, в задание нужно добавить элемент интерфейса (например, переключатель, флажки, текстовое поле):

Получите объект редактора getEditor() и интерфейса для аннотаций getField('result') в методе onRender():
```
var field = this.getField('result');     
var editor = field.getEditor();
```
Установите реализацию интерфейса для аннотаций в методах:
- createInterfaceElement() — вызывает DOM-элемент интерфейса (вызывается один раз при инициализации).
- onShow(shape, options) — отображает интерфейс для аннотаций, когда исполнитель наводит мышку на выделенную область. Получает на вход JSON с координатами точек многоугольника. В этот JSON можно записать аннотацию, которую ввел исполнитель.
Пример кода редактора с текстовым полем ввода:
```
editor.annotationInterface = field.createAnnotationInterface({
    createInterfaceElement: function() {
        this._input = document.createElement('input');
        this._input.addEventListener('input', function() {
            this._shape.annotation = this._input.value;
        }.bind(this));
        return this._input;
    },
    onShow: function(shape) {
        this._shape = shape;
        this._input.value = shape.annotation;
    }
});
```

Взаимодействие исполнителя с редактором вызывает следующие события:

shape:start — начало выделения области.
shape:finish — завершение выделения.
shape:cancel — удаление точки.
shape:remove — удаление выделения.

Подписаться на эти события можно так:

editor.on('shape:start', function() { 
    /* обработка события */ 
});