uniapp怎么实现可拖拽的裁剪框-猿码集

uniapp怎么实现可拖拽的裁剪框

1. 前言

在移动设备上，我们经常需要使用裁剪功能，以获得想要的图片或视图。然而，裁剪需要用到裁剪框来确定需要截取的区域。在本文中，我们将探讨如何使用uniapp实现可拖拽的裁剪框。

2. 实现步骤

2.1. 用canvas绘制图片

要使用裁剪框，我们首先需要在页面上加载待裁剪的图片，并使用canvas绘制出来。以下是使用uniapp组件uni-image和uni-canvas来实现的代码示例：


<template>
  <view>
    <uni-image
      src="../../static/images/image.jpg"
      mode="widthFix" 
      @load="onImageLoad" 
    />
    <uni-canvas
      id="canvas"
      ref="canvasRef" 
      :canvas-id="'myCanvas'" 
      :size="canvasSize" 
    />
  </view>
</template>
<script>
export default {
  data() {
    return {
      canvasSize: {
        width: uni.getSystemInfoSync().windowWidth,
        height: uni.getSystemInfoSync().windowHeight - 100
      },
      imageWidth: 0, // 图片宽度
      imageHeight: 0, // 图片高度
      imageSrc: '', // 图片路径
    }
  },
  methods: {
    // 图片加载完毕后获取图片的宽高，并将图片绘制到canvas上
    onImageLoad(e) {
      this.imageWidth = e.detail.width
      this.imageHeight = e.detail.height
      this.imageSrc = e.detail.path
      this.drawImage()
    },
    drawImage() {
      const ctx = uni.createCanvasContext('myCanvas', this)
      ctx.drawImage(this.imageSrc, 0, 0, this.canvasSize.width, this.imageHeight / this.imageWidth * this.canvasSize.width)
      ctx.draw()
    }
  }
}
</script>

在上面的代码中，我们在页面上放置了一个uni-image组件和一个uni-canvas组件。在onImageLoad方法中，我们获取了图片的宽度和高度，然后使用canvas绘制出图片。需要注意的是，在使用ctx.drawImage方法时，需要将图片的宽度和高度按比例缩放到与canvas同样大小。

2.2. 添加裁剪框

接下来，我们需要在图片上面添加一个可拖拽的裁剪框，让用户可以调整截取的区域。以下是实现方式：

首先，在uni-canvas中添加一个movable-view组件，作为裁剪框。在movable-view中，我们设置宽度为100px，高度为100px，并将裁剪框放在图片的中央：


<uni-canvas 
  id="canvas"
  ref="canvasRef" 
  :canvas-id="'myCanvas'" 
  :size="canvasSize" 
>
  <movable-view 
    class="cropper"
    x="0" 
    y="0" 
    w="100" 
    h="100" 
    direction="all" 
    :scale="true" 
    :out-of-bounds="true" 
    :style="{ 
      width: '100px', 
      height: '100px',
      left: (canvasSize.width - 100) / 2 + 'px',
      top: (canvasSize.height - 100) / 2 + 'px'
    }" 
  />
</uni-canvas>

然后，在movable-view中设置bindchange事件来检测裁剪框的位置变化：


<movable-view 
  class="cropper"
  x="0" 
  y="0" 
  w="100" 
  h="100" 
  direction="all" 
  :scale="true" 
  :out-of-bounds="true" 
  :style="{ 
    width: '100px', 
    height: '100px',
    left: (canvasSize.width - 100) / 2 + 'px',
    top: (canvasSize.height - 100) / 2 + 'px'
  }" 
  @change="onCropperChange"
/>

接下来，在onCropperChange方法中获取裁剪框的位置和大小，并根据这些值来在canvas上绘制裁剪框：


onCropperChange(e) {
  const cropper = e.target
  const { x, y, w, h } = cropper
  const ctx = uni.createCanvasContext('myCanvas', this)
  ctx.clearRect(0, 0, this.canvasSize.width, this.canvasSize.height)
  ctx.drawImage(this.imageSrc, 0, 0, this.canvasSize.width, this.imageHeight / this.imageWidth * this.canvasSize.width)
  ctx.setStrokeStyle('white')
  ctx.setLineDash([5, 5])
  ctx.strokeRect(x, y, w, h)
  ctx.draw()
}

在上面的代码中，我们首先使用ctx.clearRect清空canvas，然后重新绘制图片。接着，使用ctx.setLineDash方法来设置虚线，使用ctx.strokeRect方法来绘制裁剪框。

3. 结论

通过以上步骤，我们就成功地实现了一个可拖拽的裁剪框功能。通过绑定bindchange事件，我们可以实时获取裁剪框的位置和大小，并将其显示在canvas上。本文只给出了一个基本的实现方式，读者可以根据自己的需求进行扩展和改进。

uniapp怎么实现可拖拽的裁剪框