Менять размер картинки при помощи мыши

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

Пусть изображение «тянется» при захвате его снизу, справа и в правом-нижнем углу, вот так:
Открыть в новом окне

По окончанию смены размеров должно быть событие resize c новыми размерами.

Синтаксис:

var resizeMe = new Resizeable(document.getElementById('heroes'));

resizeMe.on("resize", function(newWidth, newHeight) {
  // вывести изменения
  var info = "ширина:" + newWidth + ", высота:" + newHeight;
  document.getElementById('info').innerHTML = info;
});

Минимальный размер изображения 3x3, меньше ресайзить нельзя.

В исходном документе tutorial/browser/events/resizeable-src/index.html находится картинка handle-se.png для правого-нижнего угла и dom.js, eventer.js с вспомогательными функциями.

Решение, шаг 1

Решение

Решение, шаг 1

Для захвата проще всего создать дополнительные DIV'ы и отпозиционировать их сбоку и справа-снизу IMG. При нажатии на них начинать смену размера.

CSS-структура:

<div class="resize-wrapper" style="width: 503px; height: 285px;">
  <img src="heroes.jpg" id="heroes" style="width:500px;height:282px">
  <div class="resize-handle-s"></div>
  <div class="resize-handle-e"></div>
  <div class="resize-handle-se"></div>
</div>

Внешний DIV подстраивается под размер картинки и имеет position:relative. Внутри него расположены абсолютно позиционированные «ручки» для захвата.

Стиль:

.resize-wrapper {
      position: relative;
    }
    .resize-wrapper img {
      display: block;
    }

    .resize-handle-se {
      width: 16px;
      height: 16px;
      position: absolute;
      bottom: 0;
      right: 0;
      background: url(handle-se.png) no-repeat;
      cursor: se-resize;
    }

    .resize-handle-s {
      height: 3px;
      width:100%;
      position: absolute;
      bottom: 0;
      background: gray;
      cursor: s-resize;
    }

    .resize-handle-e {
      width: 3px;
      height:100%;
      position: absolute;
      right: 0;
      top: 0;
      background: gray;
      cursor: e-resize;
    }

Для обозначения низа используется буква «s» (south, «юг» по-английски), обозначения правой стороны — буква «e» (east, «восток» по-английски).

Использование сторон света для обозначения направления можно часто встретить в скриптах.

Решение, шаг 2

Алгоритм:

При инициализации IMG оборачивается во внешнюю обертку и обкладывается DIV'ами, на которых ловим mousedown. Обертка нужна, чтобы абсолютно позиционировать DIV'ы внутри неё под/сбоку изображения.
При наступлении mousedown, начинаем ловить document.mousemove и подгонять картинку под размер, а обертку — под картинку.
Желательно заодно отменить браузерное выделение и Drag’n’Drop, возвратив false из собработчиков событий mousedown и dragstart.
При наступлении mouseup — конец.

Решение, шаг 3

Более подробно детали отмечены в комментариях к решению: tutorial/browser/events/resizeable/index.html

#403

Менять размер картинки при помощи мыши

Реклама

Нашли опечатку?

Последние Комментарии

Помоги другим!