en.javascript.info/02-ui/05-widgets/06-widget-tasks/04-img-select-mouse/task.md
Ilya Kantor f301cb744d init
2014-10-26 22:10:13 +03:00

1.1 KiB

Выбор фрагмента картинки мышью

[importance 3]

Реализуйте интерфейс для выбора фрагмента изображения мышью.

Нажмите на изображении и проведите мышью для выбора: [iframe height=350 src="solution" link]

По окончании смены размеров должно быть событие crop c left/top координатами и width/height размерами выбранной области.

Синтаксис:

var croppable = new Croppable({
  elem: $('#heroes')
});

$(croppable).on("crop", function(e) {
  // вывести crop-квадрат, left/top - относительно изображения
  // e.left, e.top, e.width, e.height
});
  • Область можно выбирать, двигая курсором в любую сторону от исходной точки.
  • Область не может вылезать за пределы изображения.

[edit src="task" task/]