var startTouchs = [];
|
var touchType = ''
|
var startDistance = 0;
|
var touchCenter = [];
|
var cropperRect = null;
|
var imageRect = null;
|
var directionX = 0;
|
var directionY = 0;
|
var ratio = 0;
|
// 操作时改变的对象
|
var changes = {
|
imageRect: null,
|
cropperRect: null
|
}
|
// 计算旋转后真实的图片大小
|
function getRealSize(){
|
var w = changes.imageRect.width
|
var h = changes.imageRect.height
|
var l = changes.imageRect.left
|
var t = changes.imageRect.top
|
// 内斜边
|
var R = Math.sqrt(w*w+h*h)
|
var angle = Math.atan(h/w) / Math.PI * 180
|
var rorate = rotateAngle%90
|
var direct = Math.floor(rotateAngle/90)
|
var width = R*Math.cos(ang2deg(angle-rorate))
|
var height = R*Math.sin(ang2deg(angle+rorate))
|
if(direct % 2 === 1){
|
var temp = width
|
width = height
|
height = temp
|
}
|
return {
|
width: width,
|
height: height,
|
left: l - (width - w)/2,
|
top: t - (height - h)/2,
|
dw: width - w,
|
dh: height - h
|
}
|
}
|
export default {
|
computed: {
|
imageStyle() {
|
const imageRect = this.imageRect
|
if (imageRect) {
|
return {
|
left: imageRect.left + 'px',
|
top: imageRect.top + 'px',
|
width: imageRect.width + 'px',
|
height: imageRect.height + 'px'
|
}
|
} else {
|
return {}
|
}
|
},
|
cropperStyle() {
|
const cropperRect = this.cropperRect
|
if (cropperRect) {
|
return {
|
left: cropperRect.left + 'px',
|
top: cropperRect.top + 'px',
|
width: cropperRect.width + 'px',
|
height: cropperRect.height + 'px'
|
}
|
} else {
|
return {}
|
}
|
}
|
},
|
methods: {
|
touchStart() {
|
let ev;
|
if (arguments.length == 3) {
|
directionX = arguments[0];
|
directionY = arguments[1];
|
ev = arguments[2];
|
touchType = "controller";
|
} else {
|
touchType = "image";
|
ev = arguments[0];
|
}
|
startTouchs = ev.touches;
|
changes = {
|
imageRect: this.imageRect,
|
cropperRect: this.cropperRect
|
};
|
ratio = this.ratio;
|
cropperRect = {
|
...changes.cropperRect
|
}
|
imageRect = {
|
...changes.imageRect
|
}
|
if (startTouchs.length == 2) {
|
const imageRect = this.imageRect
|
var x1 = startTouchs[0].clientX
|
var y1 = startTouchs[0].clientY
|
var x2 = startTouchs[1].clientX
|
var y2 = startTouchs[1].clientY
|
var distance = Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)
|
startDistance = Math.sqrt(distance)
|
var leftPercent = ((x1 + x2) / 2 - imageRect.left) / imageRect.width
|
var topPercent = ((y1 + y2) / 2 - imageRect.top) / imageRect.height
|
touchCenter = [leftPercent, topPercent]
|
}
|
},
|
touchMove(ev) {
|
if(startTouchs.length!==ev.touches.length) return
|
var touches = ev.touches;
|
var changeX1 = touches[0].clientX - startTouchs[0].clientX;
|
var changeY1 = touches[0].clientY - startTouchs[0].clientY;
|
if (startTouchs.length == 1) {
|
if (touchType === 'image') {
|
changes.imageRect.left = imageRect.left + changeX1;
|
changes.imageRect.top = imageRect.top + changeY1;
|
// console.log(startTouchs.length,ev.touches.length)
|
} else if (touchType === 'controller') {
|
var changeX = changeX1 * directionX;
|
var changeY = changeY1 * directionY;
|
// 比例缩放控制
|
if (ratio !== 0) {
|
if (directionX * directionY !== 0) {
|
if (changeX / ratio > changeY) {
|
changeY = changeX / ratio
|
changeX = changeY * ratio
|
} else {
|
changeX = changeY * ratio
|
changeY = changeX / ratio
|
}
|
} else {
|
if (directionX == 0) {
|
changeX = changeY * ratio
|
} else {
|
changeY = changeX / ratio
|
}
|
}
|
}
|
var realSize = getRealSize()
|
var width = cropperRect.width + changeX
|
var height = cropperRect.height + changeY
|
var imageRight = realSize.left+realSize.width
|
var imageBottom = realSize.top+realSize.height
|
if (directionX != -1) {
|
if (cropperRect.left + width > imageRight) {
|
width = imageRight - cropperRect.left
|
if (ratio !== 0) {
|
height = width / ratio
|
}
|
}
|
} else {
|
var cLeft = cropperRect.left - changeX
|
if (cLeft < realSize.left) {
|
width = cropperRect.left + cropperRect.width - realSize.left
|
if (ratio !== 0) {
|
height = width / ratio
|
}
|
}
|
}
|
// 判断是否触底
|
if (directionY != -1) {
|
if (cropperRect.top + height > imageBottom) {
|
height = imageBottom - cropperRect.top
|
if (ratio !== 0) {
|
width = height * ratio
|
}
|
}
|
} else {
|
var cTop = cropperRect.top - changeY
|
if (cTop < realSize.top) {
|
height = cropperRect.top + cropperRect.height - realSize.top
|
if (ratio !== 0) {
|
width = height * ratio
|
}
|
}
|
}
|
if (directionX == -1) {
|
changes.cropperRect.left = cropperRect.left + cropperRect.width - width
|
}
|
if (directionY == -1) {
|
changes.cropperRect.top = cropperRect.top + cropperRect.height - height
|
}
|
// 边界控制
|
changes.cropperRect.width = width
|
changes.cropperRect.height = height
|
}
|
} else if (touches.length == 2 && startTouchs.length == 2) {
|
var changeX2 = touches[0].clientX - touches[1].clientX;
|
var changeY2 = touches[0].clientY - touches[1].clientY;
|
var distance = Math.pow(changeX2, 2) + Math.pow(changeY2, 2)
|
distance = Math.sqrt(distance)
|
// 放大比例
|
var scaleRate = distance / startDistance
|
this.imageScale(scaleRate)
|
}
|
},
|
touchEnd(ev) {
|
// console.log('end',ev)
|
if(ev.touches.length!==0) return
|
if (touchType === "image") {
|
var cropperLeft = cropperRect.left
|
var cropperRight = cropperRect.left + cropperRect.width
|
var cropperTop = cropperRect.top
|
var cropperBottom = cropperTop + cropperRect.height
|
var cropperRate = cropperRect.width / cropperRect.height
|
var realSize = getRealSize()
|
var rate = realSize.width / realSize.height
|
if (realSize.width < cropperRect.width || realSize.height < cropperRect.height) {
|
var scale = 1
|
if (rate < cropperRate) {
|
scale = cropperRect.width / realSize.width
|
} else {
|
scale = cropperRect.height / realSize.height
|
}
|
imageRect.width = changes.imageRect.width
|
imageRect.height = changes.imageRect.height
|
this.imageScale(scale)
|
}
|
// 边界控制start
|
if (cropperLeft < realSize.left) {
|
changes.imageRect.left = cropperLeft + realSize.dw/2
|
}
|
if (cropperRight > realSize.left + realSize.width) {
|
changes.imageRect.left = cropperRight - realSize.width + realSize.dw/2
|
}
|
if (cropperTop < realSize.top) {
|
changes.imageRect.top = cropperTop + realSize.dh/2
|
}
|
if (cropperBottom > realSize.top + realSize.height) {
|
changes.imageRect.top = cropperBottom - realSize.height + realSize.dh/2
|
}
|
// 边界控制end
|
}
|
this.updateData({
|
cropperRect: changes.cropperRect,
|
imageRect: changes.imageRect,
|
})
|
touchType = ""
|
startTouchs = []
|
return false;
|
},
|
imageScale(scaleRate) {
|
var cw = imageRect.width * (scaleRate - 1)
|
var ch = imageRect.height * (scaleRate - 1)
|
changes.imageRect = {
|
width: imageRect.width + cw,
|
height: imageRect.height + ch,
|
left: imageRect.left - cw * (touchCenter[0]),
|
top: imageRect.top - ch * (touchCenter[1])
|
}
|
}
|
}
|
}
|
