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

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

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

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

  2. Включите в 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".

    да

    нет

  3. Добавьте поле с типом 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;
}

Аннотация

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

  1. Получите объект редактора getEditor() и интерфейса для аннотаций getField('annotations') в методе onRender():

    var field = this.getField('annotations');     
    var editor = field.getEditor();
  2. Установите реализацию интерфейса для аннотаций в методах:
    • 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() { 
    /* обработка события */ 
});