// 本文件由FirstUI授权予新疆天衡创新研究院有限公司(手机号:18 614 072 549,身份证尾号:5A07X5)专用,请尊重知识产权,勿私下传播,违者追究法律责任。 function isPC() { if (typeof navigator !== 'object') return false; var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var flag = true; for (var v = 0; v < Agents.length - 1; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } } return flag; } var isH5 = false if (typeof window === 'object') isH5 = true var cropper = { cutX: 0, cutY: 0, touchRelative: [{ x: 0, y: 0 }], hypotenuseLength: 0, flagEndTouch: false, canvasWidth: 0, canvasHeight: 0, imgWidth: 0, imgHeight: 0, scale: 1, angle: 0, imgTop: 0, imgLeft: 0, windowHeight: 0, windowWidth: 0, init: true } function touchstart(e, ins) { var touch = null if (isH5 && isPC()) { touch = [e]; } else { touch = e.touches || e.changedTouches } cropper.flagEndTouch = false; if (touch.length == 1) { cropper.touchRelative[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.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.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)); } } function moveDuring(ins) { if (!ins) return; ins.callMethod('moveDuring') } function moveStop(ins) { if (!ins) return; ins.callMethod('moveStop') }; function setCutCenter(ins) { var cutY = (cropper.windowHeight - cropper.canvasHeight) * 0.5; var cutX = (cropper.windowWidth - cropper.canvasWidth) * 0.5; cropper.imgTop = cropper.imgTop - cropper.cutY + cutY; cropper.cutY = cutY; cropper.imgLeft = cropper.imgLeft - cropper.cutX + cutX; cropper.cutX = cutX; cutDetectionPosition(ins) imgTransform(ins) updateData(ins) } function touchmove(e, ins) { if (e.preventDefault) { e.preventDefault() } var touch = null if (isH5 && isPC()) { touch = [e]; } else { touch = e.touches || e.changedTouches } if (cropper.flagEndTouch) return; moveDuring(ins); if (touch.length == 1) { var left = touch[0].pageX - cropper.touchRelative[0].x, top = touch[0].pageY - cropper.touchRelative[0].y; cropper.imgLeft = left; cropper.imgTop = top; imgTransform(ins); imgMarginDetectionPosition(ins); } else { var res = e.instance.getDataset(); 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 <= 0.5 ? 0.5 : scale; scale = scale >= 2 ? 2 : scale; cropper.scale = scale; imgMarginDetectionScale(ins, 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.touchRelative = touchRelative; cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)); cropper.angle = cropper.angle + current_deg; imgTransform(ins); } } function touchend(e, ins) { cropper.flagEndTouch = true; moveStop(ins); updateData(ins) } function cutDetectionPosition(ins) { 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; } } if (cropper.cutY == null && cropper.cutX == null) { var cutY = (windowHeight - cropper.canvasHeight) * 0.5; var cutX = (windowWidth - cropper.canvasWidth) * 0.5; cropper.cutY = cutY; cropper.cutX = cutX; } else if (cropper.cutY != null && cropper.cutX != null) { cutDetectionPositionTop(); cutDetectionPositionLeft(); } else if (cropper.cutY != null && cropper.cutX == null) { cutDetectionPositionTop(); cropper.cutX = (windowWidth - cropper.canvasWidth) / 2; } else if (cropper.cutY == null && cropper.cutX != null) { cutDetectionPositionLeft(); cropper.cutY = (windowHeight - cropper.canvasHeight) / 2; } } function imgMarginDetectionScale(ins, delay) { var scale = cropper.scale; var imgWidth = cropper.imgWidth; var 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(ins, scale, delay); } function imgMarginDetectionPosition(ins, scale, delay) { var left = cropper.imgLeft; var top = cropper.imgTop; scale = scale || cropper.scale; var imgWidth = cropper.imgWidth; var imgHeight = cropper.imgHeight; 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(ins); } } function computeCutSize(ins) { 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(ins) { var owner = ins.selectComponent('.fui-cropper__img') if (!owner) return var x = cropper.imgLeft - cropper.imgWidth / 2; var y = cropper.imgTop - cropper.imgHeight / 2; owner.setStyle({ 'transform': 'translate3d(' + x + 'px,' + y + 'px,0) scale(' + cropper.scale + ') rotate(' + cropper .angle + 'deg)' }) } function imageReset(ins) { cropper.scale = 1; cropper.angle = 0; imgTransform(ins); } function updateData(ins) { if (!ins) return; ins.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 }) } function valsChange(prop, oldProp, ownerInstance, ins) { if (prop && prop !== 'null' && ins) { var params = prop.split('_') var type = +params[0] var dataset = ins.getDataset(); if (cropper.init || type == 4) { cropper.canvasWidth = +dataset.width; cropper.canvasHeight = +dataset.height; cropper.windowHeight = +dataset.windowheight; cropper.windowWidth = +dataset.windowwidth; cropper.imgTop = (+dataset.windowheight) / 2; cropper.imgLeft = (+dataset.windowwidth) / 2; cropper.imgWidth = +dataset.imgwidth; cropper.imgHeight = +dataset.imgheight; cropper.init = false } else if (type == 2 || type == 3) { cropper.imgTop = (+dataset.windowheight) / 2; cropper.imgLeft = (+dataset.windowwidth) / 2; 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; } } } var movable = false; function mousedown(e, ins) { if (!isH5 || !isPC()) return touchstart(e, ins) movable = true window.onmousemove = function(event) { if (!isH5 || !isPC() || !movable) return touchmove(event, ins, e) } window.onmouseup = function(event) { if (!isH5 || !isPC() || !movable) return touchend(event, ins, e) movable = false } } module.exports = { touchstart: touchstart, touchmove: touchmove, touchend: touchend, valsChange: valsChange, mousedown: mousedown }