yunshangxie/tuniao-ui/components/tn-cropper/index.wxs

var cropper = {
  // 画布x轴起点
  cutX: 0,
  // 画布y轴起点
  cutY: 0,
  // 触摸点信息(手指与图片中心点的相对位置)
  touchRelactive: [{
    x: 0,
    y: 0
  }],
  // 双指触摸时斜边的长度
  hypotenuseLength:0,
  // 是否结束触摸
  touchEndFlag: false,
  // 画布宽高
  canvasWidth: 0,
  canvasHeight: 0,
  // 图片宽高
  imgWidth: 0,
  imgHeight: 0,
  // 图片缩放比例
  scale: 1,
  // 图片旋转角度
  angle: 0,
  // 图片上边距
  imgTop: 0,
  // 图片左边距
  imgLeft: 0,
  // 窗口宽高
  windowWidth: 0,
  windowHeight: 0,
  init: true
}

function bool(str) {
  return str === 'true' || str === true
}

function propChange(prop, oldProp, ownerInstance, instance) {
  if (prop && prop !== 'null') {
    var params = prop.split(',')
    var type = +params[0]
    var dataset = instance.getDataset()
    if (cropper.init || type == 4) {
      cropper.canvasWidth = +dataset.width
      cropper.canvasHeight = +dataset.height
      cropper.imgTop = +dataset.windowheight / 2
      cropper.imgLeft = +dataset.windowwidth / 2
      cropper.imgWidth = +dataset.imgwidth
      cropper.imgHeight = +dataset.imgheight
      cropper.windowHeight = +dataset.windowheight
      cropper.windowWidth = +dataset.windowwidth
      cropper.init = false
    } else if (type == 2 || type == 3) {
      cropper.imgWidth = +dataset.imgwidth
      cropper.imgHeight = +dataset.imgheight
    }
    cropper.angle = +dataset.angle
    if (type == 3) {
      imgTransform(ownerInstance)
    }
    switch(type) {
      case 1:
        setCutCenter(ownerInstance)
        // // 设置裁剪框大小
        computeCutSize(ownerInstance)
        // // 检查裁剪框是否在范围内
        cutDetectionPosition(ownerInstance)
        break
      case 2:
        setCutCenter(ownerInstance)
        break
      case 3:
        imgMarginDetectionScale(ownerInstance)
        break
      case 4:
        imageReset(ownerInstance)
        break
      case 5:
        setCutCenter(ownerInstance)
        break
      default:
        break
    }
  }
}

function touchStart(event, ownerInstance) {
  var touch = event.touches || event.changedTouches
  cropper.touchEndFlag = false
  if (touch.length === 1) {
    cropper.touchRelactive[0] = {
      x: touch[0].pageX - cropper.imgLeft,
      y: touch[0].pageY - cropper.imgTop
    }
  } else {
    var width = Math.abs(touch[0].pageX - touch[1].pageX)
    var height = Math.abs(touch[0].pageY - touch[1].pageY)
    cropper.touchRelactive = [{
      x: touch[0].pageX - cropper.imgLeft,
      y: touch[0].pageY - cropper.imgTop
    },{
      x: touch[1].pageX - cropper.imgLeft,
      y: touch[1].pageY - cropper.imgTop
    }]
    cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
  }
}

function touchMove(event, ownerInstance) {
  var touch = event.touches || event.changedTouches
  if (cropper.touchEndFlag) return
  moveDuring(ownerInstance)
  if (event.touches.length === 1) {
    var left = touch[0].pageX - cropper.touchRelactive[0].x,
      top = touch[0].pageY - cropper.touchRelactive[0].y;
    cropper.imgLeft = left
    cropper.imgTop = top
    imgTransform(ownerInstance)
    imgMarginDetectionPosition(ownerInstance)
  } else {
    var dataset = event.instance.getDataset()
    var minScale = +dataset.minscale
    var maxScale = +dataset.maxscale
    var width = Math.abs(touch[0].pageX - touch[1].pageX),
      height = Math.abs(touch[0].pageY - touch[1].pageY),
      hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
      scale = cropper.scale * (hypotenuse / cropper.hypotenuseLength),
      current_deg = 0;
    scale = scale <= minScale ? minScale : scale
    scale = scale >= maxScale ? maxScale : scale
    cropper.scale = scale
    imgMarginDetectionScale(ownerInstance, true)
    var touchRelative = [{
      x: touch[0].pageX - cropper.imgLeft,
      y: touch[0].pageY - cropper.imgTop
    }, {
      x: touch[1].pageX - cropper.imgLeft,
      y: touch[1].pageY - cropper.imgTop
    }]
    cropper.touchRelactive = touchRelative
    cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
    // 更新视图
    cropper.angle = cropper.angle + current_deg
    imgTransform(ownerInstance)
  }
}

function touchEnd(event, ownerInstance) {
  cropper.touchEndFlag = true
  moveStop(ownerInstance)
  updateData(ownerInstance)
}

function moveDuring(ownerInstance) {
  if (!ownerInstance) return
  ownerInstance.callMethod('moveDuring')
}

function moveStop(ownerInstance) {
  if (!ownerInstance) return
  ownerInstance.callMethod('moveStop')
}

function setCutCenter(ownerInstance) {
  var cutX = (cropper.windowWidth - cropper.canvasWidth) * 0.5
  var cutY = (cropper.windowHeight - cropper.canvasHeight) * 0.5
  
  cropper.imgTop = cropper.imgTop - cropper.cutY + cutY
  cropper.cutY = cutY
  cropper.imgLeft = cropper.imgLeft - cropper.cutX + cutX
  cropper.cutX = cutX
  cutDetectionPosition(ownerInstance)
  imgTransform(ownerInstance)
  updateData(ownerInstance)
}

// 检测剪裁框位置是否在允许的范围内（屏幕内）
function cutDetectionPosition(ownerInstance) {
  var windowHeight = cropper.windowHeight,
    windowWidth = cropper.windowWidth;
  
  // 检测上边距是否在范围内
  var cutDetectionPositionTop = function() {
    if (cropper.cutY < 0) {
      cropper.cutY = 0
    }
    if (cropper.cutY > windowHeight - cropper.canvasHeight) {
      cropper.cutY = windowHeight - cropper.canvasHeight
    }
  }
  
  // 检测左边距是否在范围内
  var cutDetectionPositionLeft = function() {
    if (cropper.cutX < 0) {
      cropper.cutX = 0
    }
    if (cropper.cutX > windowWidth - cropper.canvasWidth) {
      cropper.cutX = windowWidth - cropper.canvasWidth
    }
  }
  
  // 裁剪框坐标处理（如果只写一个参数则另一个默认为0，都不写默认为居中）
  if (cropper.cutX === null && cropper.cutY === null) {
    var cutX = (windowWidth - cropper.canvasWidth) * 0.5,
      cutY = (windowHeight - cropper.canvasHeight) * 0.5;
    cropper.cutX = cutX
    cropper.cutY = cutY
  } else if (cropper.cutX !== null && cropper.cutX !== null) {
    cutDetectionPositionTop()
    cutDetectionPositionLeft()
  } else if (cropper.cutX !== null && cropper.cutY === null) {
    cutDetectionPositionLeft()
    cropper.cutY = (windowHeight - cropper.canvasHeight) / 2
  } else if (cropper.cutX === null && cropper.cutY !== null) {
    cutDetectionPositionTop()
    cropper.cutX = (windowWidth - cropper.canvasWidth) / 2
  }
}

// 图片边缘检测-缩放
function imgMarginDetectionScale(ownerInstance, delay) {
  var scale = cropper.scale,
    imgWidth = cropper.imgWidth,
    imgHeight = cropper.imgHeight;
  if ((cropper.angle / 90) % 2) {
    imgWidth = cropper.imgHeight
    imgHeight = cropper.imgWidth
  }
  if (imgWidth * scale < cropper.canvasWidth) {
    scale = cropper.canvasWidth / imgWidth
  }
  if (imgHeight * scale < cropper.canvasHeight) {
    scale = Math.max(scale, cropper.canvasHeight / imgHeight)
  }
  imgMarginDetectionPosition(ownerInstance, scale, delay)
}

// 图片边缘检测-位置
function imgMarginDetectionPosition(ownerInstance, scale, delay) {
  var left = cropper.imgLeft,
    top = cropper.imgTop,
    imgWidth = cropper.imgWidth,
    imgHeight = cropper.imgHeight;
  scale = scale || cropper.scale
  if ((cropper.angle / 90) % 2) {
    imgWidth = cropper.imgHeight
    imgHeight = cropper.imgWidth
  }
  
  left = cropper.cutX + (imgWidth * scale) / 2 >= left ? left : cropper.cutX + (imgWidth * scale) / 2
  left = cropper.cutX + cropper.canvasWidth - (imgWidth * scale) / 2 <= left ? left : cropper.cutX + cropper.canvasWidth - (imgWidth * scale) / 2
  top = cropper.cutY + (imgHeight * scale) / 2 >= top ? top : cropper.cutY + (imgHeight * scale) / 2
  top = cropper.cutY + cropper.canvasHeight - (imgHeight * scale) / 2 <= top ? top : cropper.cutY + cropper.canvasHeight - (imgHeight * scale) / 2
  
  cropper.imgLeft = left
  cropper.imgTop = top
  cropper.scale = scale
  if (!delay || delay === 'null') {
    imgTransform(ownerInstance)
  }
}

// 改变截取值大小
function computeCutSize(ownerInstance) {
  if (cropper.canvasWidth > cropper.windowWidth) {
    cropper.canvasWidth = cropper.windowWidth
  } else if (cropper.canvasWidth + cropper.cutX > cropper.windowWidth) {
    cropper.cutX = cropper.windowWidth - cropper.cutX
  }
  if (cropper.canvasHeight > cropper.windowHeight) {
    cropper.canvasHeight = cropper.windowHeight
  } else if (cropper.canvasHeight + cropper.cutY > cropper.windowHeight) {
    cropper.cutY = cropper.windowHeight - cropper.cutY
  }
}

// 图片动画
function imgTransform(ownerInstance) {
  try {
    var image = ownerInstance.selectComponent('.tn-cropper__image')
    if (!image) return
    var x = cropper.imgLeft - cropper.imgWidth / 2,
      y = cropper.imgTop - cropper.imgHeight / 2;
    image.setStyle({
      'transform': 'translate3d('+ x + 'px,' + y + 'px,0) scale(' + cropper.scale +') rotate(' + cropper.angle + 'deg)'
    })
  } catch(e) {
    
  }
}

// 图片重置
function imageReset(ownerInstance) {
  cropper.scale = 1
  cropper.angle = 0
  imgTransform(ownerInstance)
}

// 高度变化
function canvasHeight(ownerInstance) {
  if (!ownerInstance) return
  computeCutSize(ownerInstance)
}

// 宽度变化
function canvasWidth(ownerInstance) {
  if (!ownerInstance) return
  computeCutSize(ownerInstance)
}

// 更新数据
function updateData(ownerInstance) {
  if (!ownerInstance) return
  ownerInstance.callMethod('change', {
    cutX: cropper.cutX,
    cutY: cropper.cutY,
    imgWidth: cropper.imgWidth,
    imgHeight: cropper.imgHeight,
    scale: cropper.scale,
    angle: cropper.angle,
    imgTop: cropper.imgTop,
    imgLeft: cropper.imgLeft
  })
}

module.exports = {
  touchStart: touchStart,
  touchMove: touchMove,
  touchEnd: touchEnd,
  propChange: propChange
}