注释渐变色功能和作品广场

src/tool/util.js

@@ -149,11 +149,13 @@ const formatTime = (timestamp, fmt) => {//吧时间戳转为YYYY-MM-DD hh:mm:ss
 const isMoible = () => {//判断是否是移动端
 	let is_mobile = navigator.userAgent.toLowerCase().match(/(ipad|ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
 	// alert(navigator.userAgent.toLowerCase())
-	var isiPad = /iPad/.test(navigator.platform) || (navigator.maxTouchPoints && navigator.maxTouchPoints > 2);
+	var isiPad = (navigator.maxTouchPoints && navigator.maxTouchPoints > 0);
 	if (is_mobile) {
-		return true
-	} else {
-		return isiPad
+		return true//判断是否在正则内
+	} else if(window.matchMedia("(pointer:fine)").matches){
+		return false//判断是否支持鼠标
+	}else{
+		isiPad//判断触摸点
 	}
 }
 
@@ -203,6 +205,179 @@ async function murmur(){//生成唯一标识 ，暂时没有使用
 		});
 	})
 }
+/**
+ * @description: 计算canvas渐变起始坐标
+ * @param {number} canvas width
+ * @param {number} canvas height
+ * @param {number} angle 角度
+ * @return {*}
+ */
+function calculateGradientCoordinate(width,height,angle) {
+	if (angle >= 360) angle = angle - 360;
+	if (angle < 0) angle = angle + 360;
+	angle = Math.round(angle);
+  
+	// 当渐变轴垂直于矩形水平边上的两种结果
+	if (angle === 0) {
+	  return {
+		x0: Math.round(width / 2),
+		y0: height,
+		x1: Math.round(width / 2),
+		y1: 0,
+	  };
+	}
+	if (angle === 180) {
+	  return {
+		x0: Math.round(width / 2),
+		y0: 0,
+		x1: Math.round(width / 2),
+		y1: height,
+	  };
+	}
+  
+	// 当渐变轴垂直于矩形垂直边上的两种结果
+	if (angle === 90) {
+	  return {
+		x0: 0,
+		y0: Math.round(height / 2),
+		x1: width,
+		y1: Math.round(height / 2),
+	  };
+	}
+	if (angle === 270) {
+	  return {
+		x0: width,
+		y0: Math.round(height / 2),
+		x1: 0,
+		y1: Math.round(height / 2),
+	  };
+	}
+  
+	// 从矩形左下角至右上角的对角线的角度
+	const alpha = Math.round(
+	  (Math.asin(width / Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))) *
+		180) /
+		Math.PI,
+	);
+  
+	// 当渐变轴分别于矩形的两条对角线重合情况下的四种结果
+	if (angle === alpha) {
+	  return {
+		x0: 0,
+		y0: height,
+		x1: width,
+		y1: 0,
+	  };
+	}
+	if (angle === 180 - alpha) {
+	  return {
+		x0: 0,
+		y0: 0,
+		x1: width,
+		y1: height,
+	  };
+	}
+	if (angle === 180 + alpha) {
+	  return {
+		x0: width,
+		y0: 0,
+		x1: 0,
+		y1: height,
+	  };
+	}
+	if (angle === 360 - alpha) {
+	  return {
+		x0: width,
+		y0: height,
+		x1: 0,
+		y1: 0,
+	  };
+	}
+  
+	// 以矩形的中点为坐标原点，向上为Y轴正方向，向右为X轴正方向建立直角坐标系
+	let x0 = 0,
+	  y0 = 0,
+	  x1 = 0,
+	  y1 = 0;
+  
+	// 当渐变轴与矩形的交点落在水平线上
+	if (
+	  angle < alpha || // 处于第一象限
+	  (angle > 180 - alpha && angle < 180) || // 处于第二象限
+	  (angle > 180 && angle < 180 + alpha) || // 处于第三象限
+	  angle > 360 - alpha // 处于第四象限
+	) {
+	  // 将角度乘以（PI/180）即可转换为弧度
+	  const radian = (angle * Math.PI) / 180;
+	  // 当在第一或第四象限，y是height / 2，否则y是-height / 2
+	  const y = angle < alpha || angle > 360 - alpha ? height / 2 : -height / 2;
+	  const x = Math.tan(radian) * y;
+	  // 当在第一或第二象限，l是width / 2 - x，否则l是-width / 2 - x
+	  const l =
+		angle < alpha || (angle > 180 - alpha && angle < 180)
+		  ? width / 2 - x
+		  : -width / 2 - x;
+	  const n = Math.pow(Math.sin(radian), 2) * l;
+	  x1 = x + n;
+	  y1 = y + n / Math.tan(radian);
+	  x0 = -x1;
+	  y0 = -y1;
+	}
+  
+	// 当渐变轴与矩形的交点落在垂直线上
+	if (
+	  (angle > alpha && angle < 90) || // 处于第一象限
+	  (angle > 90 && angle < 180 - alpha) || // 处于第二象限
+	  (angle > 180 + alpha && angle < 270) || // 处于第三象限
+	  (angle > 270 && angle < 360 - alpha) // 处于第四象限
+	) {
+	  // 将角度乘以（PI/180）即可转换为弧度
+	  const radian = ((90 - angle) * Math.PI) / 180;
+	  // 当在第一或第二象限，x是width / 2，否则x是-width / 2
+	  const x =
+		(angle > alpha && angle < 90) || (angle > 90 && angle < 180 - alpha)
+		  ? width / 2
+		  : -width / 2;
+	  const y = Math.tan(radian) * x;
+	  // 当在第一或第四象限，l是height / 2 - y，否则l是-height / 2 - y
+	  const l =
+		(angle > alpha && angle < 90) || (angle > 270 && angle < 360 - alpha)
+		  ? height / 2 - y
+		  : -height / 2 - y;
+	  const n = Math.pow(Math.sin(radian), 2) * l;
+	  x1 = x + n / Math.tan(radian);
+	  y1 = y + n;
+	  x0 = -x1;
+	  y0 = -y1;
+	}
+  
+	// 坐标系更改为canvas标准，Y轴向下为正方向
+	x0 = Math.round(x0 + width / 2);
+	y0 = Math.round(height / 2 - y0);
+	x1 = Math.round(x1 + width / 2);
+	y1 = Math.round(height / 2 - y1);
+	return  {x0, y0, x1, y1};
+  }
+  
+const setGradual = (colorObj,colorWidth,colorHeight)=>{
+	let width = colorWidth || 320
+	let height = colorHeight || 700
+	const canvas = document.createElement("canvas");
+	const ctx = canvas.getContext("2d");
+	canvas.width = width;
+	canvas.height = height;
+	let {x0, y0, x1, y1} = calculateGradientCoordinate(width,height,colorObj.angle)
+	const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+	colorObj.gradientList.forEach(item => {
+		let left = item.left.split('%')[0]/100
+		let rgba = `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`
+		gradient.addColorStop(left, rgba); // 起始颜色
+	});
+	ctx.fillStyle = gradient;
+	ctx.fillRect(0, 0, width, height);
+	const dataURL = canvas.toDataURL('image/jpg');
+	return dataURL
+}
 export {
 	isEmail,
 	getUploadUrl,
@@ -216,4 +391,5 @@ export {
 	downloadIamge,
 	getBrowserInfo,
 	murmur,
+	setGradual,
 }