mirror of
https://gitee.com/elegant_wings/dbd-meeting-wx-small.git
synced 2025-06-21 21:19:37 +08:00
546 lines
16 KiB
JavaScript
546 lines
16 KiB
JavaScript
|
/**
|
|||
|
|
* wx-cropper 2.0
|
|||
|
|
* 基于微信小程序的图片裁剪工具
|
|||
|
|
* @author ifmiss
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// 裁剪图片的宽度设置
|
|||
|
|
const CROPPER_WIDTH = 720
|
|||
|
|
|
|||
|
|
// 裁剪显示的最大比例，如果裁剪的图片过长，则做限制，默认最大宽高比例为 宽640 / 高960 (宽高比例)
|
|||
|
|
const CROPPER_RATIO = 0.7
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化裁剪的比例 如果是正方形则是 1
|
|||
|
|
* 比例为宽高比 建议区间为 0.25 - 4
|
|||
|
|
* 设置为0的时候则是不固定宽高
|
|||
|
|
*/
|
|||
|
|
const CROPPER_AREA_RATIO = 1
|
|||
|
|
|
|||
|
|
// 裁剪的位置
|
|||
|
|
let CUT_L, // 初始化拖拽元素的left值
|
|||
|
|
CUT_T, // 初始化拖拽元素的top值
|
|||
|
|
CUT_R, // 初始化拖拽元素的
|
|||
|
|
CUT_B, // 初始化拖拽元素的
|
|||
|
|
|
|||
|
|
// 裁剪的宽度
|
|||
|
|
CUT_W, // 初始化拖拽元素的宽度
|
|||
|
|
CUT_H, // 初始化拖拽元素的高度
|
|||
|
|
|
|||
|
|
// 拖拽相关
|
|||
|
|
PAGE_X, // 手按下的x位置
|
|||
|
|
PAGE_Y, // 手按下y的位置
|
|||
|
|
T_PAGE_X, // 手移动的时候x的位置
|
|||
|
|
T_PAGE_Y, // 手移动的时候Y的位置x
|
|||
|
|
|
|||
|
|
// 图片比例
|
|||
|
|
IMG_RATIO,
|
|||
|
|
|
|||
|
|
// 图片实际宽高
|
|||
|
|
IMG_REAL_W, // 图片实际的宽度
|
|||
|
|
IMG_REAL_H, // 图片实际的高度
|
|||
|
|
|
|||
|
|
// 裁剪图片区域的信息
|
|||
|
|
CROPPER_IMG_W,
|
|||
|
|
CROPPER_IMG_H,
|
|||
|
|
|
|||
|
|
// 移动的比例
|
|||
|
|
DRAFG_MOVE_RATIO = 750 / wx.getSystemInfoSync().windowWidth, //移动时候的比例,
|
|||
|
|
|
|||
|
|
|
|||
|
|
INIT_DRAG_POSITION = 0, // 初始化屏幕宽度和裁剪区域的宽度之差，用于设置初始化裁剪的宽度
|
|||
|
|
|
|||
|
|
DRAW_IMAGE_W, // 设置生成的图片宽度
|
|||
|
|
|
|||
|
|
// 最大可显示得图片宽度，需要设定最大值，否则安卓部分机器会闪退, 控制qualityWidth的最大值
|
|||
|
|
maxQW = 2550
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 最小裁剪宽度 由于设置了裁剪的UI样式，裁剪的宽高必须要有最小宽度，这个宽度是裁剪长或者宽的最短一方的宽度
|
|||
|
|
* 如 400 200
|
|||
|
|
* 那么如果只能设置为100的时候
|
|||
|
|
* 那么最小缩放到200 100的效果，之后只能放大不能缩小
|
|||
|
|
*/
|
|||
|
|
const MIN_CROPPER_DIS = 100
|
|||
|
|
const app = getApp()
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
Page({
|
|||
|
|
/**
|
|||
|
|
* 页面的初始数据
|
|||
|
|
*/
|
|||
|
|
data: {
|
|||
|
|
// 之后可以动态替换
|
|||
|
|
// imageSrc: 'http://www.bing.com/az/hprichbg/rb/BulgariaPerseids_ZH-CN11638911564_1920x1080.jpg',
|
|||
|
|
// imageSrc: 'http://www.bing.com/az/hprichbg/rb/BulgariaPerseids_ZH-CN11638911564_1920x1080.jpg',
|
|||
|
|
imageSrc: '/images/vcard.png',
|
|||
|
|
// 是否显示图片(在图片加载完成之后设置为true)
|
|||
|
|
isShowImg: false,
|
|||
|
|
|
|||
|
|
// 初始化的宽高
|
|||
|
|
cropperInitW: CROPPER_WIDTH,
|
|||
|
|
cropperInitH: CROPPER_WIDTH,
|
|||
|
|
|
|||
|
|
// 动态的宽高
|
|||
|
|
cropperW: CROPPER_WIDTH,
|
|||
|
|
cropperH: CROPPER_WIDTH,
|
|||
|
|
|
|||
|
|
// 动态的left top值
|
|||
|
|
cropperL: 0,
|
|||
|
|
cropperT: 0,
|
|||
|
|
|
|||
|
|
// 图片缩放值
|
|||
|
|
scaleP: 0,
|
|||
|
|
|
|||
|
|
// 裁剪框 宽高
|
|||
|
|
cutL: 0,
|
|||
|
|
cutT: 0,
|
|||
|
|
cutB: 0,
|
|||
|
|
cutR: 0,
|
|||
|
|
|
|||
|
|
qualityWidth: DRAW_IMAGE_W,
|
|||
|
|
|
|||
|
|
innerAspectRadio: DRAFG_MOVE_RATIO
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 生命周期函数--监听页面加载
|
|||
|
|
*/
|
|||
|
|
onLoad: function (e) {
|
|||
|
|
this.setData({
|
|||
|
|
imageSrc: e.img
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 生命周期函数--监听页面初次渲染完成
|
|||
|
|
*/
|
|||
|
|
onReady: function () {
|
|||
|
|
// 初始化
|
|||
|
|
this.loadImage();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 选择本地图片
|
|||
|
|
* 基于底部中间的按钮的点击事件
|
|||
|
|
*/
|
|||
|
|
getImage: function () {
|
|||
|
|
var _this = this
|
|||
|
|
wx.chooseImage({
|
|||
|
|
success: function (res) {
|
|||
|
|
_this.setData({
|
|||
|
|
isShowImg: false,
|
|||
|
|
imageSrc: res.tempFilePaths[0],
|
|||
|
|
})
|
|||
|
|
_this.loadImage();
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化图片信息
|
|||
|
|
* 获取图片内容，并初始化裁剪框
|
|||
|
|
*/
|
|||
|
|
loadImage: function () {
|
|||
|
|
var _this = this
|
|||
|
|
wx.showLoading({
|
|||
|
|
title: '图片加载中...',
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
wx.getImageInfo({
|
|||
|
|
src: _this.data.imageSrc,
|
|||
|
|
success: function success(res) {
|
|||
|
|
DRAW_IMAGE_W = IMG_REAL_W = res.width
|
|||
|
|
IMG_REAL_H = res.height
|
|||
|
|
IMG_RATIO = IMG_REAL_W / IMG_REAL_H
|
|||
|
|
|
|||
|
|
let MIN_RANGE = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H
|
|||
|
|
|
|||
|
|
// 用于设置图片的比例(以设置裁剪的比例，方便定位裁剪的left right top bottom)
|
|||
|
|
INIT_DRAG_POSITION = MIN_RANGE > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : MIN_RANGE
|
|||
|
|
|
|||
|
|
// 拿到裁剪位置
|
|||
|
|
let cropperPosition = _this.initCropperPosition(IMG_RATIO, CROPPER_WIDTH)
|
|||
|
|
|
|||
|
|
// 根据图片的宽高显示不同的效果 保证图片可以正常显示
|
|||
|
|
if (IMG_RATIO >= 1) {
|
|||
|
|
_this.setData({
|
|||
|
|
cropperW: CROPPER_WIDTH,
|
|||
|
|
cropperH: CROPPER_WIDTH / IMG_RATIO,
|
|||
|
|
// 初始化left right
|
|||
|
|
cropperL: Math.ceil((CROPPER_WIDTH - CROPPER_WIDTH) / 2),
|
|||
|
|
cropperT: 0,
|
|||
|
|
cutL: cropperPosition.left,
|
|||
|
|
cutT: cropperPosition.top,
|
|||
|
|
cutR: cropperPosition.right,
|
|||
|
|
cutB: cropperPosition.bottom,
|
|||
|
|
// 图片缩放值
|
|||
|
|
scaleP: IMG_REAL_W / CROPPER_WIDTH,
|
|||
|
|
qualityWidth: DRAW_IMAGE_W > maxQW ? maxQW : DRAW_IMAGE_W,
|
|||
|
|
innerAspectRadio: IMG_RATIO
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
// 此时需要判断图片的比例以设定显示裁剪区域的比例
|
|||
|
|
// let cropper_real_ratio = CROPPER_RATIO > IMG_RATIO ? CROPPER_RATIO : IMG_RATIO
|
|||
|
|
|
|||
|
|
if (CROPPER_RATIO > IMG_RATIO) {
|
|||
|
|
CROPPER_IMG_W = CROPPER_WIDTH / CROPPER_RATIO * IMG_RATIO
|
|||
|
|
CROPPER_IMG_H = CROPPER_WIDTH / CROPPER_RATIO
|
|||
|
|
} else {
|
|||
|
|
CROPPER_IMG_W = CROPPER_WIDTH
|
|||
|
|
CROPPER_IMG_H = CROPPER_IMG_W / IMG_RATIO
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 动态生成新的CROPPER的真实宽度 高度
|
|||
|
|
// CROPPER_IMG_W = CROPPER_WIDTH * cropper_real_ratio
|
|||
|
|
// CROPPER_IMG_H = CROPPER_WIDTH / cropper_real_ratio / IMG_RATIO
|
|||
|
|
// console.log(cropper_real_ratio)
|
|||
|
|
// console.log(CROPPER_IMG_W)
|
|||
|
|
// console.log(CROPPER_IMG_H)
|
|||
|
|
// console.log(CROPPER_IMG_W / CROPPER_IMG_H)
|
|||
|
|
|
|||
|
|
_this.setData({
|
|||
|
|
cropperW: CROPPER_IMG_W,
|
|||
|
|
cropperH: CROPPER_IMG_H,
|
|||
|
|
// 初始化left right
|
|||
|
|
cropperL: Math.ceil((CROPPER_WIDTH - CROPPER_IMG_W) / 2),
|
|||
|
|
cropperT: 0,
|
|||
|
|
|
|||
|
|
cutL: cropperPosition.left,
|
|||
|
|
cutT: cropperPosition.top,
|
|||
|
|
cutR: cropperPosition.right,
|
|||
|
|
cutB: cropperPosition.bottom,
|
|||
|
|
// 图片缩放值
|
|||
|
|
scaleP: IMG_REAL_W / CROPPER_IMG_W,
|
|||
|
|
qualityWidth: DRAW_IMAGE_W > maxQW ? maxQW : DRAW_IMAGE_W,
|
|||
|
|
innerAspectRadio: IMG_RATIO
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
_this.setData({
|
|||
|
|
isShowImg: true
|
|||
|
|
})
|
|||
|
|
wx.hideLoading()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化裁剪区域的
|
|||
|
|
* left right top bottom
|
|||
|
|
* 需要 CROPPER_AREA_RATIO 来判断
|
|||
|
|
* @return 返回裁剪的left, right, top bottom的值
|
|||
|
|
*/
|
|||
|
|
initCropperPosition(radio) {
|
|||
|
|
let left = 0,
|
|||
|
|
right = 0,
|
|||
|
|
top = 0,
|
|||
|
|
bottom = 0,
|
|||
|
|
cropperW,
|
|||
|
|
cropperH
|
|||
|
|
// 如果 CROPPER_AREA_RATIO = 0 则不限制固定宽高
|
|||
|
|
if (CROPPER_AREA_RATIO === 0) return {
|
|||
|
|
left,
|
|||
|
|
right,
|
|||
|
|
top,
|
|||
|
|
bottom
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 宽大于等于高
|
|||
|
|
if (radio >= 1) {
|
|||
|
|
cropperW = CROPPER_WIDTH
|
|||
|
|
cropperH = CROPPER_WIDTH / IMG_RATIO
|
|||
|
|
if (radio > CROPPER_AREA_RATIO) {
|
|||
|
|
return {
|
|||
|
|
left: Math.ceil((cropperW - cropperH * CROPPER_AREA_RATIO) / 2),
|
|||
|
|
right: Math.ceil((cropperW - cropperH * CROPPER_AREA_RATIO) / 2),
|
|||
|
|
top: 0,
|
|||
|
|
bottom: 0
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
left: 0,
|
|||
|
|
right: 0,
|
|||
|
|
top: Math.ceil((cropperH - cropperW / CROPPER_AREA_RATIO) / 2),
|
|||
|
|
bottom: Math.ceil((cropperH - cropperW / CROPPER_AREA_RATIO) / 2)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 此时需要判断图片的比例以设定显示裁剪区域的比例
|
|||
|
|
let cropper_real_ratio = CROPPER_RATIO > IMG_RATIO ? CROPPER_RATIO : IMG_RATIO
|
|||
|
|
// 高大于宽
|
|||
|
|
cropperW = CROPPER_WIDTH / cropper_real_ratio * IMG_RATIO
|
|||
|
|
cropperH = CROPPER_WIDTH / cropper_real_ratio
|
|||
|
|
if (radio < CROPPER_AREA_RATIO) {
|
|||
|
|
return {
|
|||
|
|
left: 0,
|
|||
|
|
right: 0,
|
|||
|
|
top: Math.ceil((cropperH - cropperW / CROPPER_AREA_RATIO) / 2),
|
|||
|
|
bottom: Math.ceil((cropperH - cropperW / CROPPER_AREA_RATIO) / 2)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
left: Math.ceil((cropperW - cropperH * CROPPER_AREA_RATIO) / 2),
|
|||
|
|
right: Math.ceil((cropperW - cropperH * CROPPER_AREA_RATIO) / 2),
|
|||
|
|
top: 0,
|
|||
|
|
bottom: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 拖动时候触发的touchStart事件
|
|||
|
|
*/
|
|||
|
|
contentStartMove(e) {
|
|||
|
|
PAGE_X = e.touches[0].pageX
|
|||
|
|
PAGE_Y = e.touches[0].pageY
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 拖动时候触发的touchMove事件
|
|||
|
|
*/
|
|||
|
|
contentMoveing(e) {
|
|||
|
|
var _this = this
|
|||
|
|
var dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
|||
|
|
var dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO * DRAFG_MOVE_RATIO
|
|||
|
|
|
|||
|
|
// 左移右移
|
|||
|
|
if (dragLengthX > 0) {
|
|||
|
|
if (this.data.cutL - dragLengthX < 0) dragLengthX = this.data.cutL
|
|||
|
|
} else {
|
|||
|
|
if (this.data.cutR + dragLengthX < 0) dragLengthX = -this.data.cutR
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 上移下移
|
|||
|
|
if (dragLengthY > 0) {
|
|||
|
|
if (this.data.cutT - dragLengthY < 0) dragLengthY = this.data.cutT
|
|||
|
|
} else {
|
|||
|
|
if (this.data.cutB + dragLengthY < 0) dragLengthY = -this.data.cutB
|
|||
|
|
}
|
|||
|
|
this.setData({
|
|||
|
|
cutL: this.data.cutL - dragLengthX,
|
|||
|
|
cutT: this.data.cutT - dragLengthY,
|
|||
|
|
cutR: this.data.cutR + dragLengthX,
|
|||
|
|
cutB: this.data.cutB + dragLengthY
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
PAGE_X = e.touches[0].pageX
|
|||
|
|
PAGE_Y = e.touches[0].pageY
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
contentTouchEnd() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 点击取消关闭裁剪页面
|
|||
|
|
*/
|
|||
|
|
close() {
|
|||
|
|
// wx.redirectTo()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 点击完成之后
|
|||
|
|
* 生成图片信息
|
|||
|
|
*/
|
|||
|
|
getImageInfo() {
|
|||
|
|
var _this = this
|
|||
|
|
wx.showLoading({
|
|||
|
|
title: '图片生成中...',
|
|||
|
|
})
|
|||
|
|
// 将图片写入画布
|
|||
|
|
const ctx = wx.createCanvasContext('myCanvas')
|
|||
|
|
let w = this.data.qualityWidth
|
|||
|
|
let h = this.data.qualityWidth / IMG_RATIO
|
|||
|
|
ctx.drawImage(_this.data.imageSrc, 0, 0, w, h);
|
|||
|
|
ctx.draw(true, () => {
|
|||
|
|
// 获取画布要裁剪的位置和宽度 均为百分比 * 画布中图片的宽度 保证了在微信小程序中裁剪的图片模糊 位置不对的问题
|
|||
|
|
var canvasW = ((_this.data.cropperW - _this.data.cutL - _this.data.cutR) / _this.data.cropperW) * w
|
|||
|
|
var canvasH = ((_this.data.cropperH - _this.data.cutT - _this.data.cutB) / _this.data.cropperH) * h
|
|||
|
|
var canvasL = (_this.data.cutL / _this.data.cropperW) * w
|
|||
|
|
var canvasT = (_this.data.cutT / _this.data.cropperH) * h
|
|||
|
|
|
|||
|
|
// 生成图片
|
|||
|
|
wx.canvasToTempFilePath({
|
|||
|
|
x: canvasL,
|
|||
|
|
y: canvasT,
|
|||
|
|
width: canvasW,
|
|||
|
|
height: canvasH,
|
|||
|
|
destWidth: canvasW,
|
|||
|
|
destHeight: canvasH,
|
|||
|
|
quality: 0.5,
|
|||
|
|
canvasId: 'myCanvas',
|
|||
|
|
success: function (res) {
|
|||
|
|
wx.hideLoading()
|
|||
|
|
app.Upload(res.tempFilePath, function (res) {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
app.AjaxRequest('POST', {
|
|||
|
|
'content-type': 'application/json',
|
|||
|
|
'Authorization': 'Bearer ' + app.Getopenid()
|
|||
|
|
}, '/user/profile/update', {
|
|||
|
|
avatar: res.fileName
|
|||
|
|
}, function (ret) {
|
|||
|
|
wx.navigateBack()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设置大小的时候触发的touchStart事件
|
|||
|
|
* 存数据
|
|||
|
|
*/
|
|||
|
|
dragStart(e) {
|
|||
|
|
T_PAGE_X = e.touches[0].pageX
|
|||
|
|
T_PAGE_Y = e.touches[0].pageY
|
|||
|
|
CUT_L = this.data.cutL
|
|||
|
|
CUT_R = this.data.cutR
|
|||
|
|
CUT_B = this.data.cutB
|
|||
|
|
CUT_T = this.data.cutT
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设置大小的时候触发的touchMove事件
|
|||
|
|
* 根据dragType判断类型
|
|||
|
|
* 4个方向的边线拖拽效果
|
|||
|
|
* 右下角按钮的拖拽效果
|
|||
|
|
*/
|
|||
|
|
dragMove(e) {
|
|||
|
|
var _this = this
|
|||
|
|
var dragType = e.target.dataset.drag
|
|||
|
|
switch (dragType) {
|
|||
|
|
case 'right':
|
|||
|
|
var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
|||
|
|
if (CUT_R + dragLength < 0) dragLength = -CUT_R
|
|||
|
|
if (CUT_R + dragLength + MIN_CROPPER_DIS > this.data.cropperW - this.data.cutL) dragLength = (this.data.cropperW - this.data.cutL) - MIN_CROPPER_DIS - CUT_R
|
|||
|
|
|
|||
|
|
if (CROPPER_AREA_RATIO) {
|
|||
|
|
// 底部线的限制 不允许超出
|
|||
|
|
// dragLength 最大不能超过CUT_B
|
|||
|
|
if (CUT_B + dragLength / CROPPER_AREA_RATIO <= 0) {
|
|||
|
|
this.setData({
|
|||
|
|
cutB: 0
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.setData({
|
|||
|
|
cutR: CUT_R + dragLength,
|
|||
|
|
cutB: CUT_B + dragLength / CROPPER_AREA_RATIO
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.setData({
|
|||
|
|
cutR: CUT_R + dragLength
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
break;
|
|||
|
|
case 'left':
|
|||
|
|
var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
|||
|
|
if (CUT_L - dragLength < 0) dragLength = CUT_L
|
|||
|
|
if ((CUT_L - dragLength + MIN_CROPPER_DIS) > (this.data.cropperW - this.data.cutR)) dragLength = CUT_L - (this.data.cropperW - this.data.cutR) + MIN_CROPPER_DIS
|
|||
|
|
|
|||
|
|
if (CROPPER_AREA_RATIO) {
|
|||
|
|
// 顶部线的限制 不允许超出
|
|||
|
|
// dragLength 最大不能超过CUT_T
|
|||
|
|
if (CUT_T - dragLength / CROPPER_AREA_RATIO < 0) {
|
|||
|
|
this.setData({
|
|||
|
|
cutT: 0
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.setData({
|
|||
|
|
cutL: CUT_L - dragLength,
|
|||
|
|
cutT: CUT_T - dragLength / CROPPER_AREA_RATIO
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.setData({
|
|||
|
|
cutL: CUT_L - dragLength
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'top':
|
|||
|
|
var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
|
|||
|
|
if (CUT_T - dragLength < 0) dragLength = CUT_T
|
|||
|
|
if ((CUT_T - dragLength + MIN_CROPPER_DIS) > this.data.cropperH - this.data.cutB) dragLength = CUT_T - (this.data.cropperH - this.data.cutB) + MIN_CROPPER_DIS
|
|||
|
|
|
|||
|
|
if (CROPPER_AREA_RATIO) {
|
|||
|
|
// left 线的限制 不允许超出
|
|||
|
|
// dragLength 最大不能超过CUT_L
|
|||
|
|
if (CUT_L - dragLength * CROPPER_AREA_RATIO < 0) {
|
|||
|
|
this.setData({
|
|||
|
|
cutL: 0
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.setData({
|
|||
|
|
cutL: CUT_L - dragLength * CROPPER_AREA_RATIO,
|
|||
|
|
cutT: CUT_T - dragLength
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.setData({
|
|||
|
|
cutT: CUT_T - dragLength
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'bottom':
|
|||
|
|
var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
|
|||
|
|
if (CUT_B + dragLength < 0) dragLength = -CUT_B
|
|||
|
|
if (CUT_B + dragLength + MIN_CROPPER_DIS > this.data.cropperH - this.data.cutT) dragLength = (this.data.cropperH - this.data.cutT) - MIN_CROPPER_DIS - CUT_B
|
|||
|
|
|
|||
|
|
if (CROPPER_AREA_RATIO) {
|
|||
|
|
// right 线的限制 不允许超出
|
|||
|
|
// dragLength 最大不能超过 CUT_R
|
|||
|
|
if (CUT_R + dragLength * CROPPER_AREA_RATIO < 0) {
|
|||
|
|
this.setData({
|
|||
|
|
cutR: 0
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.setData({
|
|||
|
|
cutR: CUT_R + dragLength * CROPPER_AREA_RATIO,
|
|||
|
|
cutB: CUT_B + dragLength
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.setData({
|
|||
|
|
cutB: CUT_B + dragLength
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'rightBottom':
|
|||
|
|
var dragType = e.target.dataset.drag
|
|||
|
|
var dragLengthX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
|||
|
|
var dragLengthY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
|
|||
|
|
if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B
|
|||
|
|
if (CUT_B + dragLengthY + MIN_CROPPER_DIS > this.data.cropperH - this.data.cutT) dragLengthY = (this.data.cropperH - this.data.cutT) - MIN_CROPPER_DIS - CUT_B
|
|||
|
|
if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R
|
|||
|
|
if (CUT_R + dragLengthX + MIN_CROPPER_DIS > this.data.cropperW - this.data.cutL) dragLengthX = (this.data.cropperW - this.data.cutL) - MIN_CROPPER_DIS - CUT_R
|
|||
|
|
|
|||
|
|
if (CROPPER_AREA_RATIO) {
|
|||
|
|
// right 线的限制 不允许超出
|
|||
|
|
// dragLength 最大不能超过 CUT_R
|
|||
|
|
if (CUT_R + dragLengthY * CROPPER_AREA_RATIO < 0) {
|
|||
|
|
this.setData({
|
|||
|
|
cutR: 0
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.setData({
|
|||
|
|
cutR: CUT_R + dragLengthY * CROPPER_AREA_RATIO,
|
|||
|
|
cutB: CUT_B + dragLengthY
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.setData({
|
|||
|
|
cutB: CUT_B + dragLengthY,
|
|||
|
|
cutR: CUT_R + dragLengthX
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|