Картинка с возможностью выделения областей

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

Примечание. Не добавляйте обучающие и контрольные задания в проект с редактором для выделения области на картинке.

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

Если вам нужно добавить редактор для картинки без выделенных объектов:

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

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

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

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

  3. Добавьте во входные данные поле для указания ссылки на картинку. Если вы храните картинки на Яндекс.Диске, используйте тип строка, а не ссылка.
  4. В выходные данные добавьте поле result с типом json.

В поле result будет записан объект 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, начало координат находится в левом верхнем углу картинки.

Параметры

Параметр

Описание

Обязательный

Значение по умолчанию

type
Тип поля: image-annotation — редактор для выделения области на картинке.

да

нет

name

Атрибут для поля выходных данных. Содержит имя поля выходных данных.

да

нет

src

URL изображения. Варианты значений:

  • URL из входных данных задания. Например, из поля с идентификатором url: src=image.

  • Прямая ссылка. Рекомендуется использовать протокол HTTPS. Например: src="https://mywebsite.ru/img1.png".

  • Относительная ссылка. Если вы используете файлы с Яндекс.Диска, укажите компонент proxy и название поля входных данных. Например, для поля с названием image запишите src=(proxy image). Измените тип поля на строку.

да

нет

annotations

Атрибут для поля входных данных. Содержит название поля входных данных. Сюда можно передавать координаты разметки для последующего редактирования. Формат данных — объект JSON.

нет

нет

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

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

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

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

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

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

Чтобы добавить прямоугольник, удалите CSS-селектор:
.image-annotation-editor__shape-rectangle {
  display: none;
}

Аннотация

Чтобы использовать аннотации, вставьте в блок JS один из этих примеров:

exports.Task = extend(TolokaHandlebarsTask, function (options) {
    TolokaHandlebarsTask.call(this, options);
}, {
    onRender: function() {
        var field = this.getField('result');
        var editor = field.getEditor();
        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;
            }
        });
   },
  onDestroy: function() {
    // Задание завершено, можно освобождать (если были использованы) глобальные ресурсы
  }
});

function extend(ParentClass, constructorFunction, prototypeHash) {
  constructorFunction = constructorFunction || function () {};
  prototypeHash = prototypeHash || {};
  if (ParentClass) {
    constructorFunction.prototype = Object.create(ParentClass.prototype);
  }
  for (var i in prototypeHash) {
    constructorFunction.prototype[i] = prototypeHash[i];
  }
  return constructorFunction;
}
Объяснение примеров

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

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

    var field = this.getField('result');    
    var editor = field.getEditor();
  2. Установите реализацию интерфейса для аннотаций в методах:
    • createInterfaceElement() — вызывает DOM-элемент интерфейса (вызывается один раз при инициализации).

    • onShow(shape, options) — отображает интерфейс для аннотаций, когда исполнитель наводит мышку на выделенную область. Получает на вход JSON с координатами точек многоугольника. В этот JSON можно записать аннотацию, которую ввел исполнитель.

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

  • shape:start — начало выделения области.

  • shape:finish — завершение выделения.

  • shape:cancel — удаление точки.

  • shape:remove — удаление выделения.

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

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