Question

当用户单击并拖动图像的某个区域时，cropper.js运行良好。

当用户仅单击图像的一部分时，如何让cropper.js裁剪图像的某个区域？

例如，无论用户单击何处，都会在该单击的x，y位置周围创建一个50x50的“裁剪框”区域。

就目前而言，我可以使用.setCropData（）方法来设置裁剪框的位置和尺寸，但是我只能在cropend事件中将其“触发”。

cropstart事件似乎很适合此操作，因为它捕获了最初的mousedown事件，但我无法将setCropData（）方法作为该事件的一部分触发。

据我所知，为了使cropper.js做任何事情，它必须经历一系列事件：从cropstart，到crop，然后到cropend。这意味着必须向某个方向拖动鼠标。如果用户只是点击鼠标，仅此而已，并且没有进一步的拖动动作，则只会触发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({}));

有什么想法可以通过手动设置尺寸，而是通过单击而不是通常的拖动来使裁切器“完成动作”？预先谢谢你！

cropper.js是否在左键单击位置附近创建裁剪区域？

0 个答案: