Реализуйте интерфейс для выбора фрагмента изображения мышью.
Нажмите на изображении и проведите мышью для выбора:
Открыть в новом окне
По окончанию смены размеров должно быть событие crop c left/top координатами и width/height размерами выбранной области.
Синтаксис:
var croppable = new Croppable(document.getElementById('heroes'));
croppable.on("crop", function(dims) {
// вывести координаты и размеры crop-квадрата относительно изображения
});
- Область можно выбирать, двигая курсором в любую сторону от исходной точки.
- Область не может вылезать за пределы изображения.
В исходном документе tutorial/browser/events/croppable-src/index.html находится картинка и dom.js, eventer.js с вспомогательными функциями.
Область выделения — это DIV, серого цвета, полупрозрачный, с рамкой:
.crop-area {
position: absolute;
background: #F5DEB3;
opacity: 0.3;
filter:alpha(opacity=30); /* IE opacity */
border: 1px dashed black;
}
Решение: tutorial/browser/events/croppable/index.html
Обратите внимание: обработчики mousemove/mouseup ставятся на document, не на элемент.
Это для того, чтобы посетитель мог начать выделение на элементе, а продолжить и завершить его, двигая зажатой мышкой снаружи, вне его границ.