cnhis-design-vue 2.1.78 → 2.1.80

package/packages/scale-view/formitem/sign-com.vue

@@ -1,316 +1,316 @@
-<template>
-  <div class="sign-com-wrap">
-    <span>提示：请在以下区域内签名，PC电脑设备使用鼠标签字。</span>
-    <canvas
-      class="sign-canvas"
-      ref="canvasRef"
-      @mousedown="mouseDown"
-      @mousemove="mouseMove"
-      @mouseup="mouseUp"
-      @touchstart="touchStart"
-      @touchmove="touchMove"
-      @touchend="touchEnd"
-    ></canvas>
-  </div>
-</template>
-<script>
-export default {
-  name: "sign-com",
-  components: {},
-  props: {
-    width: { type: Number, default: 620 },
-		height: { type: Number, default: 300 },
-		lineWidth: { type: Number, default: 4 },
-		lineColor: { type: String, default: '#000000' },
-		bgColor: { type: String, default: '' },
-		isCrop: { type: Boolean, default: false }
-  },
-  data() {
-    return {
-      canvasRef: null,
-      canvasTxt: undefined,
-      resultImg: undefined,
-      hasDrew: false,
-      drawObj: {
-        points: [],
-        startX: 0,
-        startY: 0,
-        isDrawing: false,
-        sratio: 1
-      }
-    };
-  },
-
-  computed: {
-    ratio() {
-      return this.height/this.width;
-    },
-    myBg() {
-      return this.bgColor ? this.bgColor : 'rgba(255, 255, 255, 0)';
-    }
-  },
-  watch: {},
-  // 生命周期
-  created() {
-    window.addEventListener('resize', this.resizeHandler);
-  },
-  mounted() {
-    this.canvasRef = this.$refs.canvasRef
-    if (this.canvasRef) {
-      this.canvasRef.height = this.height;
-      this.canvasRef.width = this.width;
-    }
-    this.resizeHandler();
-    this.drawGrid(this.canvasTxt, 'rgb(240, 240, 240)', 16, 16);
-    // 在画板以外松开鼠标后冻结画笔
-    document.onmouseup = () => {
-      this.drawObj.isDrawing = false;
-    };
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.resizeHandler);
-  },
-
-  // 方法
-  methods: {
-     drawGrid(context, color, stepx, stepy) {
-			context.save();
-			context.fillStyle = 'white';
-			console.log(context);
-			context.fillRect(0, 0, context.canvas.width, context.canvas.height);
-			context.lineWidth = 0.5;
-			context.strokeStyle = color;
-			for (let i = stepx; i < context.canvas.width; i += stepx) {
-				context.beginPath();
-				context.moveTo(i, 0);
-				context.lineTo(i, context.canvas.height);
-				context.closePath();
-				context.stroke();
-			}
-			for (let j = stepy; j < context.canvas.height; j += stepy) {
-				context.beginPath();
-				context.moveTo(0, j);
-				context.lineTo(context.canvas.width, j);
-				context.closePath();
-				context.stroke();
-			}
-			context.restore();
-		},
-    // 绘制
-		drawStart(obj) {
-			this.drawObj.startX = obj.x;
-			this.drawObj.startY = obj.y;
-			this.canvasTxt.beginPath();
-			this.canvasTxt.moveTo(this.drawObj.startX, this.drawObj.startY);
-			this.canvasTxt.lineTo(obj.x, obj.y);
-			this.canvasTxt.lineCap = 'round';
-			this.canvasTxt.lineJoin = 'round';
-			this.canvasTxt.lineWidth = this.lineWidth * this.drawObj.sratio;
-			this.canvasTxt.stroke();
-			this.canvasTxt.closePath();
-			this.drawObj.points.push(obj);
-		},
-		drawMove(obj) {
-			this.canvasTxt.beginPath();
-			this.canvasTxt.moveTo(this.drawObj.startX, this.drawObj.startY);
-			this.canvasTxt.lineTo(obj.x, obj.y);
-			this.canvasTxt.strokeStyle = this.lineColor;
-			this.canvasTxt.lineWidth = this.lineWidth * this.drawObj.sratio;
-			this.canvasTxt.lineCap = 'round';
-			this.canvasTxt.lineJoin = 'round';
-			this.canvasTxt.stroke();
-			this.canvasTxt.closePath();
-			this.drawObj.startY = obj.y;
-			this.drawObj.startX = obj.x;
-			this.drawObj.points.push(obj);
-		},
-		drawEnd(obj) {
-			this.canvasTxt.beginPath();
-			this.canvasTxt.moveTo(this.drawObj.startX, this.drawObj.startY);
-			this.canvasTxt.lineCap = 'round';
-			this.canvasTxt.lineJoin = 'round';
-			this.canvasTxt.stroke();
-			this.canvasTxt.closePath();
-			this.drawObj.points.push(obj);
-			this.drawObj.points.push({ x: -1, y: -1 });
-		},
-
-		mouseDown(e) {
-			e.preventDefault();
-			this.drawObj.isDrawing = true;
-			this.hasDrew = true;
-			const obj = {
-				x: e.offsetX,
-				y: e.offsetY
-			};
-			this.drawStart(obj);
-		},
-
-		// pc
-		mouseMove(e) {
-			e.preventDefault();
-			if (!this.drawObj.isDrawing) return;
-			const obj = {
-				x: e.offsetX,
-				y: e.offsetY
-			};
-			this.drawMove(obj);
-		},
-
-		mouseUp(e) {
-			e.preventDefault();
-			const obj = {
-				x: e.offsetX,
-				y: e.offsetY
-			};
-			this.drawEnd(obj);
-			this.drawObj.isDrawing = false;
-		},
-
-		// mobile
-		touchStart(e) {
-			e.preventDefault();
-			this.hasDrew = true;
-			if (e.touches.length === 1) {
-				const obj = {
-					x: e.targetTouches[0].clientX - this.canvasRef.getBoundingClientRect().left,
-					y: e.targetTouches[0].clientY - this.canvasRef.getBoundingClientRect().top
-				};
-				this.drawStart(obj);
-			}
-		},
-
-		touchMove(e) {
-			e.preventDefault();
-			if (e.touches.length !== 1) return;
-			const obj = {
-				x: e.targetTouches[0].clientX - this.canvasRef.getBoundingClientRect().left,
-				y: e.targetTouches[0].clientY - this.canvasRef.getBoundingClientRect().top
-			};
-			this.drawMove(obj);
-		},
-
-		touchEnd(e) {
-			e.preventDefault();
-			if (e.touches.length !== 1) return;
-			const obj = {
-				x: e.targetTouches[0].clientX - this.canvasRef.getBoundingClientRect().left,
-				y: e.targetTouches[0].clientY - this.canvasRef.getBoundingClientRect().top
-			};
-			this.drawEnd(obj);
-		},
-
-		getCropArea(imgData) {
-			let topX = this.canvasRef.width;
-			let btmX = 0;
-			let topY = this.canvasRef.height;
-			let btnY = 0;
-			for (let i = 0; i < this.canvasRef.width; i++) {
-				for (let j = 0; j < this.canvasRef.height; j++) {
-					const pos = (i + this.canvasRef.width * j) * 4;
-					if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
-						btnY = Math.max(j, btnY);
-						btmX = Math.max(i, btmX);
-						topY = Math.min(j, topY);
-						topX = Math.min(i, topX);
-					}
-				}
-			}
-			topX++;
-			btmX++;
-			topY++;
-			btnY++;
-			const data = [topX, topY, btmX, btnY];
-			return data;
-		},
-
-		// 获取大小
-		getImgSize (url) {
-			const strLength = url.length;
-			const strNum = strLength - (strLength / 8) * 2;
-			return Math.floor(strNum);
-		},
-
-		randomId() {
-			const str = Math.random() * 1e10 + '';
-			return parseInt(str).toString(36);
-		},
-
-		// 操作
-		generate() {
-			const pm = new Promise((resolve, reject) => {
-				if (!this.hasDrew) {
-					reject('Warning: Not Signned!');
-					return;
-				}
-				const resImgData = this.canvasTxt.getImageData(0, 0, this.canvasRef.width, this.canvasRef.height);
-				this.canvasTxt.globalCompositeOperation = 'destination-over';
-				this.canvasTxt.fillStyle = this.myBg;
-				this.canvasTxt.fillRect(0, 0, this.canvasRef.width, this.canvasRef.height);
-				let resultImg = this.canvasRef.toDataURL();
-				this.canvasTxt.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
-				this.canvasTxt.putImageData(resImgData, 0, 0);
-				this.canvasTxt.globalCompositeOperation = 'source-over';
-				if (this.isCrop) {
-					const crop_area = this.getCropArea(resImgData.data);
-					let crop_canvas = document.createElement('canvas');
-					const crop_ctx = crop_canvas.getContext('2d');
-					crop_canvas.width = crop_area[2] - crop_area[0];
-					crop_canvas.height = crop_area[3] - crop_area[1];
-					const crop_imgData = this.canvasTxt.getImageData(...crop_area);
-
-					// 去色 背景grid变为白色
-					for (let i = 0; i < crop_imgData.data.length; i += 4) {
-						if (crop_imgData.data[i] > 200) {
-							crop_imgData.data[i] = 255;
-							crop_imgData.data[i + 1] = 255;
-							crop_imgData.data[i + 2] = 255;
-							crop_imgData.data[i + 3] = 255;
-						}
-					}
-
-					crop_ctx.globalCompositeOperation = 'destination-over';
-					crop_ctx.putImageData(crop_imgData, 0, 0);
-					crop_ctx.fillStyle = this.myBg;
-					crop_ctx.fillRect(0, 0, crop_canvas.width, crop_canvas.height);
-					resultImg = crop_canvas.toDataURL();
-					crop_canvas = null;
-				}
-				const obj = { name: this.randomId(), url: resultImg, size: this.getImgSize(resultImg) };
-				resolve(obj);
-			});
-			return pm;
-		},
-
-		// 清空
-		reset() {
-			this.canvasTxt.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
-			this.drawGrid(this.canvasTxt, 'rgb(240, 240, 240)', 16, 16);
-			this.drawObj.points = [];
-			this.hasDrew = false;
-			this.resultImg = '';
-		},
-
-		resizeHandler() {
-			this.canvasRef.style.width = this.width + 'px';
-			const realw = parseFloat(window.getComputedStyle(this.canvasRef).width);
-			this.canvasRef.style.height = this.ratio * realw + 'px';
-			this.canvasTxt = this.canvasRef.getContext('2d');
-			this.canvasTxt.globalAlpha = 1;
-		},
-  }
-};
-</script>
-<style lang="less" scoped>
-.sign-com-wrap {
-	> span {
-		color: #585858;
-	}
-
-	.sign-canvas {
-		margin-top: 16px;
-		border: 1px solid rgba(213, 213, 213, 0.6);
-		border-radius: 4px;
-	}
-}
-</style>
+<template>
+  <div class="sign-com-wrap">
+    <span>提示：请在以下区域内签名，PC电脑设备使用鼠标签字。</span>
+    <canvas
+      class="sign-canvas"
+      ref="canvasRef"
+      @mousedown="mouseDown"
+      @mousemove="mouseMove"
+      @mouseup="mouseUp"
+      @touchstart="touchStart"
+      @touchmove="touchMove"
+      @touchend="touchEnd"
+    ></canvas>
+  </div>
+</template>
+<script>
+export default {
+  name: "sign-com",
+  components: {},
+  props: {
+    width: { type: Number, default: 620 },
+		height: { type: Number, default: 300 },
+		lineWidth: { type: Number, default: 4 },
+		lineColor: { type: String, default: '#000000' },
+		bgColor: { type: String, default: '' },
+		isCrop: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      canvasRef: null,
+      canvasTxt: undefined,
+      resultImg: undefined,
+      hasDrew: false,
+      drawObj: {
+        points: [],
+        startX: 0,
+        startY: 0,
+        isDrawing: false,
+        sratio: 1
+      }
+    };
+  },
+
+  computed: {
+    ratio() {
+      return this.height/this.width;
+    },
+    myBg() {
+      return this.bgColor ? this.bgColor : 'rgba(255, 255, 255, 0)';
+    }
+  },
+  watch: {},
+  // 生命周期
+  created() {
+    window.addEventListener('resize', this.resizeHandler);
+  },
+  mounted() {
+    this.canvasRef = this.$refs.canvasRef
+    if (this.canvasRef) {
+      this.canvasRef.height = this.height;
+      this.canvasRef.width = this.width;
+    }
+    this.resizeHandler();
+    this.drawGrid(this.canvasTxt, 'rgb(240, 240, 240)', 16, 16);
+    // 在画板以外松开鼠标后冻结画笔
+    document.onmouseup = () => {
+      this.drawObj.isDrawing = false;
+    };
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeHandler);
+  },
+
+  // 方法
+  methods: {
+     drawGrid(context, color, stepx, stepy) {
+			context.save();
+			context.fillStyle = 'white';
+			console.log(context);
+			context.fillRect(0, 0, context.canvas.width, context.canvas.height);
+			context.lineWidth = 0.5;
+			context.strokeStyle = color;
+			for (let i = stepx; i < context.canvas.width; i += stepx) {
+				context.beginPath();
+				context.moveTo(i, 0);
+				context.lineTo(i, context.canvas.height);
+				context.closePath();
+				context.stroke();
+			}
+			for (let j = stepy; j < context.canvas.height; j += stepy) {
+				context.beginPath();
+				context.moveTo(0, j);
+				context.lineTo(context.canvas.width, j);
+				context.closePath();
+				context.stroke();
+			}
+			context.restore();
+		},
+    // 绘制
+		drawStart(obj) {
+			this.drawObj.startX = obj.x;
+			this.drawObj.startY = obj.y;
+			this.canvasTxt.beginPath();
+			this.canvasTxt.moveTo(this.drawObj.startX, this.drawObj.startY);
+			this.canvasTxt.lineTo(obj.x, obj.y);
+			this.canvasTxt.lineCap = 'round';
+			this.canvasTxt.lineJoin = 'round';
+			this.canvasTxt.lineWidth = this.lineWidth * this.drawObj.sratio;
+			this.canvasTxt.stroke();
+			this.canvasTxt.closePath();
+			this.drawObj.points.push(obj);
+		},
+		drawMove(obj) {
+			this.canvasTxt.beginPath();
+			this.canvasTxt.moveTo(this.drawObj.startX, this.drawObj.startY);
+			this.canvasTxt.lineTo(obj.x, obj.y);
+			this.canvasTxt.strokeStyle = this.lineColor;
+			this.canvasTxt.lineWidth = this.lineWidth * this.drawObj.sratio;
+			this.canvasTxt.lineCap = 'round';
+			this.canvasTxt.lineJoin = 'round';
+			this.canvasTxt.stroke();
+			this.canvasTxt.closePath();
+			this.drawObj.startY = obj.y;
+			this.drawObj.startX = obj.x;
+			this.drawObj.points.push(obj);
+		},
+		drawEnd(obj) {
+			this.canvasTxt.beginPath();
+			this.canvasTxt.moveTo(this.drawObj.startX, this.drawObj.startY);
+			this.canvasTxt.lineCap = 'round';
+			this.canvasTxt.lineJoin = 'round';
+			this.canvasTxt.stroke();
+			this.canvasTxt.closePath();
+			this.drawObj.points.push(obj);
+			this.drawObj.points.push({ x: -1, y: -1 });
+		},
+
+		mouseDown(e) {
+			e.preventDefault();
+			this.drawObj.isDrawing = true;
+			this.hasDrew = true;
+			const obj = {
+				x: e.offsetX,
+				y: e.offsetY
+			};
+			this.drawStart(obj);
+		},
+
+		// pc
+		mouseMove(e) {
+			e.preventDefault();
+			if (!this.drawObj.isDrawing) return;
+			const obj = {
+				x: e.offsetX,
+				y: e.offsetY
+			};
+			this.drawMove(obj);
+		},
+
+		mouseUp(e) {
+			e.preventDefault();
+			const obj = {
+				x: e.offsetX,
+				y: e.offsetY
+			};
+			this.drawEnd(obj);
+			this.drawObj.isDrawing = false;
+		},
+
+		// mobile
+		touchStart(e) {
+			e.preventDefault();
+			this.hasDrew = true;
+			if (e.touches.length === 1) {
+				const obj = {
+					x: e.targetTouches[0].clientX - this.canvasRef.getBoundingClientRect().left,
+					y: e.targetTouches[0].clientY - this.canvasRef.getBoundingClientRect().top
+				};
+				this.drawStart(obj);
+			}
+		},
+
+		touchMove(e) {
+			e.preventDefault();
+			if (e.touches.length !== 1) return;
+			const obj = {
+				x: e.targetTouches[0].clientX - this.canvasRef.getBoundingClientRect().left,
+				y: e.targetTouches[0].clientY - this.canvasRef.getBoundingClientRect().top
+			};
+			this.drawMove(obj);
+		},
+
+		touchEnd(e) {
+			e.preventDefault();
+			if (e.touches.length !== 1) return;
+			const obj = {
+				x: e.targetTouches[0].clientX - this.canvasRef.getBoundingClientRect().left,
+				y: e.targetTouches[0].clientY - this.canvasRef.getBoundingClientRect().top
+			};
+			this.drawEnd(obj);
+		},
+
+		getCropArea(imgData) {
+			let topX = this.canvasRef.width;
+			let btmX = 0;
+			let topY = this.canvasRef.height;
+			let btnY = 0;
+			for (let i = 0; i < this.canvasRef.width; i++) {
+				for (let j = 0; j < this.canvasRef.height; j++) {
+					const pos = (i + this.canvasRef.width * j) * 4;
+					if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
+						btnY = Math.max(j, btnY);
+						btmX = Math.max(i, btmX);
+						topY = Math.min(j, topY);
+						topX = Math.min(i, topX);
+					}
+				}
+			}
+			topX++;
+			btmX++;
+			topY++;
+			btnY++;
+			const data = [topX, topY, btmX, btnY];
+			return data;
+		},
+
+		// 获取大小
+		getImgSize (url) {
+			const strLength = url.length;
+			const strNum = strLength - (strLength / 8) * 2;
+			return Math.floor(strNum);
+		},
+
+		randomId() {
+			const str = Math.random() * 1e10 + '';
+			return parseInt(str).toString(36);
+		},
+
+		// 操作
+		generate() {
+			const pm = new Promise((resolve, reject) => {
+				if (!this.hasDrew) {
+					reject('Warning: Not Signned!');
+					return;
+				}
+				const resImgData = this.canvasTxt.getImageData(0, 0, this.canvasRef.width, this.canvasRef.height);
+				this.canvasTxt.globalCompositeOperation = 'destination-over';
+				this.canvasTxt.fillStyle = this.myBg;
+				this.canvasTxt.fillRect(0, 0, this.canvasRef.width, this.canvasRef.height);
+				let resultImg = this.canvasRef.toDataURL();
+				this.canvasTxt.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
+				this.canvasTxt.putImageData(resImgData, 0, 0);
+				this.canvasTxt.globalCompositeOperation = 'source-over';
+				if (this.isCrop) {
+					const crop_area = this.getCropArea(resImgData.data);
+					let crop_canvas = document.createElement('canvas');
+					const crop_ctx = crop_canvas.getContext('2d');
+					crop_canvas.width = crop_area[2] - crop_area[0];
+					crop_canvas.height = crop_area[3] - crop_area[1];
+					const crop_imgData = this.canvasTxt.getImageData(...crop_area);
+
+					// 去色 背景grid变为白色
+					for (let i = 0; i < crop_imgData.data.length; i += 4) {
+						if (crop_imgData.data[i] > 200) {
+							crop_imgData.data[i] = 255;
+							crop_imgData.data[i + 1] = 255;
+							crop_imgData.data[i + 2] = 255;
+							crop_imgData.data[i + 3] = 255;
+						}
+					}
+
+					crop_ctx.globalCompositeOperation = 'destination-over';
+					crop_ctx.putImageData(crop_imgData, 0, 0);
+					crop_ctx.fillStyle = this.myBg;
+					crop_ctx.fillRect(0, 0, crop_canvas.width, crop_canvas.height);
+					resultImg = crop_canvas.toDataURL();
+					crop_canvas = null;
+				}
+				const obj = { name: this.randomId(), url: resultImg, size: this.getImgSize(resultImg) };
+				resolve(obj);
+			});
+			return pm;
+		},
+
+		// 清空
+		reset() {
+			this.canvasTxt.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
+			this.drawGrid(this.canvasTxt, 'rgb(240, 240, 240)', 16, 16);
+			this.drawObj.points = [];
+			this.hasDrew = false;
+			this.resultImg = '';
+		},
+
+		resizeHandler() {
+			this.canvasRef.style.width = this.width + 'px';
+			const realw = parseFloat(window.getComputedStyle(this.canvasRef).width);
+			this.canvasRef.style.height = this.ratio * realw + 'px';
+			this.canvasTxt = this.canvasRef.getContext('2d');
+			this.canvasTxt.globalAlpha = 1;
+		},
+  }
+};
+</script>
+<style lang="less" scoped>
+.sign-com-wrap {
+	> span {
+		color: #585858;
+	}
+
+	.sign-canvas {
+		margin-top: 16px;
+		border: 1px solid rgba(213, 213, 213, 0.6);
+		border-radius: 4px;
+	}
+}
+</style>