wepy-cropper.wpy

<template>
  <scroll-view class="cropper_main_container {{params.visable?'':'hidden'}}">
    <view class="cropper_container">
      <canvas class="original_canvas" canvas-id="originalCanvas" style="width:{{cropperChangableData.originalSize.width}}px;height:{{cropperChangableData.originalSize.height}}px;"></canvas>

      <view class='cropper_canvas_container'>
        <canvas class="canvas" canvas-id="canvas" style="left:{{cropperData.left}}px;top:{{cropperData.top}}px;width:{{cropperChangableData.scaleSize.width}}px;height:{{cropperChangableData.scaleSize.height}}px;"></canvas>
        <canvas class="move_canvas" canvas-id="moveCanvas" style="left:{{cropperData.left}}px;top:{{cropperData.top}}px;width:{{cropperChangableData.scaleSize.width}}px;height:{{cropperChangableData.scaleSize.height}}px;"></canvas>

        <movable-area class="cropper_movable_area_container" style="left:{{cropperData.left}}px;top:{{cropperData.top}}px;width:{{cropperChangableData.scaleSize.width}}px;height:{{cropperChangableData.scaleSize.height}}px;">
          <block wx:if="{{cropperMovableItems}}">
            <block wx:for="{{cropperMovableItems}}" wx:key="moveItem">
              <movable-view class="move_item" style="width:{{cropperData.itemLength}}px; height:{{cropperData.itemLength}}px;" direction="all" x="{{item.x-cropperData.itemLength/2}}" y="{{item.y-cropperData.itemLength/2}}" bindtouchmove="moveEvent({{index}})" bindtouchend="endEvent({{index}})"></movable-view>
            </block>
          </block>
        </movable-area>
      </view>
    </view>

    <view class="cropper_toolbar">
      <view class="button_item cancel_button" bindtap="hideCropper">
        取消
      </view>
      <view class="button_item rotate_button" bindtap="rotateImage">
        旋转
      </view>

      <block wx:if="{{cropperData.sizeType.length==2}}">
        <view class="original_button button_item {{cropperData.original?'checked':''}}" bindtap="originalChange">
          <!-- <view class='check_container'>
              <view class='check_border'></view>
              <view class='check_center'></view>
          </view> -->
          <view>原图</view>
        </view>
      </block>
      <view class="crop_image_button button_item {{cropperChangableData.canCrop?'':'disable'}}" bindtap="{{cropperChangableData.canCrop?'cropImage':''}}">
        完成
      </view>
      <!-- <view class="crop_image_button button_item" bindtap="cropImage">
          完成
      </view> -->
    </view>
  </scroll-view>
</template>
<script>
  import wepy from 'wepy'
  const device = wx.getSystemInfoSync();
  const W = device.windowWidth;
  const H = device.windowHeight - 50;
  // 获取选中区域的(x, y, w, h)
  const getCropRect = (cropperMovableItems) => {
    let maxX = 0, maxY = 0
    for (let key in cropperMovableItems) {
      let item = cropperMovableItems[key]
      maxX = item.x > maxX ? item.x : maxX
      maxY = item.y > maxY ? item.y : maxY
    }

    let minX = maxX, minY = maxY
    for (let key in cropperMovableItems) {
      let item = cropperMovableItems[key]
      minX = item.x < minX ? item.x : minX
      minY = item.y < minY ? item.y : minY
    }

    return {
      x: minX,
      y: minY,
      w: maxX - minX,
      h: maxY - minY
    }
  }
  // http://www.geeksforgeeks.org/convex-hull-set-1-jarviss-algorithm-or-wrapping/

  // To find orientation of ordered triplet (p, q, r).
  // The function returns following values
  // 0 --> p, q and r are colinear
  // 1 --> Clockwise
  // 2 --> Counterclockwise
  function orientation(p, q, r) {
    var val = (q.y - p.y) * (r.x - q.x) - (q.x - p.x) * (r.y - q.y);

    if (val == 0) return 0;  // collinear
    return (val > 0) ? 1 : 2; // clock or counterclock wise
  }

  function convexHull(points, n) {
    // There must be at least 3 points
    if (n < 3) return;

    // Initialize Result
    var hull = [];

    // Find the leftmost point
    var l = 0;
    for (var i = 1; i < n; i++) {
      if (points[i].x < points[l].x) {
        l = i;
      }
    }
    // Start from leftmost point, keep moving
    // counterclockwise until reach the start point
    // again. This loop runs O(h) times where h is
    // number of points in result or output.
    var p = l, q;
    do {
      // Add current point to result
      // Prevent duplicates object
      // if (hull.findIndex(i => i.x == points[p].x && i.y == points[p].y)==-1){
      hull.push(points[p]);
      // }

      // Search for a point 'q' such that
      // orientation(p, x, q) is counterclockwise
      // for all points 'x'. The idea is to keep
      // track of last visited most counterclock-
      // wise point in q. If any point 'i' is more
      // counterclock-wise than q, then update q.
      q = (p + 1) % n;

      for (var i = 0; i < n; i++) {
        // If i is more counterclockwise than
        // current q, then update q
        if (orientation(points[p], points[i], points[q]) == 2)
          q = i;
      }

      // Now q is the most counterclockwise with
      // respect to p. Set p as q for next iteration,
      // so that q is added to result 'hull'
      p = q;

    } while (p != l);  // While we don't come to first
    // point

    // Print Result
    // for (var i in hull) {
    //     var temp = hull[i]
    //     console.log("(" + temp.x + ", " + temp.y + ")");
    // }
    return hull
  }

  function drawImageWithDegree(canvasId, path, width, height, degree) {
    let ctx = wx.createCanvasContext(canvasId)

    let isVertical = degree % 180 > 0

    let drawWidth = isVertical ? height : width
    let drawHeight = isVertical ? width : height

    let centerX = width / 2
    let cneterY = height / 2

    let drawCenterX = drawWidth / 2
    let drawCneterY = drawHeight / 2

    let d = Math.abs(width-height)/2

    // ctx.translate(drawCenterX, drawCneterY)
    // ctx.rotate(degree * Math.PI / 180)
    // ctx.translate(-drawCenterX, -drawCneterY)

    ctx.translate(centerX, cneterY)
    ctx.rotate(degree * Math.PI / 180)
    ctx.translate(-centerX, -cneterY)

    // ctx.translate(-d, d)
    if (isVertical) {
      if (drawHeight > drawWidth) {
        ctx.drawImage(path, d, -d, drawWidth, drawHeight)
      }
      else {
        ctx.drawImage(path, -d, d, drawWidth, drawHeight)
      }
    }
    else {
      ctx.drawImage(path, 0, 0, drawWidth, drawHeight)
    }

    ctx.draw(false, function (e) {
      console.log('draw callback')
    })
  }

  // 获取适应屏幕的图片显示大小
  const getAdjustSize = (W, H, width, height) => {
    if (width > W) {
      height = W / width * height
      width = W
    }

    if (height > H) {
      width = H / height * width
      height = H
    }

    return {
      width: width,
      height: height
    }
  }
  const cropperUtil = {
    getCropRect,
    getAdjustSize,
    convexHull,
    drawImageWithDegree
  }

  export default class MyPage extends wepy.component {

    props = {
      params:{
        type:Object,
        default:{
          src:'',
          mode:"rectangle",
          sizeType:["compressed"],
            visable:false
        },
        twoWay: true,
      }
    }
    customData = {}  // 自定义数据

    customFunction() {
    }  // 自定义方法

    onLoad(options) {
      this.init(W, H)

    }  // 在Page和Component共用的生命周期函数

    onShow() {
    }  // 只在Page中存在的页面生命周期函数

    config = {};  // 只在Page实例中存在的配置数据，对应于原生的page.json文件

    data = {
      cropperData:{},
      cropperMovableItems:{},
      cropperChangableData:{}


    };  // 页面所需数据均需在这里声明，可用于模板数据绑定

    components = {};  // 声明页面中所引用的组件，或声明组件中所引用的子组件

    mixins = [];  // 声明页面所引用的Mixin实例

    computed = {};  // 声明计算属性（详见后文介绍）

    watch = {
      params(newVal){
        newVal.mode=newVal.mode?newVal.mode:'rectangle';
        newVal.sizeType=newVal.sizeType?newVal.sizeType:['compressed'];
        newVal.visable=newVal.visable?newVal.visable:false;
        this.showCropper(newVal);
      }
    };  // 声明数据watcher（详见后文介绍）

    methods = {
      // moveable-view touchmove
      moveEvent(key,e){
        let originalSize = this.cropperChangableData.originalSize

        this.setupMoveItem(key, e.changedTouches, {
          path: this.cropperData.imageInfo.path,
          width: originalSize.width,
          height: originalSize.height
        })
      },

      // moveable-view touchend，end的时候设置movable-view的位置，如果在move阶段设置位置，选中会不流畅
      endEvent(key,e){
        let cropperData = this.cropperData
        let cropperMovableItems = this.cropperMovableItems
        let cropperChangableData = this.cropperChangableData
        let originalSize = cropperChangableData.originalSize

        this.setupMoveItem(key, e.changedTouches, {
          path: this.cropperData.imageInfo.path,
          width: originalSize.width,
          height: originalSize.height
        }, (cropperMovableItems, canCrop) => {
          cropperChangableData.canCrop = canCrop
          this.cropperChangableData=cropperChangableData;
          this.cropperMovableItems= cropperMovableItems;
          this.$apply();
        })
      },

      // 隐藏cropper
      hideCropper(){

        this.params.visable = false
        this.cropperData.cropCallback = null

        this.cropperData=this.data.cropperData,
          this.cropperMovableItems= {
            topleft: {
              x: -1,
              y: -1
            },
            topright: {
              x: -1,
              y: -1
            },
            bottomleft: {
              x: -1,
              y: -1
            },
            bottomright: {
              x: -1,
              y: -1
            }
          },
          this.cropperChangableData= {
            canCrop: true,
            rotateDegree: 0
          }

        this.clearCanvas(this.cropperData.imageInfo)
        this.$emit("wepyCropperCancle");
      },

      // 旋转图片
      rotateImage(){
        let imageInfo = this.data.cropperData.imageInfo
        let width = imageInfo.width
        let height = imageInfo.height
        let rotateDegree = this.cropperChangableData.rotateDegree

        rotateDegree = rotateDegree == 360 ? 90 : rotateDegree + 90

        // 判断是否为垂直方向
        let isVertical = rotateDegree % 180 > 0
        let rotateWidth = isVertical ? height : width
        let rotateHeight = isVertical ? width : height

        let size = cropperUtil.getAdjustSize(W, H, rotateWidth, rotateHeight)

        // 适应屏幕的位置
        let left = (W - size.width) / 2
        let top = (H - size.height) / 2
        let cropperData = this.cropperData

        cropperData.left = left
        cropperData.top = top

        let cropperChangableData = this.cropperChangableData
        cropperChangableData.originalSize = {
          width: rotateWidth,
          height: rotateHeight
        }
        cropperChangableData.scaleSize = {
          width: size.width,
          height: size.height
        }
        cropperChangableData.rotateDegree = rotateDegree

        this.cropperChangableData=cropperChangableData;
        this.cropperData= cropperData;

        let cropperMovableItemsCopy = this.cropperMovableItems
        let cropperMovableItems = {
          topleft: {
            x: 0,
            y: 0
          },
          topright: {
            x: 0,
            y: 0
          },
          bottomleft: {
            x: 0,
            y: 0
          },
          bottomright: {
            x: 0,
            y: 0
          }
        }

        this.cropperMovableItems= cropperMovableItems;
        var that=this;
        setTimeout(() => {
          that.loadImage(imageInfo.path, rotateWidth, rotateHeight, true)
          // that.setData({
          //     cropperMovableItems: cropperMovableItemsCopy
          // })
        }, 100)

      },

      // 原图按钮被点击
      originalChange(){
        let imageInfo = this.cropperData.imageInfo
        let originalSize = this.cropperChangableData.originalSize
        let width = originalSize.width
        let height = originalSize.height
        let original = !this.cropperData.original

        let compressedScale = original ? 1.0 : 0.4
        let size = cropperUtil.getAdjustSize(W, H, width, height)

        console.log("change original=" + original)

        this.cropperData.original = original
        this.cropperData.scaleInfo = {
          x: width * compressedScale / size.width,
          y: height * compressedScale / size.height
        }

        // 之所以要设置cropperMovableItems，然后延时在设置一次，是因为改变cropperData后，movable-view会莫名其妙移动到左上角
        let cropperMovableItemsCopy = this.cropperMovableItems
        let cropperMovableItems = {
          topleft: {
            x: 0,
            y: 0
          },
          topright: {
            x: 0,
            y: 0
          },
          bottomleft: {
            x: 0,
            y: 0
          },
          bottomright: {
            x: 0,
            y: 0
          }
        }

        this.cropperDat=this.cropperData;
        this.cropperMovableItems=cropperMovableItems;
        var that=this;
        setTimeout(() => {
          that.cropperMovableItems=cropperMovableItemsCopy;
          that.$apply();
        }, 100)

        this.$apply();
        this.drawOriginalImage()
      },

      // 截取选中图片，如果有回调，则调用
      cropImage(){
        let cropperData = this.cropperData
        let mode = cropperData.mode
        let scaleInfo = cropperData.scaleInfo
        let width = cropperData.width
        let height = cropperData.height

        let cropperMovableItems = this.cropperMovableItems

        if (mode == 'rectangle') {
          let maxX = 0, maxY = 0
          for (let key in cropperMovableItems) {
            let item = cropperMovableItems[key]
            maxX = item.x > maxX ? item.x : maxX
            maxY = item.y > maxY ? item.y : maxY
          }

          let minX = maxX, minY = maxY
          for (let key in cropperMovableItems) {
            let item = cropperMovableItems[key]
            minX = item.x < minX ? item.x : minX
            minY = item.y < minY ? item.y : minY
          }

          let w = maxX - minX, h = maxY - minY
          w *= scaleInfo.x
          h *= scaleInfo.y

          let x = minX * scaleInfo.x, y = minY * scaleInfo.y

          console.log('crop rect: x=' + x + ',y=' + y + ',w=' + w + ',h=' + h)

          let ctx = wx.createCanvasContext("originalCanvas")

          wx.showLoading({
            title: '正在截取...',
          })
          wx.canvasToTempFilePath({
            x: x,
            y: y,
            width: w,
            height: h,
            destWidth: w,
            destHeight: h,
            canvasId: 'originalCanvas',
            success:  (res) =>{
              let tempFilePath = res.tempFilePath
              wx.hideLoading()
              this.params.visable=false;
              this.$apply();
              this.$emit("wepyCropperFinsh",tempFilePath);
            },
            fail(res) {
              console.log("fail res:")
              console.log(res)
            }
          })
        }
        else {
          let res = [[0, 0], [0, 0], [0, 0], [0, 0]]
          let points = []
          for (let key in cropperMovableItems) {
            let x = Math.ceil(cropperMovableItems[key].x * scaleInfo.x)
            let y = Math.ceil(cropperMovableItems[key].y * scaleInfo.y)


            let index = 0
            if (key == 'topleft') {
              index = 0
            }
            else if (key == 'bottomleft') {
              index = 1
            }
            else if (key == 'bottomright') {
              index = 2
            }
            else if (key == 'topright') {
              index = 3
            }
            res[index] = [x, y]

            points.push({ x, y })
          }

          cropperUtil.convexHull(points, points.length)
          this.params.visable=false;
          this.$apply();
          this.$emit("wepyCropperFinsh",res);
        }
      }
    };  // 声明页面wxml中标签的事件处理函数。注意，此处只用于声明页面wxml中标签的bind、catch事件，自定义方法需以自定义方法的方式声明

    events = {

    };  // 声明组件之间的事件处理函数



    init(W, H) {
      this.cropperData={
        hidden: true,
          left: 0,
          top: 0,
          width: W,
          height: H,
          itemLength: 50,
          imageInfo: {
          path: '',
            width: 0,
            height: 0
        },
        scaleInfo: {
          x: 1,
            y: 1
        },
        cropCallback: null,
          sizeType: ['original', 'compressed'],    //'original'(default) | 'compressed'
          original: false,  // 默认压缩，压缩比例为截图的0.4
          mode: 'quadrangle', //默认矩形
      }
      this.cropperMovableItems={
        topleft: {
          x: 50,
            y: 50
        },
        topright: {
          x: W - 50,
            y: 50
        },
        bottomleft: {
          x: 50,
            y: H - 50
        },
        bottomright: {
          x: W - 50,
            y: H - 50
        }
      }
      this.cropperChangableData={
        canCrop: true,
          rotateDegree: 0,
          originalSize: {
          width: 0,
            height: 0
        },
        scaleSize: {
          width: 0,
          height: 0
        }
      }
    }

    // 显示cropper，如果有图片则载入
    showCropper(options){
      let src = options.src
      let callback = options.callback
      let sizeType = options.sizeType
      let mode = options.mode

      let filterType = []
      if (sizeType.indexOf('original') > -1) {
        filterType.push('original')
      }
      if (sizeType.indexOf('compressed') > -1) {
        filterType.push('compressed')
      }
      if (filterType.length == 1 && filterType.indexOf('original') > -1) {
        this.cropperData.original = true
      }

      if (mode) {
        this.cropperData.mode = mode
      }
      this.cropperData.cropCallback = callback
      this.cropperData.sizeType = filterType
      this.$apply();

      if (src) {
        wx.getImageInfo({
          src: src,
          success: (res) =>{
            var w = res.width, h = res.height

            this.loadImage(src, w, h, false)
          }
        })
      }
    }







    // 测试


    // 根据图片大小设置canvas大小，并绘制图片
    loadImage(src, width, height, isRotate){
      let size = cropperUtil.getAdjustSize(W, H, width, height)

      // 适应屏幕的位置
      let left = (W - size.width) / 2
      let top = (H - size.height) / 2

      // set data
      let updateData = {}
      let cropperData = this.cropperData

      if (!isRotate) {
        cropperData.imageInfo = {
          path: src,
          width: width,
          height: height
        }
      }
      cropperData.left = left
      cropperData.top = top
      cropperData.width = size.width
      cropperData.height = size.height

      let compressedScale = this.cropperData.original ? 1.0 : 0.4
      // let scaleSize = cropperUtil.getAdjustSize(W, H, width, height)

      cropperData.scaleInfo = {
        x: width * compressedScale / size.width,
        y: height * compressedScale / size.height
      }

      updateData.cropperData = cropperData

      updateData.cropperMovableItems = {
        topleft: {
          x: 50,
          y: 50
        },
        topright: {
          x: size.width - 50,
          y: 50
        },
        bottomleft: {
          x: 50,
          y: size.height - 50
        },
        bottomright: {
          x: size.width - 50,
          y: size.height - 50
        }
      }

      let cropperChangableData = this.cropperChangableData
      cropperChangableData.originalSize = {
        width: width,
        height: height
      }
      cropperChangableData.scaleSize = {
        width: size.width,
        height: size.height
      }

      updateData.cropperChangableData = cropperChangableData

      this.cropperData=updateData.cropperData;
      this.cropperMovableItems=updateData.cropperMovableItems;

      // console.log("loadImage size:" + width + "*" + height)
      this.drawImage({
        path: this.cropperData.imageInfo.path,
        width: width,
        height: height
      })
      // that.drawImage(that.data.cropperData.imageInfo)
      this.drawLines(this.cropperMovableItems, this.cropperData.imageInfo)
    }

    // 清空canvas上的数据
    clearCanvas(imageInfo){
      let cropperData = this.cropperData
      let size = cropperUtil.getAdjustSize(W, H, imageInfo.width, imageInfo.height)

      if (imageInfo.path != '') {
        let compressedScale = this.cropperData.original ? 1.0 : 0.4

        //清空原图
        let ctx = wx.createCanvasContext("originalCanvas")
        ctx.clearRect(0, 0, imageInfo.width * compressedScale, imageInfo.height * compressedScale)
        ctx.draw()

        //清空选择区图片
        let canvas = wx.createCanvasContext("canvas")
        canvas.clearRect(0, 0, size.width, size.height)
        canvas.draw()

        // 清空白线框
        let moveCanvas = wx.createCanvasContext("moveCanvas")
        moveCanvas.clearRect(0, 0, size.width, size.height)
        moveCanvas.draw()
      }
    }

    //绘制图片
    drawImage(imageInfo){
      let cropperData = this.cropperData
      let size = cropperUtil.getAdjustSize(W, H, imageInfo.width, imageInfo.height)

      if (imageInfo.path != '') {
        let path = imageInfo.path
        let compressedScale = this.cropperData.original ? 1.0 : 0.4
        let rotateDegree = this.cropperChangableData.rotateDegree

        //绘制原图
        cropperUtil.drawImageWithDegree(
          "originalCanvas",
          path,
          imageInfo.width * compressedScale,
          imageInfo.height * compressedScale,
          rotateDegree
        )
        // let originalCanvas = wx.createCanvasContext("originalCanvas")
        // originalCanvas.drawImage(path, 0, 0, imageInfo.width * compressedScale, imageInfo.height * compressedScale)
        // originalCanvas.draw()

        //绘制选择区图片
        cropperUtil.drawImageWithDegree("canvas", path, size.width, size.height, rotateDegree)
        // let canvas = wx.createCanvasContext("canvas")
        // canvas.drawImage(path, 0, 0, size.width, size.height)
        // canvas.draw()
        this.$apply();
        console.log("draw=" + path)
      }
    }

    // 单独绘制原图，当切换原图与非原图时使用
    drawOriginalImage(){
      let cropperData = this.cropperData
      let imageInfo = cropperData.imageInfo
      let originalSize = this.cropperChangableData.originalSize

      if (imageInfo.path != '') {
        let path = imageInfo.path
        let compressedScale = this.cropperData.original ? 1.0 : 0.4
        let rotateDegree = this.cropperChangableData.rotateDegree

        //绘制原图
        cropperUtil.drawImageWithDegree(
          "originalCanvas",
          path,
          originalSize.width * compressedScale,
          originalSize.height * compressedScale,
          rotateDegree
        )
        // let originalCanvas = wx.createCanvasContext("originalCanvas")
        // originalCanvas.drawImage(path, 0, 0, imageInfo.width * compressedScale, imageInfo.height * compressedScale)
        // originalCanvas.draw()
      }
    }

    //绘制选框
    drawLines(cropperMovableItems, imageInfo, callback){
      let cropperData = this.cropperData
      let mode = cropperData.mode
      let rotateDegree = this.cropperChangableData.rotateDegree
			let size
			if (rotateDegree % 180 > 0) {
				size = cropperUtil.getAdjustSize(W, H, imageInfo.height, imageInfo.width)
			} else {
				size = cropperUtil.getAdjustSize(W, H, imageInfo.width, imageInfo.height)
			}

      let convexDots = []
      let orderedDots = []
      orderedDots.push(cropperMovableItems['topleft'])
      orderedDots.push(cropperMovableItems['topright'])
      orderedDots.push(cropperMovableItems['bottomright'])
      orderedDots.push(cropperMovableItems['bottomleft'])

      // 获取凸边形的点
      convexDots = cropperUtil.convexHull(orderedDots, orderedDots.length)

      // 四个点组成的四边形是不是凸四边形
      let canCrop = convexDots.length == 4
      if (callback) {
        callback(canCrop)
      }

      let ctx = wx.createCanvasContext("moveCanvas")

      //绘制高亮选中区域
      let rect = cropperUtil.getCropRect(convexDots)

      if (mode == 'rectangle') {
        // 绘制半透明遮罩
        ctx.setFillStyle('rgba(0,0,0,0.5)')
        ctx.fillRect(0, 0, size.width, size.height)

        // 清除选中区域的半透明遮罩，使选中区域高亮
        ctx.setFillStyle('rgba(0,0,0,0)')
        ctx.clearRect(rect.x, rect.y, rect.w, rect.h)

        //绘制选中边框
        ctx.setStrokeStyle('white')
        ctx.setLineWidth(2)
        ctx.beginPath()
        ctx.moveTo(rect.x, rect.y)
        ctx.lineTo(rect.x + rect.w, rect.y)
        ctx.lineTo(rect.x + rect.w, rect.y + rect.h)
        ctx.lineTo(rect.x, rect.y + rect.h)
        ctx.lineTo(rect.x, rect.y)

        ctx.stroke()
        ctx.closePath()
      }
      else {
        //绘制选中边框
        // 如果四个点组成的四边形不是凸四边形，则显示红色，表示不可取
        let color = canCrop ? 'white' : 'red'

        ctx.setStrokeStyle(color)
        ctx.setLineWidth(2)
        ctx.beginPath()
        for (let i = 0, len = convexDots.length; i < len; i++) {
          let dot = convexDots[i]
          if (i == 0) {
            ctx.moveTo(dot.x, dot.y)
          }
          else {
            ctx.lineTo(dot.x, dot.y)
          }
        }
        let dot = convexDots[0]
        ctx.lineTo(dot.x, dot.y)

        ctx.stroke()
        ctx.closePath()
      }

      //绘制四个角
      let cornerType = mode == 'rectangle' ? 'rect' : 'circle'
      ctx.setFillStyle('white')
      ctx.setStrokeStyle('white')

      // 绘制不同样式的角
      if (cornerType == 'circle') {
        for (let i = 0, len = orderedDots.length; i < len; i++) {
          let dot = orderedDots[i]

          ctx.beginPath()
          ctx.arc(dot.x, dot.y, 10, 0, 2 * Math.PI, true)
          ctx.fill()
          ctx.closePath()
        }
      }
      else if (cornerType == 'rect') {
        let len = 20, w = 3.0, offset = w / 2.0

        ctx.setLineWidth(w)
        ctx.beginPath()

        ctx.moveTo(rect.x - offset, rect.y - offset + len)
        ctx.lineTo(rect.x - offset, rect.y - offset)
        ctx.lineTo(rect.x - offset + len, rect.y - offset)

        ctx.moveTo(rect.x + offset + rect.w - len, rect.y - offset)
        ctx.lineTo(rect.x + offset + rect.w, rect.y - offset)
        ctx.lineTo(rect.x + offset + rect.w, rect.y - offset + len)

        ctx.moveTo(rect.x + offset + rect.w, rect.y + offset + rect.h - len)
        ctx.lineTo(rect.x + offset + rect.w, rect.y + offset + rect.h)
        ctx.lineTo(rect.x + offset + rect.w - len, rect.y + offset + rect.h)

        ctx.moveTo(rect.x - offset, rect.y + offset + rect.h - len)
        ctx.lineTo(rect.x - offset, rect.y + offset + rect.h)
        ctx.lineTo(rect.x - offset + len, rect.y + offset + rect.h)

        ctx.stroke()

        ctx.closePath()
      }

      ctx.draw()
    }

    // move events
    setupMoveItem(key, changedTouches, imageInfo, callback){
      let cropperData = this.cropperData
      let cropperMovableItems = this.cropperMovableItems
      let left = cropperData.left
      let top = cropperData.top
      let mode = cropperData.mode
      let size = cropperUtil.getAdjustSize(W, H, imageInfo.width, imageInfo.height)

      if (changedTouches.length == 1) {
        let touch = changedTouches[0]
        let x = touch.clientX
        let y = touch.clientY

        // 相对画布的点
        x = x - left
        y = y - top

        cropperMovableItems[key].x = x
        cropperMovableItems[key].y = y

        // 边界检测，使截图不超出截图区域
        x = x < 0 ? 0 : (x > size.width ? size.width : x)
        y = y < 0 ? 0 : (y > size.height ? size.height : y)
        cropperMovableItems[key].x = x
        cropperMovableItems[key].y = y

        // 如果是在矩形模式下
        if (mode == 'rectangle') {
          // 同时设置相连两个点的位置，是相邻的两个点跟随着移动点动，保证选框为矩形
          if (key == 'topleft') {
            cropperMovableItems['bottomleft'].x = x
            cropperMovableItems['topright'].y = y
          }
          else if (key == 'topright') {
            cropperMovableItems['bottomright'].x = x
            cropperMovableItems['topleft'].y = y
          }
          else if (key == 'bottomleft') {
            cropperMovableItems['topleft'].x = x
            cropperMovableItems['bottomright'].y = y
          }
          else if (key == 'bottomright') {
            cropperMovableItems['topright'].x = x
            cropperMovableItems['bottomleft'].y = y
          }
        }

        this.drawLines(cropperMovableItems, imageInfo, function (canCrop) {
          if (callback) {
            callback(cropperMovableItems, canCrop)
          }
        })
      }
    }




  }
</script>
<style lang="scss" src="wepy-cropper.scss"></style>