0

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

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

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

就目前而言，我可以使用 .setCropData() 方法来设置裁剪框的位置和尺寸，但我只能让它作为cropend 事件的一部分“触发”。

cropstart 事件似乎是一个理想的地方，因为它捕获了初始 mousedown 事件，但我无法让 setCropData() 方法作为该事件的一部分触发。

据我所知，为了让cropper.js 做任何事情，它必须经历一系列事件：从cropperstart，到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({}));

有什么想法可以让裁剪器通过手动设置尺寸来“完成动作”，但通过点击而不是通常的拖动？先感谢您！

4

0 回答 0