cropper.js Создать область обрезки вокруг левого клика? - PullRequest
Новая
       28

cropper.js Создать область обрезки вокруг левого клика?

0 голосов
/ 22 февраля 2019

У меня cropper.js работает хорошо, когда пользователь щелкает и перетаскивает область изображения.

Как я могу сделать cropper.js обрезать область изображения, когда пользователь просто нажимает на часть изображения?

Например, где бы пользователь ни щелкнул, вокруг этой точки x, y будет создана область размером 50x50 с кадрированием.

В нынешнем виде я могу использовать .setCropData(), чтобы установить положение и размеры рамки обрезки, но я могу заставить его «выстрелить» только как часть события cropend.

Событие cropstart кажется идеальным местом для этого, поскольку оно захватывает начальное событие mousedown, но я не могу заставить метод setCropData () запускаться как часть этого события.

Из того, что я могу сказать, для того, чтобы cropper.js мог что-либо делать, он должен проходить через цепочку событий: от начала обрезки до обрезки, а затем, в конечном итоге, до обрезки.Это означает, что мышь нужно перетаскивать в каком-либо направлении.Если пользователь просто щелкает мышью и все, без дальнейшего перетаскивания, будет запускаться только событие cropstart.

Например, что-то простое для целей тестирования, это не работает: 

    cropstart: function(event) {
      let $canvas = $('#canvas-' + $cropperImageIdNumber);

      cropperInstance.setCropBoxData({left: 100, top: 100, width: 50, height: 50});

      console.log('cropstart CropBoxData');
      console.log(cropperInstance.getCropBoxData({}));
    },

После щелчка мышью в журнале консоли выдается пустое значение cropBoxData, и обрезка изображения не рисуется.Я подозреваю, что это потому, что без технически запущенного события обрезки нечего устанавливать.

Однако, если я возьму ту же вещь и добавлю ее как часть события cropend, она будет работать, как и ожидалось.Разница, однако, заключается в том, что я не могу просто «щелкнуть», но на самом деле я должен перетащить поле кадрирования любого размера: 

    cropend: function(event) {
      cropperInstance.cropped = true;

      let $canvas = $('#canvas-' + $cropperImageIdNumber);
      cropperInstance.setCropBoxData({left: 100, top: 100, width: 50, height: 50});

      console.log('cropend CropBoxData');
      console.log(cropperInstance.getCropBoxData({}));

Любые идеи, как я могу заставить кроппер «пройти через движения», установивразмеры вручную, но с помощью щелчка, а не обычного перетаскивания?Заранее спасибо!

...