utils.js 6.2 KB
Newer Older
DCloud_JSON's avatar
DCloud_JSON 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244
/**
 * 判断手指触摸位置
 */
export function determineDirection(clipX, clipY, clipWidth, clipHeight, currentX, currentY) {
	/*
	 * (右下>>1 右上>>2 左上>>3 左下>>4)
	 */
	let corner;
	/**
	 * 思路:(利用直角坐标系)
	 *  1.找出裁剪框中心点
	 *  2.如点击坐标在上方点与左方点区域内,则点击为左上角
	 *  3.如点击坐标在下方点与右方点区域内,则点击为右下角
	 *  4.其他角同理
	 */
	const mainPoint = [clipX + clipWidth / 2, clipY + clipHeight / 2]; // 中心点
	const currentPoint = [currentX, currentY]; // 触摸点

	if (currentPoint[0] <= mainPoint[0] && currentPoint[1] <= mainPoint[1]) {
		corner = 3; // 左上
	} else if (currentPoint[0] >= mainPoint[0] && currentPoint[1] <= mainPoint[1]) {
		corner = 2; // 右上
	} else if (currentPoint[0] <= mainPoint[0] && currentPoint[1] >= mainPoint[1]) {
		corner = 4; // 左下
	} else if (currentPoint[0] >= mainPoint[0] && currentPoint[1] >= mainPoint[1]) {
		corner = 1; // 右下
	}

	return corner;
}

/**
 * 图片边缘检测检测时,计算图片偏移量
 */
export function calcImageOffset(data, scale) {
	let left = data.imageLeft;
	let top = data.imageTop;
	scale = scale || data.scale;
	
	let imageWidth = data.imageWidth;
	  let imageHeight = data.imageHeight;
	  if ((data.angle / 90) % 2) {
	    imageWidth = data.imageHeight;
	    imageHeight = data.imageWidth;
	  }
	  const {
	      clipX,
	      clipWidth,
	      clipY,
	      clipHeight
	    } = data;

	// 当前图片宽度/高度
	const currentImageSize = (size) => (size * scale) / 2;
	const currentImageWidth = currentImageSize(imageWidth);
	const currentImageHeight = currentImageSize(imageHeight);

	left = clipX + currentImageWidth >= left ? left : clipX + currentImageWidth;
	left = clipX + clipWidth - currentImageWidth <= left ? left : clipX + clipWidth - currentImageWidth;
	top = clipY + currentImageHeight >= top ? top : clipY + currentImageHeight;
	top = clipY + clipHeight - currentImageHeight <= top ? top : clipY + clipHeight - currentImageHeight;
	return {
		left,
		top,
		scale
	};
}

/**
 * 图片边缘检测时,计算图片缩放比例
 */
export function calcImageScale(data, scale) {
	scale = scale || data.scale;
	let {
		imageWidth,
		imageHeight,
		clipWidth,
		clipHeight,
		angle
	} = data
	if ((angle / 90) % 2) {
		imageWidth = imageHeight;
		imageHeight = imageWidth;
	}
	if (imageWidth * scale < clipWidth) {
		scale = clipWidth / imageWidth;
	}
	if (imageHeight * scale < clipHeight) {
		scale = Math.max(scale, clipHeight / imageHeight);
	}
	return scale;
}

/**
 * 计算图片尺寸
 */
export function calcImageSize(width, height, data) {
	let imageWidth = width,
		imageHeight = height;
	let {
		clipWidth,
		clipHeight,
		sysinfo,
		width: originWidth,
		height: originHeight
	} = data
	if (imageWidth && imageHeight) {
		if (imageWidth / imageHeight > (clipWidth || originWidth) / (clipWidth || originHeight)) {
			imageHeight = clipHeight || originHeight;
			imageWidth = (width / height) * imageHeight;
		} else {
			imageWidth = clipWidth || originWidth;
			imageHeight = (height / width) * imageWidth;
		}
	} else {
		let sys = sysinfo || uni.getSystemInfoSync();
		imageWidth = sys.windowWidth;
		imageHeight = 0;
	}
	return {
		imageWidth,
		imageHeight
	};
}

/**
 * 勾股定理求斜边
 */
export function calcPythagoreanTheorem(width, height) {
	return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
}

/**
 * 拖动裁剪框时计算
 */
export function clipTouchMoveOfCalculate(data, event) {
	const clientX = event.touches[0].clientX;
	const clientY = event.touches[0].clientY;

	let {
		clipWidth,
		clipHeight,
		clipY: oldClipY,
		clipX: oldClipX,
		clipStart,
		isLockRatio,
		maxWidth,
		minWidth,
		maxHeight,
		minHeight
	} = data;
	maxWidth = maxWidth / 2;
	minWidth = minWidth / 2;
	minHeight = minHeight / 2;
	maxHeight = maxHeight / 2;

	let width = clipWidth,
		height = clipHeight,
		clipY = oldClipY,
		clipX = oldClipX,
		// 获取裁剪框实际宽度/高度
		// 如果大于最大值则使用最大值
		// 如果小于最小值则使用最小值
		sizecorrect = () => {
			width = width <= maxWidth ? (width >= minWidth ? width : minWidth) : maxWidth;
			height = height <= maxHeight ? (height >= minHeight ? height : minHeight) : maxHeight;
		},
		sizeinspect = () => {
			sizecorrect();
			if ((width > maxWidth || width < minWidth || height > maxHeight || height < minHeight) && isLockRatio) {
				return false;
			} else {
				return true;
			}
		};
	//if (clipStart.corner) {
	height = clipStart.height + (clipStart.corner > 1 && clipStart.corner < 4 ? 1 : -1) * (clipStart.y - clientY);
	//}
	switch (clipStart.corner) {
		case 1:
			width = clipStart.width - clipStart.x + clientX;
			if (isLockRatio) {
				height = width / (clipWidth / clipHeight);
			}
			if (!sizeinspect()) return;
			break;
		case 2:
			width = clipStart.width - clipStart.x + clientX;
			if (isLockRatio) {
				height = width / (clipWidth / clipHeight);
			}
			if (!sizeinspect()) {
				return;
			} else {
				clipY = clipStart.clipY - (height - clipStart.height);
			}

			break;
		case 3:
			width = clipStart.width + clipStart.x - clientX;
			if (isLockRatio) {
				height = width / (clipWidth / clipHeight);
			}
			if (!sizeinspect()) {
				return;
			} else {
				clipY = clipStart.clipY - (height - clipStart.height);
				clipX = clipStart.clipX - (width - clipStart.width);
			}

			break;
		case 4:
			width = clipStart.width + clipStart.x - clientX;
			if (isLockRatio) {
				height = width / (clipWidth / clipHeight);
			}
			if (!sizeinspect()) {
				return;
			} else {
				clipX = clipStart.clipX - (width - clipStart.width);
			}
			break;
		default:
			break;
	}
	return {
		width,
		height,
		clipX,
		clipY
	};
}

/**
 * 单指拖动图片计算偏移
 */
export function imageTouchMoveOfCalcOffset(data, clientXForLeft, clientYForLeft) {
	let left = clientXForLeft - data.touchRelative[0].x,
		top = clientYForLeft - data.touchRelative[0].y;
	return {
		left,
		top
	};
}