diff --git a/public/index.html b/public/index.html
index 42d11a35..998cf12f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,7 @@
     <title>AiDA</title>
     <!-- <link href="https://fonts.font.im/css?family=Roboto:400,500,700,700i" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet"> -->
+<!-- 字体css -->
 	<link rel="stylesheet" href="/css/googleapis.css">
 	<link rel="stylesheet" href="/css/roboto.css">
 	<link rel="stylesheet" href="/css/sloganFamily.css">
diff --git a/public/js/aligning_guidelines.js b/public/js/aligning_guidelines.js
index b21c56ce..5d38301e 100644
--- a/public/js/aligning_guidelines.js
+++ b/public/js/aligning_guidelines.js
@@ -4,7 +4,7 @@
  *
  */
 var ctx,canvasAligning
-function initAligningGuidelines(canvas,bor) {
+function initAligningGuidelines(canvas,bor){
 	ctx = canvas.getSelectionContext()
 	canvasAligning = canvas
 	setCanvasAligning(bor)
diff --git a/public/js/fabric.brushes.js b/public/js/fabric.brushes.js
index 51b3f331..e6ecf90c 100644
--- a/public/js/fabric.brushes.js
+++ b/public/js/fabric.brushes.js
@@ -126,6 +126,40 @@ fabric.Point.prototype.normalize = function(thickness) {
  * Convert a brush drawing on the upperCanvas to an image on the fabric canvas.
  * This makes the drawing editable, it can be moved, rotated, scaled, skewed etc.
  */
+fabric.BaseBrush.prototype.convertToPath = function() {
+	console.log(this.canvas.upperCanvasEl);
+	var pixelRatio = this.canvas.getRetinaScaling(),
+		c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl),
+		xy = fabric.util.trimCanvas(c),
+		path = this._points.map(arr => {
+			arr[1] = arr[1] / this.canvas.getZoom()
+			arr[2] = arr[2] / this.canvas.getZoom()
+			return arr.join(' ')
+		}).join(' '),
+		pathElemetn = new fabric.Path(path);
+	if(!xy){
+		return
+	}
+	let pointerX = this.canvas.viewportTransform[4];
+	let pointerY =  this.canvas.viewportTransform[5];
+	pathElemetn.set({
+		strokeDashArray: [this._width*3, this._width*3],
+		strokeWidth: this._width,
+		stroke: 'black',
+		fill:'transparent',
+	}).setCoords();
+	let group = new fabric.Group([pathElemetn],{
+		left:((xy.x)/pixelRatio-pointerX)/this.canvas.getZoom(),
+		top:((xy.y)/pixelRatio-pointerY)/this.canvas.getZoom(),
+		custom:{
+			dashed:true
+		}
+	})
+	
+	this.canvas.add(group).clearContext(this.canvas.contextTop);
+	this.canvas.clearContext(this.canvas.contextTop);
+}
+
 fabric.BaseBrush.prototype.convertToImg = function() {
 	var pixelRatio = this.canvas.getRetinaScaling(),
 		c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl),
@@ -135,8 +169,13 @@ fabric.BaseBrush.prototype.convertToImg = function() {
 		return
 	}
 	let pointerX = this.canvas.viewportTransform[4];
-	let pointerY = this.canvas.viewportTransform[5];
-	img.set({left:(xy.x)/pixelRatio-pointerX,top:(xy.y)/pixelRatio-pointerY,'scaleX':1/pixelRatio,'scaleY':1/pixelRatio}).setCoords();
+	let pointerY =  this.canvas.viewportTransform[5];
+	img.set({
+		left:((xy.x)/pixelRatio-pointerX)/this.canvas.getZoom(),
+		top:((xy.y)/pixelRatio-pointerY)/this.canvas.getZoom(),
+		'scaleX':1/pixelRatio/this.canvas.getZoom(),
+		'scaleY':1/pixelRatio/this.canvas.getZoom()
+	}).setCoords();
 	this.canvas.add(img).clearContext(this.canvas.contextTop);
 	this.canvas.clearContext(this.canvas.contextTop);
 }
@@ -234,8 +273,8 @@ fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	onMouseDown: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this.canvas.contextTop.globalAlpha = this.opacity;
 		this._size = this.width / 2 + this._baseWidth;
 		this._drawn = false;
@@ -243,8 +282,8 @@ fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	onMouseMove: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this.update(pointer);
 		this.draw(this.canvas.contextTop);
 	},
@@ -399,7 +438,6 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
 
 	initialize: function(canvas, opt) {
 		opt = opt || {};
-
 		this.canvas = canvas;
 		this.width = opt.width || this.width;
 		this.color = opt.color || this.color;
@@ -409,8 +447,8 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	_render: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		var len, i, point = this.setPointer(pointer),
 			subtractPoint = point.subtract(this._lastPoint),
 			distance = point.distanceFrom(this._lastPoint),
@@ -422,7 +460,7 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
 		}
 
 		if (distance > 30) {
-			// this.drawSplash(point, this._inkAmount);
+			this.drawSplash(point, this._inkAmount);
 		}
 	},
 
@@ -475,8 +513,8 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	_resetTip: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		var len, i, point = this.setPointer(pointer);
   
 		this._strokes = [];
@@ -510,8 +548,8 @@ fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	onMouseDown: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._points = [pointer];
 		this._count = 0;
 
@@ -524,8 +562,8 @@ fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	onMouseMove: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._points.push(pointer);
 
 		var i, dx, dy, d, size,
@@ -609,8 +647,8 @@ fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	onMouseDown: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._lastPoint = pointer;
 		this.canvas.contextTop.strokeStyle = this.color;
 		this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -619,8 +657,8 @@ fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
 
 	onMouseMove: function(pointer) {
 		if (this.canvas._isCurrentlyDrawing) {
-			pointer.x = pointer.x + this.canvas.viewportTransform[4];
-			pointer.y = pointer.y + this.canvas.viewportTransform[5];
+			pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+			pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 			this._render(pointer);
 		}
 	},
@@ -680,8 +718,8 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	onMouseDown: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._lastPoint = pointer;
 		this.canvas.contextTop.strokeStyle = this.color;
 		this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -690,8 +728,8 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
 
 	onMouseMove: function(pointer) {
 		if (this.canvas._isCurrentlyDrawing) {
-			pointer.x = pointer.x + this.canvas.viewportTransform[4];
-			pointer.y = pointer.y + this.canvas.viewportTransform[5];
+			pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+			pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 			this._render(pointer);
 		}
 	},
@@ -702,6 +740,67 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
 		this.convertToImg();
 	}
 }); // End MarkerBrush
+/**
+ * test
+ * Based on code by Tennison Chan.
+ */
+fabric.Test = fabric.util.createClass(fabric.BaseBrush, {
+	color: '#000',
+	opacity: 1,
+
+	_points: [],
+	
+	_width: 2,
+	initialize: function(canvas, opt) {
+		opt = opt || {};
+		this.canvas = canvas;
+		this._width = opt._width || this._width;
+		this.color = opt.color || this.color;
+		
+	},
+
+	_render: function(pointer) {
+		
+		var ctx, lineWidthDiff, i, len;
+		ctx = this.canvas.contextTop;
+
+		this._points.push(['L', pointer.x, pointer.y]);
+
+		// if(this._points.length % 10 < 5){
+		let points = this._points
+		ctx.beginPath();
+		ctx.moveTo(points[points.length - 2][1], points[points.length - 2][2]);
+		ctx.lineTo(points[points.length - 1][1], points[points.length - 1][2]);
+		ctx.stroke();
+		// }
+	},
+
+	onMouseDown: function(pointer) {
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
+		this._points = []
+		this._points.push(['M', pointer.x, pointer.y]);
+
+		var ctx = this.canvas.contextTop;
+		ctx.strokeStyle = 'rgba(' + 0 + ',' + 0 + ',' + 0 + ',' + 1 + ')';
+		ctx.lineWidth = this._width * this.canvas.getZoom();
+		ctx.lineJoin = ctx.lineCap = 'round';
+	},
+
+	onMouseMove: function(pointer) {
+		if (this.canvas._isCurrentlyDrawing) {
+			pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+			pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
+			this._render(pointer);
+		}
+	},
+
+	onMouseUp: function() {
+		this._points.push(['Z']);
+		this.convertToPath();
+	}
+}); // End test
+
 /**
  * MarkerBrush
  * Based on code by Tennison Chan.
@@ -756,8 +855,8 @@ fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	onMouseDown: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._lastPoint = pointer;
 		this.canvas.contextTop.strokeStyle = this.color;
 		this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -766,8 +865,8 @@ fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
 
 	onMouseMove: function(pointer) {
 		if (this.canvas._isCurrentlyDrawing) {
-			pointer.x = pointer.x + this.canvas.viewportTransform[4];
-			pointer.y = pointer.y + this.canvas.viewportTransform[5];
+			pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+			pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 			this._render(pointer);
 		}
 	},
@@ -833,8 +932,8 @@ fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	onMouseDown: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._lastPoint = pointer;
 		this.canvas.contextTop.lineWidth = this._lineWidth;
 		this._size = this.width + this._baseWidth;
@@ -842,8 +941,8 @@ fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
 
 	onMouseMove: function(pointer) {
 		if (this.canvas._isCurrentlyDrawing) {
-			pointer.x = pointer.x + this.canvas.viewportTransform[4];
-			pointer.y = pointer.y + this.canvas.viewportTransform[5];
+			pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+			pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 			this._render(pointer);
 		}
 	},
@@ -900,8 +999,8 @@ fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
 		for (var i = 0; i < this._nrPainters; i++) {
 			this._painters.push({ dx:this.canvas.width / 2, dy:this.canvas.height / 2, ax:0, ay:0, div:.1, ease:Math.random() * .2 + .6 });
 		}
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._lastPoint = pointer;
 
 		//ctx.globalCompositeOperation = 'source-over';
@@ -918,8 +1017,8 @@ fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	onMouseMove: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._lastPoint = pointer;
 	},
 
@@ -954,8 +1053,8 @@ fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	onMouseDown: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._points = [pointer];
 
 		var ctx = this.canvas.contextTop,
@@ -967,8 +1066,8 @@ fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	onMouseMove: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._points.push(pointer);
 
 		var ctx = this.canvas.contextTop,
@@ -1025,8 +1124,8 @@ fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
 
 	onMouseDown: function(pointer) {
 		this._count = 0;
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._points = [pointer];
 
 		var ctx = this.canvas.contextTop,
@@ -1037,8 +1136,8 @@ fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	onMouseMove: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._points.push(pointer);
 
 		var i, dx, dy, d, factor = .3 * this.width,
@@ -1124,8 +1223,8 @@ fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
 
 	onMouseDown: function(pointer) {
 		this.canvas.contextTop.globalAlpha = this.opacity;
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._point = new fabric.Point(pointer.x, pointer.y);
 		this._lastPoint = this._point;
 
@@ -1138,8 +1237,8 @@ fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	onMouseMove: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._lastPoint = this._point;
 		this._point = new fabric.Point(pointer.x, pointer.y);
 	},
@@ -1214,8 +1313,8 @@ fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, {
 		var ctx = this.canvas.contextTop,
 			color = fabric.util.colorValues(this.color),
 			bgColor = fabric.util.colorValues(this.bgColor);
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._lastPoint = pointer;
 		this._drawn = false;
 
@@ -1227,8 +1326,8 @@ fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	onMouseMove: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		var ctx = this.canvas.contextTop,
 			dx = pointer.x - this._lastPoint.x,
 			dy = pointer.y - this._lastPoint.y,
@@ -1281,16 +1380,16 @@ fabric.WebBrush = fabric.util.createClass(fabric.BaseBrush, {
 	},
 
 	onMouseDown: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._points = [pointer];
 		this._count = 0;
 		this._colorValues = fabric.util.colorValues(this.color);
 	},
 
 	onMouseMove: function(pointer) {
-		pointer.x = pointer.x + this.canvas.viewportTransform[4];
-		pointer.y = pointer.y + this.canvas.viewportTransform[5];
+		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
+		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
 		this._points.push(pointer);
 
 		var ctx = this.canvas.contextTop,
diff --git a/src/component/Canvas/argument.vue b/src/component/Canvas/argument.vue
new file mode 100644
index 00000000..d66f0359
--- /dev/null
+++ b/src/component/Canvas/argument.vue
@@ -0,0 +1,197 @@
+<template>
+   <div class="canvasArgument">
+		<div class="label_item wH">
+			<div class="title">{{ $t('exportModel.Width') }}</div>
+			<input type="number" @input="canvasGeneral.setCanvasWH('width')" v-model="canvasGeneral.canvasWH.width">
+		</div>
+		<div class="label_item wH">
+			<div class="title">{{ $t('exportModel.Height') }}</div>
+			<input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.height">
+		</div>
+		<div class="label_item" v-show="
+			canvasGeneral.operation != 'movePosition' && 
+			canvasGeneral.operation != 'move' && 
+			canvasGeneral.operation != 'eraser' && 
+			canvasGeneral.operation != 'texture' && 
+			canvasGeneral.operation != 'zoomIn'  && 
+			canvasGeneral.operation != 'zoomOut' && 
+			canvasGeneral.operation != 'dashedPencil' && 
+			canvasGeneral.operation != 'dashed'">
+			<div class="title">{{ $t('exportModel.Color') }}</div>
+			<input type="color" @input="canvasGeneral.setPencilColor" v-model="canvasGeneral.brushwork.color">
+			<span class="icon iconfont icon-xiala" @click.stop="setOperation('color')" :class="{active: operation == 'color'}"></span>
+			<div class="labelHover_show" v-show="operation == 'color'" @click.stop="">
+				<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
+			</div>
+		</div>
+		<div class="label_item" v-show="
+			canvasGeneral.operation != 'movePosition' && 
+			canvasGeneral.operation != 'move' && 
+			canvasGeneral.brushwork.value != 'RibbonBrush' && 
+			canvasGeneral.brushwork.value != 'LongfurBrush'&& 
+			canvasGeneral.operation != 'zoomIn'  &&
+			canvasGeneral.operation != 'zoomOut' && 
+			canvasGeneral.operation != 'dashedPencil' && 
+			canvasGeneral.operation != 'dashed'">
+			<div >{{ $t('exportModel.Size') }}:</div>
+			<input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
+		</div>
+		<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
+			<div >{{ $t('exportModel.Brushwork') }}:</div>
+			<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
+				style="width: 12rem "
+				@change="canvasGeneral.brushworkChange"
+				>
+				<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
+					<img style="width: 100%;" :src="item.url" alt="">
+				</a-select-option>
+			</a-select>
+		</div>
+		<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
+			<div >{{ $t('exportModel.Texture') }}:</div>
+			<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
+				style="width: 12rem "
+				@change="canvasGeneral.textureValueChange"
+				>
+				<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
+					<img :src="item.url" alt="">
+				</a-select-option>
+			</a-select>
+		</div>
+		<div class="label_item" v-show="
+			canvasGeneral.operation != 'pencil' && 
+			canvasGeneral.operation != 'eraser'&&
+			canvasGeneral.operation != 'movePosition' && 
+			canvasGeneral.operation != 'move'&&
+			canvasGeneral.operation != 'text'&&
+			canvasGeneral.operation != 'texture'&&
+			canvasGeneral.operation != ''&& 
+			canvasGeneral.operation != 'zoomIn'  && 
+			canvasGeneral.operation != 'zoomOut' && 
+			canvasGeneral.operation != 'dashedPencil' && 
+			canvasGeneral.operation != 'dashed'">
+			<div >{{ $t('exportModel.FillBack') }}:</div>
+			<div class="leftAlign">
+				<i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
+				<i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
+			</div>
+		</div>
+		<!-- <div class="label_item" v-show="canvasGeneral.operation == 'movePosition'">
+			<div >{{ $t('exportModel.Layer') }}:</div>
+			<div class="leftAlign">
+				<i class="icon iconfont icon-shangyiceng" @click="canvasGeneral.setLayerIndex('Front')"></i>
+				<i class="icon iconfont icon-shangyiceng2" @click="canvasGeneral.setLayerIndex('Forward')"></i>
+				<i class="icon iconfont icon-xiayiceng" @click="canvasGeneral.setLayerIndex('Backwards')"></i>
+				<i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
+			</div>
+		</div> -->
+		<div class="label_item" v-show="(canvasGeneral.operation == '' || canvasGeneral.operation == 'text' || canvasGeneral.createPatterning.textDataShow) && canvasGeneral.operation != 'movePosition' && canvasGeneral.operation != 'move'">
+			<div>Font Family</div>
+			<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.fontFamily"
+				style="flex: 1;width: 15rem;"
+				@change="canvasGeneral.setFontFamily"
+				:style="{'font-family':canvasGeneral.fontFamily}"
+				>
+				<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
+					{{item.name}}
+				</a-select-option>
+			</a-select>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+	import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
+	export default defineComponent({
+		components:{},
+		setup(){
+		    let testModal = ref(true)
+			let canvasGeneral:any = inject('canvasObj')
+			const data = reactive({
+				colorHistoryList:[],
+				operation:'',
+			})
+			const setOperation = (str:any)=>{
+				data.operation = str
+			}
+			const setOper = ()=>{
+				setOperation('')
+			}
+			document.addEventListener('click',setOper)
+			const closeModal = ()=>{
+				document.removeEventListener('click',setOper)
+			}
+			return {
+				canvasGeneral,
+				...toRefs(data),
+				testModal,
+				setOperation,
+				closeModal,
+			}
+		}
+	});
+</script>
+
+<style lang='less' scoped>
+.canvasArgument{
+	display: flex;
+	flex-wrap: wrap;
+	height: 100%;
+	.label_item{
+		margin-right: 2rem;
+		position: relative;
+		display: flex;
+		align-items: center;
+		.leftAlign{
+			display: flex;
+		}
+		.labelHover_show{
+			position: absolute;
+			width: 100%;
+			height: 10rem;
+			top: 100%;
+			z-index: 2;
+			display: block;
+			border-radius: 4px;
+			border: 1px solid;
+			padding: .5rem 1rem;
+			background: #fff;
+			div{
+				width: 2rem;
+				height: 2rem;
+				margin-right: .5rem;
+				margin-bottom: .5rem;
+				display: inline-block;
+				cursor: pointer;
+			}
+		}
+		input{
+			height: 100%;
+		}
+		&.wH input{
+			width: 5rem;
+		}
+		.title{
+			margin-right: 1rem;
+		}
+		.icon-xiala{
+			cursor: pointer;
+			transform: rotate(0deg);
+			height: 4rem;
+			width: 4rem;
+			transition: all .3s;
+			line-height: 4rem;
+			text-align: center;
+			&.active{
+				transform: rotate(180deg);
+			}
+		}
+	}
+	.label_item:hover{
+		// .labelHover_show{
+		// 	display: flex;
+		// }
+	}
+}
+
+</style>
\ No newline at end of file
diff --git a/src/component/Canvas/canvasContent.vue b/src/component/Canvas/canvasContent.vue
new file mode 100644
index 00000000..28c5690f
--- /dev/null
+++ b/src/component/Canvas/canvasContent.vue
@@ -0,0 +1,184 @@
+<template>
+	<div class="canvasContent_box">
+		<div class="canvasContent" ref="canvasScaleDom">
+			<div v-if="isPresuppose" class="generalCanvas_center presuppose">
+				<div class="presuppose16-9" @click="setPresuppose('16/9')">16 : 9</div>
+				<div class="presuppose1-1" @click="setPresuppose('1/1')">1 : 1</div>
+				<div class="presuppose9-16" @click="setPresuppose('9/16')">9 : 16</div>
+			</div>
+			<div v-else class="generalCanvas_center canvas" ref="canvasDom">
+				<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+	import { defineComponent,ref,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
+	import { Modal,message } from 'ant-design-vue';
+	import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+	import { useI18n } from 'vue-i18n'
+	export default defineComponent({
+		component:{},
+		setup(){
+			let {t} = useI18n()
+			let canvasType = inject('canvasType')
+			let canvasGeneral:any = inject('canvasObj')
+			const data:any = reactive({
+				canvasScaleDom:null,
+				canvasDom:null,
+				isPresuppose:false,
+				isShowMark:false,
+				pencilbtnStyle:{},
+				
+			})
+			const createCanvas = (canvasSize:any)=>{
+				data.isPresuppose = false
+				nextTick(()=>{
+					canvasGeneral.canvasInit(data.canvasDom,canvasSize)
+					console.log(canvasGeneral);
+
+				})
+			}
+			const openMode = (data:any)=>{
+				let {yes,no} = data
+				console.log(yes,no);
+				Modal.confirm({
+						title: '是否栅格化',
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						centered:true,
+						onOk() {
+							yes()
+						},
+						onCancel(){
+							no()
+						}
+					});
+				yes()
+				
+			}
+			// canvasGeneral.openMode.fun = openMode
+			const setPresuppose = (presuppose:any)=>{
+				let canvasDomSize = {
+					width:data.canvasScaleDom.offsetWidth,
+					height:data.canvasScaleDom.offsetHeight,
+				}
+				let width,height
+				let scale = [0,0]
+				if(presuppose == '16/9'){
+					// scale[0] = 16
+					// scale[1] = 9
+					width = 1600
+					height = 900
+				}else if(presuppose == '1/1'){
+					// scale[0] = 1
+					// scale[1] = 1
+					width = 1000
+					height = 1000
+				}else if(presuppose == '9/16'){
+				    // scale[0] = 9
+					// scale[1] = 16
+					width = 900
+					height = 1600
+				}
+				// let mbHeight = canvasDomSize.width / scale[0] * scale[1]
+				// if(mbHeight < canvasDomSize.height){
+				// 	width = canvasDomSize.width
+				// 	height = mbHeight
+				// }else{
+				// 	width = canvasDomSize.height / scale[1] * scale[0]
+				// 	height = canvasDomSize.height
+				// }
+				let canvasSize = {width,height}
+				createCanvas(canvasSize)
+			}
+			onMounted(()=>{
+				if(canvasType == 'export'){
+					data.isPresuppose = true
+				}else{
+					createCanvas({})
+				}
+				
+			})
+			return {
+				canvasGeneral,
+				...toRefs(data),
+				setPresuppose,
+			}
+		}
+	});
+</script>
+
+<style lang='less' scoped>
+.canvasContent_box{
+	height: 100%;
+	width: 100%;
+	// padding: 2rem;
+	background: #e6e6e6;
+	.canvasContent{
+		height: 100%;
+		width: 100%;
+		position: relative;
+	}
+}
+
+.generalCanvas_center{
+	width: 100%;
+	height: 100%;
+	position: relative;
+	overflow: hidden;
+	&.canvas{
+	}
+	&.presuppose{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		> div{
+			border: 1rem solid #6b6b6b;
+			color: #6b6b6b;
+			display: flex;
+			margin-right: 2rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 3rem;
+			font-weight: 900;
+			cursor: pointer;
+			border-radius: 4px;
+			&:last-child{
+				margin-right: 0;
+			}
+			&.presuppose16-9{
+				height: calc(30rem / 16 * 9);
+				width: 30rem;
+			}
+			&.presuppose1-1{
+				height: 30rem;
+				width: 30rem;
+			}
+			&.presuppose9-16{
+				height: 30rem;
+				width: calc(30rem / 16 * 9);
+			}
+		}
+	}
+	.editFrontBack_pencilbtn{
+		position: absolute;
+		z-index: 1;
+		border-radius: 50%;
+		border: 1px solid #000;
+		pointer-events: none;
+		transform: translate(-50%,-50%);
+	}
+	:deep(.canvas-container){
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+		// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
+	}
+}
+
+</style>
\ No newline at end of file
diff --git a/src/component/Canvas/detail.vue b/src/component/Canvas/detail.vue
new file mode 100644
index 00000000..5249260c
--- /dev/null
+++ b/src/component/Canvas/detail.vue
@@ -0,0 +1,305 @@
+<template>
+   <div class="detail" ref="detailDom"
+   @mousemove="mousemove($event)"
+	@touchmove="touchmove($event)"
+   >
+		<div class="layer">
+			<div class="layer-item button" @click="canvasGeneral.createLayer">
+				新建图层
+			</div>
+			<div class="layer-item-box-scroll">
+				<div class="layer-item-box" :style="{'height':layerList.length * 6 + 'rem'}">
+					<div class="layer-item" 
+						v-for="item,index in layerList" 
+						:key="item" 
+						:style="item?.style"
+						@click="canvasGeneral.selectLayer(item.id)"
+						@mousedown="mousedown($event,item,index)"
+						@touchstart="touchstart($event,item,index)"
+						
+						@contextmenu="openMenu($event,item,index)"
+
+						:class="{'active':item.id == canvasGeneral.layer.selectLayer.id}">
+						<!-- <div @click.stop="canvasGeneral.layerShowHide(item.id,item)">{{ item.isShow }}</div> -->
+						<i class="fi" :class="[(item.isShow)?'fi-rr-eye':'fi-rr-eye-crossed']" @click.stop="canvasGeneral.layerShowHide(item.id,item)"></i>
+						<img :src="item.img" alt="">
+						<div>
+							{{ item.name }}
+						</div>
+						<div @click.stop="canvasGeneral.layerDelete(index,item.id)" :class="{noDelete:canvasGeneral.layer.list.length == 1}">删除</div>
+					</div>
+				</div>
+			</div>
+			
+		</div>
+		<div class="layer-menu" :style="styleMenu">
+			<div class="layer-menu-item" @click="canvasGeneral.copyLayer(itemMenu.id)">复制</div>
+			<div class="layer-menu-item" @click="canvasGeneral.layerDelete(itemMenu.index,itemMenu.id)">删除</div>
+			<div class="layer-menu-item" v-if="itemMenu.groupType == 'Object'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Grid')">设置栅格化</div>
+			<div class="layer-menu-item" v-if="itemMenu.groupType == 'Grid'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Object')">取消栅格化</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+	import { defineComponent,ref,reactive,nextTick,toRefs,inject,watch,computed} from 'vue'
+	import { getMousePosition } from "@/tool/mdEvent";
+
+	export default defineComponent({
+		component:{},
+		setup(){
+			let canvasGeneral:any = inject('canvasObj')
+			const data = reactive({
+				detailDom:null as any,
+				layerList:computed(()=>canvasGeneral.layer.list) as any,
+				styleMenu:{
+					left:0+'px',
+					top:0+'px',
+					display:'none',
+				},
+				itemMenu:{} as any,
+			})
+			watch(()=>canvasGeneral.layer.list.length, (newValue, oldValue) => {
+				let sortedArr = data.layerList.map((item:any) => ({ ...item })).sort((a:any, b:any) => b.index - a.index)
+				sortedArr.forEach((item:any,index:any)=>{
+					item.index = sortedArr.length - index
+				})
+				data.layerList.forEach((item:any) => {
+					//图层高度50px 下边距10px
+					sortedArr.forEach((sortedArrItem:any)=>{
+						if(item.id == sortedArrItem.id){
+							item.index = sortedArrItem.index
+						}
+						let style = {
+							top:(data.layerList.length - item.index) * 60 + 'px',
+							transition:'all .3s',
+						}
+						item.style = style
+					})
+					
+				});
+			},{immediate:true});
+			const incident:any = reactive({
+				isDown:false,
+				selectStyleTop:null,
+				selectStyle:null,
+				downPoint:null,
+				select:null,
+				radius:25,
+			})
+			const openMenu = (event:any,item:any,index:number)=>{
+				if(event.preventDefault)event.preventDefault();
+				data.itemMenu = item;
+				data.itemMenu.index = index
+				let position = data.detailDom.getBoundingClientRect();
+				data.styleMenu = {
+					left:event.clientX - position.left+'px',
+					top:event.clientY - position.top+'px',
+					display:'block',
+				}
+			}
+			document.onclick = ()=>{
+				data.styleMenu.display = 'none'
+				data.itemMenu = {};
+			}
+			let mousedown = (event:any,item:any,index:number)=>{
+				if(event.button != 0)return
+				let e:any = getMousePosition(event,false)
+				mouseDownOperation(e,item,index)
+			}
+			let ipadDownTime:any = null
+			let touchstart = (event:any,item:any,index:number)=>{
+				let e:any = getMousePosition(event,true)
+				mouseDownOperation(e,item,index)
+				clearTimeout(ipadDownTime)
+				ipadDownTime = setTimeout(()=>{
+					openMenu(e,item,index)
+				},1000)
+
+			}
+			let mouseDownOperation = (e:any,item:any,index:number)=>{
+			    incident.isDown = true
+				incident.selectStyleTop = item.style.top
+				incident.selectStyle = item.style
+				incident.selectStyle.transition = 'none'
+				incident.select = item
+				incident.downPoint = e.clientY
+			}
+
+			let mousemove = (event:any)=>{
+				let e:any = getMousePosition(event,false)
+				mouseMoveOperation(e)
+			}
+			let touchmove = (event:any)=>{
+				let e:any = getMousePosition(event,true)
+				clearTimeout(ipadDownTime)
+				if(data.styleMenu.display != 'none')data.styleMenu.display = 'none'
+				mouseMoveOperation(e)
+			}
+			let mouseMoveOperation = (e:any)=>{
+			    if(incident.isDown){
+					let domTop = Number(incident.selectStyleTop.split('px')[0])
+					
+					let gTop = domTop + (e.clientY - incident.downPoint)
+					if(gTop < 0){
+						gTop = 0
+					}
+					incident.select.style.top = gTop + 'px'
+					data.layerList.forEach((item:any,index:number) => {
+						let itemTop = Number(item.style.top.split('px')[0])
+						if(Math.abs(gTop - itemTop) < 30 && item.id != incident.select.id){
+							let itemIndex = item.index
+							// if(gTop - itemTop > 0){
+							// 	console.log('从下往上');
+							// }
+							// if(gTop - itemTop < 0){
+							// 	console.log('从上往下');
+							// }
+							item.index = incident.select.index	
+							incident.select.index = itemIndex
+							
+						}
+					})
+					sort(data.layerList,'move')
+				}
+			}
+			const mouseUp = ()=>{
+				if(data.styleMenu.display == 'none')clearTimeout(ipadDownTime)
+				if(incident.isDown){
+					if(incident.selectStyle)incident.selectStyle.transition = 'all .3s'
+					incident.selectStyleTop = null
+					incident.isDown = false
+					incident.selectStyle = null
+					incident.select = null
+					sort(data.layerList,'up')
+				}
+			}
+			document.onmouseup = mouseUp
+			document.ontouchend = mouseUp
+			//排序
+			let time:any = null
+			let sort = (list:any,str:string)=>{
+				clearTimeout(time)
+				// list = list.sort((a:any, b:any) =>{
+				// 	return b.index - a.index; 
+				// });
+				list.forEach((item:any) => {
+					if(str == 'move'){
+						if(item.id != incident.select.id)item.style.top = (list.length - item.index) * 60 + 'px'
+					}else{
+						item.style.top = (list.length - item.index) * 60 + 'px'
+					}
+				});
+				if(str == 'up')time = setTimeout(()=>canvasGeneral.upLayerIndex(list),500)
+				
+			}
+			return {
+				canvasGeneral,
+				...toRefs(data),
+				openMenu,
+				mousedown,
+				touchstart,
+				mousemove,
+				touchmove,
+			}
+		}
+	});
+</script>
+
+<style lang='less' scoped>
+.detail{
+	width: 100%;
+	height: 100%;
+	padding: 1rem;
+	border: 1px solid #dcdfe6;
+	position: relative;
+	* {
+		-webkit-user-drag: none;
+		-moz-user-drag: none;
+		-ms-user-drag: none;
+		user-drag: none;
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+		-khtml-user-select: none;
+		user-select: none;
+	}
+	.layer{
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		.layer-button{
+
+		}
+		.layer-item{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: .5rem 2rem;
+			border: 1px solid #e6e6e6;
+			margin-bottom: 10px;
+			height: 50px;
+			border-radius: 4px;
+			i{
+				font-size: 18px;
+			}
+			&.active{
+				background: #e6e6e6;
+			}
+			.noDelete{
+				background: #e6e6e6;
+				opacity: .4;
+				pointer-events: none;
+			}
+			&.button{
+				justify-content: center;
+				cursor: pointer;
+			}
+			img{
+				height: 100%;
+				width: 35px;
+				object-fit: contain;
+			}
+			div{
+				cursor: pointer;
+			}
+			&:last-child{
+				margin-bottom: 0;
+			}
+		}
+		.layer-item-box-scroll{
+			flex: 1;
+			overflow-y: auto;
+			.layer-item-box{
+				position: relative;
+				.layer-item{
+					position: absolute;
+					width: 100%;
+				}
+			}
+		}
+		
+	}
+	.layer-menu{
+	    position: absolute;
+		width: 60%;
+		line-height: 4rem;
+		background: #fff;
+		border-radius: 4px;
+		border: 1px solid;
+		overflow: hidden;
+		>div{
+			border-bottom: 1px solid;
+			padding: 0 2rem;
+			cursor: pointer;
+		}
+		>div:hover{
+			background: #e6e6e6;
+		}
+		>div:last-child{
+			border-bottom: none;
+		}
+	}
+}
+
+</style>
\ No newline at end of file
diff --git a/src/component/Canvas/index.vue b/src/component/Canvas/index.vue
index e69de29b..17f06653 100644
--- a/src/component/Canvas/index.vue
+++ b/src/component/Canvas/index.vue
@@ -0,0 +1,187 @@
+<template>
+	<div class="generalCanvas">
+		<div class="argument-box">
+			<argument ref="argument" v-if="canvasObj.canvas"></argument>
+		</div>
+		<div class="canvasBox">
+			<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
+			<div class="canvas">
+				<canvasContent ref="canvasContent"></canvasContent>
+			</div>
+			<div class="detail-box">
+				<detail ref="detail" v-if="canvasObj.canvas"></detail>
+			</div>
+		</div>
+		<div class="mark_loading" v-show="isShowMark">
+			<a-spin size="large" />
+		</div>
+	</div>
+	<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
+</template>
+<script>
+import {defineComponent, computed, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
+} from "vue";
+import {message} from 'ant-design-vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from "vue-i18n";
+import canvasGeneral from "@/tool/canvasGeneral";
+import tool from "./tool.vue"
+import argument from "./argument.vue"
+import detail from "./detail.vue"
+import canvasContent from "./canvasContent.vue"
+import liquefaction from "@/component/modules/liquefaction.vue";
+
+
+export default defineComponent({
+    components: {
+		tool,
+		argument,
+		detail,
+		canvasContent,
+		liquefaction,
+    },
+    setup(props,{emit}) {
+		const { t } = useI18n();
+		const store = useStore();
+		const isShowMark = ref(false)
+		const component = reactive({
+			argument:ref(null),tool:ref(null),detail:ref(null),canvasContent:ref(null)
+		})
+		let liquefaction = ref(null)
+		let liquefactionData = ref()
+		let groupDashed = ref(null)//用来判断是否需要对group添加img
+		let canvasType = 'export'
+		let canvasObj = reactive(canvasGeneral)
+		provide('canvasType',canvasType)
+		provide('canvasObj',canvasObj)
+		provide('isShowMark',isShowMark)
+		const close = ()=>{
+			component.forEach((item)=>{
+				if(item.value.closeModal)item.value.closeModal()
+			})
+		}
+		
+		let expoet = ()=>{
+			console.log( canvasObj.selectExport());
+			console.log( canvasObj.allExport());
+
+		}
+		const setLiquefaction = async ()=>{//进入液化页面
+			canvasObj.getLiquefactionImgObj().then((data)=>{
+				if(data?.img){
+					liquefactionData.value = data
+					liquefaction.value.init(data.img)
+				}else {
+					message.info(t('exportModel.jsContent6'))
+					return null;
+				}
+			})
+			
+		}
+		const toolLiquefaction = ()=>{//工具点击按钮
+			setLiquefaction()
+		}
+		const submitLiquefaction = (rv)=>{//液化回参
+			canvasObj.setLiquefactionImgObj(liquefactionData.value,rv)
+			// liquefactionData.value.setSrc(rv, (value)=>{
+			// 	// liquefactionData.value.scaleToWidth(originalWidth);
+			// 	// liquefactionData.value.scaleToHeight(originalHeight);
+			// 	delete liquefactionData.value.minioUrl
+			// 	if(groupDashed.value && groupDashed.value._objects.length == 1){
+			// 		value.set({
+			// 			left:-groupDashed.value.width/2,	
+			// 			top:-groupDashed.value.height/2,
+			// 		})
+			// 		groupDashed.value.insertAt(value)
+			// 		// canvasObj.addDashedImg(value)
+			// 	}
+			// 	canvasObj.canvas.renderAll();
+			// 	canvasObj.updateCanvasState()
+			// });
+		}
+        onMounted(() => {
+		});
+		onBeforeUnmount(()=>{
+			// canvasGeneral.canvasClear()
+		})
+        return {
+			isShowMark,
+			liquefaction,
+			canvasObj,
+			close,
+			expoet,
+			toolLiquefaction,
+			submitLiquefaction,
+        };
+    },
+    data(prop) {
+        return {
+		};
+    },
+	computed: {
+	},
+    watch: {
+      
+    },
+    mounted() {},
+
+    methods: {
+		
+	},
+});
+</script>
+<style lang="less" scoped>
+.generalCanvas{
+	width: 100%;
+	height: 100%;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	.argument-box,
+	.canvasBox,
+	.detail-box{
+		:deep(i){
+			font-size: 2.5rem;
+			cursor: pointer;
+			width: 3rem;
+			height: 3rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-shrink: 0;
+			transition: all .3s;
+			margin-bottom: .5rem;
+			&.active{
+				border: 1px solid;
+				border-radius: .4rem;
+			}
+			&.icon-xiala{
+				transform: rotate(-90deg);
+			}
+			&.icon-xialaActive{
+				transform: rotate(90deg);
+			}
+		}
+	}
+	.argument-box{
+		margin-left: 4rem;
+		height: 4rem;
+		margin-bottom: 1rem;
+	}
+	.canvasBox{
+		flex: 1;
+		overflow: hidden;
+		display: flex;
+		.canvas{
+			flex: 1;
+			overflow: hidden;
+		}
+	}
+	.detail-box{
+		width: 20%;
+		margin-left: 1rem;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/component/Canvas/test.vue b/src/component/Canvas/test.vue
new file mode 100644
index 00000000..e5de0018
--- /dev/null
+++ b/src/component/Canvas/test.vue
@@ -0,0 +1,48 @@
+<template>
+    <a-modal class="modal_component collection_modal Guide_1_2" 
+		v-model:visible="testModal" 
+		:footer="null" 
+		width="78%"
+		:maskClosable="false"
+		:centered="true"
+		:closable="false"
+		wrapClassName="#app"
+		:keyboard="false"
+	>
+	<div class="collection_closeIcon closeIcon" >
+		<!-- <div class="header_right_block" @click.stop="">
+			<div class="header_cancel_button" >Cancel</div>
+		</div> -->
+		<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
+	</div>
+		<canvasIndex></canvasIndex>
+    </a-modal>
+</template>
+
+<script lang="ts">
+	import { defineComponent,ref,createVNode,nextTick} from 'vue'
+	import canvasIndex from './index.vue'
+	export default defineComponent({
+		components:{canvasIndex},
+		setup(){
+		    let testModal = ref(true)
+			const init = ()=>{
+				testModal.value = true
+			}
+			const cancelDsign = ()=>{
+				testModal.value = false
+			}
+			return {
+				testModal,
+				init,
+				cancelDsign,
+			}
+		}
+	});
+</script>
+
+<style lang='less' scoped>
+.box {
+    border: 1px solid #f00;
+}
+</style>
\ No newline at end of file
diff --git a/src/component/Canvas/tool.vue b/src/component/Canvas/tool.vue
new file mode 100644
index 00000000..dd392ef0
--- /dev/null
+++ b/src/component/Canvas/tool.vue
@@ -0,0 +1,168 @@
+<template>
+   <div class="canvasTool">
+		<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
+		<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
+		<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil'}"></i>
+		<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:canvasGeneral.operation == 'texture'}"></i>
+		<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move'}"></i>
+		<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition'}"></i>
+		<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser'}"></i>
+		<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''"  @click.stop="setCloseNav('tool')"></i> -->
+		<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed'}"></i>
+		<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil'}"></i>
+		<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn'}"></i>
+		<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut'}"></i>
+		<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
+		<div class="label_item uploadImage">
+			<i class="icon fi fi-br-upload" ></i>
+			<input type="file" @change="uploadImage">
+		</div>
+		<i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
+		<i class="icon iconfont icon-xiala" :class="{'icon-xialaActive':isMove}" @click.stop="openMore"></i>
+		<div class="btnModal" v-show="isMove" :style="moveStyle">
+			<!-- <i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:canvasGeneral.operation == 'fold'}"></i> -->
+			<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:canvasGeneral.operation == 'rect'}"></i>
+			<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:canvasGeneral.operation == 'line'}"></i> -->
+			<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:canvasGeneral.operation == 'circle'}"></i> -->
+			<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:canvasGeneral.operation == 'triangle'}"></i>
+			<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:canvasGeneral.operation == 'ellipse'}"></i>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
+import {base64ToFile} from '@/tool/util'
+import { Https } from "@/tool/https";
+	export default defineComponent({
+		component:{},
+		emits:['toolLiquefaction'],
+		setup(props,{emit}){
+			let canvasGeneral:any = inject('canvasObj')
+			let isShowMark:any = inject('isShowMark')
+			const data:any = reactive({
+				isMove:false,
+				moveStyle:{},
+			})
+			const uploadImage = (event:any)=>{
+				isShowMark.value = true
+				const file = event.target.files[0];
+				let input = event.target
+				setOperation('movePosition')
+				if (file) {
+					const reader = new FileReader();
+					reader.onload = (e:any) => {
+						let file = base64ToFile(e.target.result,'upload')
+						let formData = new FormData();
+						formData.append("file", file);
+						let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+						Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
+							rv.imgUrl = rv.minioUrl
+							isShowMark.value = false
+							canvasGeneral.addImage(rv)
+						})
+						input.value = ''
+					};
+					reader.readAsDataURL(file);
+				}
+			}
+			const historyState = (str:any)=>{
+				canvasGeneral.historyState(str)
+			}
+			const setOperation = (str:any)=>{
+				canvasGeneral.setOperation(str)
+			}
+			const openMore = (e:any)=>{
+				data.isMove=!data.isMove
+				if(data.isMove){
+					let domPoint = e.target.getBoundingClientRect()
+					let domParentPoint = e.target.parentElement.getBoundingClientRect()
+					const left = domPoint.left - domParentPoint.left;
+					const top = domPoint.top - domParentPoint.top;
+
+					data.moveStyle.top = top + 'px'
+					data.moveStyle.left = left + domPoint.width + 2 + 'px'
+				}
+			}
+			const setMore = ()=>{
+				data.isMove = false
+			}
+			let setLiquefaction = ()=>{
+				emit('toolLiquefaction')
+			}
+			document.addEventListener('click',setMore)
+			const closeModal = ()=>{
+				document.removeEventListener('click',setMore)
+			}
+			return {
+				canvasGeneral,
+				...toRefs(data),
+				uploadImage,
+				historyState,
+				setOperation,
+				openMore,
+				closeModal,
+				setLiquefaction,
+			}
+		}
+	});
+</script>
+
+<style lang='less' scoped>
+.canvasTool::-webkit-scrollbar{
+	display: none;
+}
+.canvasTool{
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	align-items: center;
+	&.leftAlign{
+		justify-content: flex-start;
+	}
+	&.leftAlign{
+		justify-content: flex-start;
+	}
+	
+	.uploadImage{
+		width: 3rem;
+		height: 3rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		i{
+			zoom:.8;
+		}
+		input{
+			height: 0;
+			width: 0;
+			border: none;
+		}
+	}
+	.uploadImage{
+		position: relative;
+		input{
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			left: 0;
+			top: 0;
+			opacity: 0;
+			z-index: 2;
+			cursor: pointer;
+		}
+	}
+	.btnModal{
+		position: absolute;
+		z-index: 2;
+		background: #fff;
+		top: 0;
+		border: 1px solid;
+		display: flex;
+		padding: .5rem 1rem;
+		border-radius: 4px;
+	}
+}
+
+</style>
\ No newline at end of file
diff --git a/src/component/Detail/editFrontBack.vue b/src/component/Detail/editFrontBack.vue
index 74d00e92..dd04ce89 100644
--- a/src/component/Detail/editFrontBack.vue
+++ b/src/component/Detail/editFrontBack.vue
@@ -211,7 +211,6 @@ export default defineComponent({
 				
 			}
 		let setClone = ()=>{
-			
 			let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
 			let oldCanvasDom = canvasBox.querySelector('.canvas-container')
 			let oldCanvasDom1 =  canvasBox.querySelector('canvas')
diff --git a/src/component/Events/eventsDetail.vue b/src/component/Events/eventsDetail.vue
index 3f2b6c92..69751de6 100644
--- a/src/component/Events/eventsDetail.vue
+++ b/src/component/Events/eventsDetail.vue
@@ -77,6 +77,7 @@ export default defineComponent({
 		}
 		let setBack = ()=>{
 			router.go(-1);
+			// router.push('/home/events')
 		} 
 		let openButton = (data:any,index:number)=>{
 			if(filter.loadingShow[index]){
diff --git a/src/component/HomePage/ExportModel.vue b/src/component/HomePage/ExportModel.vue
index 21511b8a..e7f893af 100644
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -711,11 +711,6 @@ export default defineComponent({
 					let heightScale = imgObj.height / height
 					imgWidth = imgObj.width * heightScale
 				}
-				// imgWidth =
-
-				// 	(canvasWH.value.width -
-				// 		(likeDesign - 1) * 20) /
-				// 	likeDesign;
 			}
 			return imgWidth
 		}
diff --git a/src/component/LoginPage/googleLogin.vue b/src/component/LoginPage/googleLogin.vue
new file mode 100644
index 00000000..9c276203
--- /dev/null
+++ b/src/component/LoginPage/googleLogin.vue
@@ -0,0 +1,61 @@
+<template>
+    <div class="Container">
+        <!-- 谷歌登录 -->
+        <div class="g_id_signin" id="g_id_signin"></div>
+    </div>
+</template>
+<script>
+	import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+
+    export default defineComponent({
+        name: "login",
+		setup() {
+			const  handleCredentialResponse = async (response) => {
+                // 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
+				console.log(response);
+                let code = response.credential
+				console.log(code);
+                // await api.googleLogin(code);
+            }
+			onMounted(()=>{
+				let  GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
+				// let  GOOGLE_CLIENT_ID = '399537927614-3sd3rs9p79doocsrff7gm5m1f3chvmn2.apps.googleusercontent.com'
+				
+				// 使用谷歌登录的api
+				const script = document.createElement("script");
+				script.src = "https://accounts.google.com/gsi/client"
+				document.body.appendChild(script);
+
+				window.addEventListener('load', () => {
+					window.google.accounts.id.initialize({
+					// 主要就是填写client_id
+						client_id: GOOGLE_CLIENT_ID,
+						auto_select: false,
+						callback: handleCredentialResponse,
+						context:"signin",
+						ux_mode:"popup",
+						itp_support:true,
+					});
+					window.google.accounts.id.renderButton(
+						document.getElementById("g_id_signin"),
+						{
+							type:"standard",
+							shape:"pill",
+							theme:"outline",
+							text:"signin_with",
+							size:"medium",
+							logo_alignment:"left",
+						}
+					);
+				})
+			})
+			return {
+            }
+		},
+    })
+</script>
+<style scoped>
+.Container{
+	width: 45%;
+}
+</style>
diff --git a/src/component/LoginPage/verificationCodeInput.vue b/src/component/LoginPage/verificationCodeInput.vue
index 4d8b92b7..c958cedb 100644
--- a/src/component/LoginPage/verificationCodeInput.vue
+++ b/src/component/LoginPage/verificationCodeInput.vue
@@ -42,8 +42,8 @@ export default defineComponent({
     cIndex() {
       this.resetCaret();
     },
-    lastCode(val) {
-      if (val) {
+    lastCode(newVal,oldVal) {
+      if (newVal && newVal != oldVal) {
         this.$refs.input[this.ctSize - 1].blur();
         this.sendCaptcha();
       }
diff --git a/src/component/modules/liquefaction.vue b/src/component/modules/liquefaction.vue
index cf9aade6..73fda132 100644
--- a/src/component/modules/liquefaction.vue
+++ b/src/component/modules/liquefaction.vue
@@ -98,10 +98,16 @@ export default defineComponent({
 				canvasImgData.width = img.width
 				canvasImgData.height = img.height
 				let canvasBox = document.querySelector('.liquefaction .liquefaction_canvas_box')
-				let width = canvasBox.offsetHeight / img.height * img.width
 				canvas = document.getElementById('c')
+				let scale = canvasBox.offsetWidth / img.width
+				let width = canvasBox.offsetWidth
+				let height = img.height * scale
+				if(height > canvasBox.offsetHeight){
+					height = canvasBox.offsetHeight
+					width = img.width / img.height * height
+				}
 				canvas.width = width
-				canvas.height = canvasBox.offsetHeight
+				canvas.height = height
 				let optfor = false
 				const context = canvas.getContext('2d');
 				context.drawImage(img, 1, 1, canvas.width, canvas.height);
@@ -351,7 +357,11 @@ export default defineComponent({
 			text-align: center;
 			// overflow-x: auto;
 			position: relative;
-			overflow-y: hidden;
+			// overflow-y: hidden;
+			display: flex;
+			align-items: center;
+			overflow: hidden;
+			justify-content: center;
 		}
 		.liquefaction_parameter{
 			padding-top: 5rem;
diff --git a/src/tool/canvasDrawing.js b/src/tool/canvasDrawing.js
index 315ad983..7bec16a8 100644
--- a/src/tool/canvasDrawing.js
+++ b/src/tool/canvasDrawing.js
@@ -32,10 +32,15 @@ function JSchangeType(canvas, val) {
 	}
 }
 //绘制直线
-function JScanvasMouseDown(str,e, width,patterning) {//创建线
+function JScanvasMouseDown(e, data) {//创建线
 	let downPoint = e.absolutePointer
 	let currentPatterning
-	switch (str) {
+	let fill = data?.fill || 'rgba(0, 0, 0, 0.2)'
+	let radius =  data?.radius || 5
+	let width = data?.width || 0
+	let selectable = data?.selectable
+	let strokeDashArray =  data?.strokeDashArray || [0,0]
+	switch (data.str) {
 		case 'rect':
 			let top = Math.min(downPoint.y)
 			let left = Math.min(downPoint.x)
@@ -44,9 +49,13 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
 			currentPatterning = new fabric.Rect({
 				top,
 				left,
-				fill: 'rgba(0, 0, 0, 0.2)',
-				rx:5,
-				ry:5,
+				fill: fill,
+				stroke:'#000',
+				strokeWidth:width,
+				strokeDashArray:strokeDashArray,
+				rx:radius,
+				ry:radius,
+				selectable,
 			})
 		break
 		case 'line':
@@ -55,7 +64,7 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
 				downPoint.x, downPoint.y // 结束点坐标
 			],
 				{
-					stroke: 'rgba(0, 0, 0, 0.2)', // 笔触颜色
+					stroke: fill, // 笔触颜色
 					strokeLineCap: 'round',
 					strokeWidth:Number(width),
 				}
@@ -66,9 +75,9 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
 				top: downPoint.y,
 				left: downPoint.x,
 				radius: 0,
-				fill: 'rgba(0, 0, 0, 0.2)',
+				fill: fill,
 				// fill: 'transparent',
-				// stroke: 'rgba(0, 0, 0, 0.2)'
+				// stroke: fill
 			  })
 		break
 		case 'triangle':
@@ -77,9 +86,9 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
 				left: downPoint.x,
 				width: 0,
 				height: 0,
-				fill: 'rgba(0, 0, 0, 0.2)',
+				fill: fill,
 				// fill: 'transparent',
-				// stroke: 'rgba(0, 0, 0, 0.2)'
+				// stroke: fill
 			  })
 		break
 		case 'ellipse':
@@ -88,9 +97,9 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
 				left: downPoint.x,
 				rx: 0,
 				ry: 0,
-				fill: 'rgba(0, 0, 0, 0.2)',
+				fill: fill,
 				// fill: 'transparent',
-				// stroke: 'rgba(0, 0, 0, 0.2)'
+				// stroke: fill
 			  })
 		break
 		case 'fold':
@@ -99,7 +108,7 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
 					{ x: downPoint.x, y: downPoint.y }
 				],{
 					fill: 'transparent',
-					stroke: 'rgba(0, 0, 0, 0.2)',
+					stroke: fill,
 					objectCaching: false,
 					strokeWidth:Number(width),
 					selection:false,
@@ -269,14 +278,15 @@ async function JSSetTexture(src,){
 	})
 	return img
 }
-function JSSetRemoveImage(fun){
+let JSSetRemoveImage = (fun)=>{
 	const deleteIcon = cuowuImg
 	// 创建删除图片元素
+	const cornerSize = 24
 	let deleteImg = document.createElement('img')
 	deleteImg.src = deleteIcon
-	function renderIcon(icon) {
-		return function (ctx, left, top, styleOverride, fabricObject) {
-			var size = this.cornerSize;
+	let renderIcon = (icon) => {
+		return (ctx, left, top, styleOverride, fabricObject)=> {
+			var size = cornerSize;
 			ctx.save();
 			ctx.translate(left, top);
 			ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
@@ -292,7 +302,7 @@ function JSSetRemoveImage(fun){
 		cursorStyle: 'pointer',
 		mouseUpHandler:fun,
 		render: renderIcon(deleteImg),
-		cornerSize: 24
+		cornerSize: cornerSize
 	})
 }
 function JSSetGroup(data){
diff --git a/src/tool/canvasGeneral.js b/src/tool/canvasGeneral.js
index aef7b8db..f74492af 100644
--- a/src/tool/canvasGeneral.js
+++ b/src/tool/canvasGeneral.js
@@ -8,19 +8,11 @@ import {
 	JSSetTexture,
 	JSSetRemoveImage,
  } from "@/tool/canvasDrawing";
-class myCanvas {
+import { getMousePosition } from "@/tool/mdEvent";
+import { file } from "jszip";
+class MyCanvas {
+	canvas=null
 	constructor() {
-		this.canvasDomParent = null;
-		this.canvas = null;
-		this.canvasDom = null;
-		this.pencilBtn = null;
-		this.pencilType = null;
-		this.keyDown = [];//键盘按下
-		this._clipboard = null; //剪切板
-		this.isLoadCanvas = false//撤回或者反撤回false为撤回
-		this.reverseCanvasState=[];//撤回
-		this.normalCanvasState=[];//反撤回
-		this.canvasState = {}//当前内容
 		this.pencilList = {
 			textFontFamilyList:[
 				{ value: 'Arial', name: 'select font' },
@@ -69,60 +61,1702 @@ class myCanvas {
 					url:'/image/brush/SpraypaintBrush.jpg'
 				},
 			]
-
 		}
+		this.canvasDomParent = null;
+		this.canvas = MyCanvas.canvas;
+		this.addPresent = {}
+		this.canvasWH={
+			width:0,
+			height:0,
+		}
+		this.createPatterning = {//创建图形
+			state:false,
+			content:null,
+			current:null,	//临时图形
+			polyLineBtn:null,
+			textDataShow:false,
+		}
+		this.mouse = {
+			point:null,
+			upPoint:null,
+			isMovePostion:false,
+			isDown:false,
+			lastPosX:0,
+			lastPosY:0,
+		}
+		this.keyboard={
+			down:[]			
+		}
+		this.pencilbtnStyle ={//笔触图形
+			background:'',
+			width:0+'px',
+			height:0+'px',
+			display:'none',
+			left:0+'px',
+			top:0+'px',
+		}
+		this.layer = {
+			list:[],
+			selectLayer:{
+				group:null,
+				id:-1,
+			},
+			currentIndex:0,
+		}
+		this.liquefaction = {
+			img:null,
+			type:'',
+			dashed:null,
+		}
+		this.clipPath = {
+			isImg:false,
+			img:null,
+			clipGroup:null
+		}
+		this.dashed = {
+			state:false,//用来判断鼠标是否移入dashed 如果移入就变为可拖拽
+			isDrawingMode:false,//用来获取移入前是否是绘画模式
+		}
+		this.fontFamily = this.pencilList.textFontFamilyList[0].value
+		this.createText=null
+		this.pencilBtn = null;
+		this.pencilType = null;
+		this.canvasPencilColor = '#000000'
+		this.colorHistoryList = ['rgb(0, 0, 0)']
+
+		this.keyDown = [];//键盘按下
+		this.oldOperation = ''
+		//笔触
+		this.brushwork = {
+			value:'PencilBrush',
+			width:{},
+			color:'#000000',
+			texture:0,
+		}
+		this.texture={
+			value:0,
+			list:[],
+		}
+		for (let index = 0; index < 20; index++) {
+			this.texture.list.push({value:index,url:`/image/texture/texture${index}.webp`})
+		}
+
+		this._clipboard = null; //剪切板
+		this.isLoadCanvas = false//撤回或者反撤回false为撤回
+		this.reverseCanvasState=[];//撤回
+		this.normalCanvasState=[];//反撤回
+		this.canvasState = {}//当前内容
+		this.operation = 'movePosition'
+		this.operationMode = 'fill'
+		this.setTimeOut = {//定时器
+			color:null,
+			width:null,
+			colorHistory:null,
+			canvasWH:null,
+			updataLayer:null,
+		}//给切换颜色设置防抖
+		
 	}
-	canvasInit(dom, val) {
-		this.canvasDomParent = dom;
+	async canvasInit (dom, val){//初始化
 		this.canvasClear()
+		this.canvasWH = val
+		
+		this.canvasDomParent = dom;
 		var canvasDom = document.createElement("canvas");
 		this.canvasDomParent.appendChild(canvasDom);
-		this.canvas = new fabric.Canvas(canvasDom, {
-			backgroundColor: "rgba(255, 255, 255)",
-			width: val.width?val.width:this.canvasDomParent.getBoundingClientRect().width,
-			height: val.height?val.height:this.canvasDomParent.getBoundingClientRect().height,
+
+		MyCanvas.canvas = new fabric.Canvas(canvasDom, {
+			backgroundColor: "rgba(230, 230, 230)",
+			width: this.canvasWH.width,
+			height: this.canvasWH.height,
 			isDrawingMode: val.isDrawingMode, // 开启绘图模式
 			selectionFullyContained: true,
 			selectionKey:'ctrlKey',
 			includeDefaultValues: false,//尚未测试 精简导出JSON
+			// freeDrawingCursor: 'none',
+			preserveObjectStacking:true,
 		});
+		// MyCanvas.canvas.freeDrawingCursor= 'none'
 
+		this.initCanvasWH('init')
+		fabric.Object.prototype.cornerSize = 10//选中后的操作按钮大小
+		fabric.Object.prototype.transparentCorners = false //实心
 		if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
-			JSSetRemoveImage(this.deleteObject)
+			JSSetRemoveImage(this.deleteObject.bind(this))
 		}else{
-			fabric.Object.prototype.controls.deleteControl.mouseUpHandler = this.deleteObject
+			fabric.Object.prototype.controls.deleteControl.mouseUpHandler = this.deleteObject.bind(this)
 		}
-
-		this.canvas.on("object:modified", ()=>{
+		MyCanvas.canvas.on("object:modified", (event)=>{
 			this.updateCanvasState('')
+			this.updataLayer()
 		});
-
 		this.canvasKeyDown = this.canvasKeyDown.bind(this);
         this.canvasKeyUp = this.canvasKeyUp.bind(this);
+		// let rect1 = new fabric.Rect({
+		// 	left: 0,
+		// 	top: 0,
+		// 	width: 500,
+		// 	height: 500,
+		// 	fill: "red",
+		// });
+		// MyCanvas.canvas.add(rect1)
+		// rect1.on('mouseover', function() {
+		// 	// rect1.set({ fill: 'green' });  // 鼠标移入时改变颜色为绿色
+		// 	// canvas.renderAll();  // 重新渲染画布
+		// });
+	
+		// // 为矩形添加 mouseleave 事件
+		// rect1.on('mouseout', function() {
+		// 	// rect1.set({ fill: 'blue' });  // 鼠标移出时恢复颜色为蓝色
+		// 	// canvas.renderAll();  // 重新渲染画布
+		// });
+		// return
+		// rect1.filters.push(new fabric.Image.filters.Grayscale())
+		// MyCanvas.canvas.add(rect1)
+		// // MyCanvas.canvas.add(rect1)
+		// let rect = new fabric.Rect({
+		// 	left: 0,
+		// 	top: 0,
+		// 	width: MyCanvas.canvas.width,
+		// 	height: MyCanvas.canvas.height,
+		// 	inverted:true,
+		// 	fill: "red",
+		// });
+		// // let rect2 = new fabric.Rect({
+		// // 	width: MyCanvas.canvas.width,
+		// // 	height: MyCanvas.canvas.height,
+		// // 	fill:'#FFF'
+		// // });
+		// // // MyCanvas.canvas.add(rect2)
+		// fabric.Image.fromURL('https://www.minio.aida.com.hk:12024/aida-collection-element/83/Moodboard/7a5fec0f-5a8c-4f1e-80c0-c4cda335d7c5.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20241112%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241112T060752Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=25c5fa23dc447d1d06b4efeeec23454c797219df9c45d2cec231d0c8372754ce',(img)=>{
+		// 	let scale = {
+		// 		X:MyCanvas.canvas.width/img.width,
+		// 		Y:MyCanvas.canvas.height/img.height
+		// 	}
+		// 	rect.set({
+		// 		fill: new fabric.Pattern({
+		// 			source: img.getElement(),  // 传入图片元素
+		// 			repeat: 'no-repeat'        // 设置图片不重复
+		// 		}),
+		// 		clipPath : rect1
+		// 	})
+		// 	img.set({
+		// 		scaleX:scale.X,
+		// 		scaleY:scale.Y,
+		// 		left:0,
+		// 		top:0,
+		// 	})
+		// 	MyCanvas.canvas.add(rect)
+		// },{ crossOrigin: "Anonymous" })
+		// // // MyCanvas.canvas.add(rect1)
+		// // // rect1.clipPath = group
+		// // // MyCanvas.canvas.forEachObject((item) =>{
+		// // // 	if(item.clipPath){
+		// // // 		item.clipPath.add(rect2)
+		// // // 		// item.clipPath = group
+		// // // 	}
+		// // // })
+		// return
+
+		MyCanvas.canvas.on("mouse:move", this.setCanvasMove.bind(this));
+		MyCanvas.canvas.on("mouse:down",this.setCanvasDown.bind(this));
+		MyCanvas.canvas.on("mouse:up",this.setCanvasUp.bind(this));
+		MyCanvas.canvas.on("mouse:wheel",this.setCanvasWheel.bind(this));
+		//双击
+		MyCanvas.canvas.on("mouse:dblclick", event=>{
+			if(this.operation == 'fold'){
+				this.foldEnd('Enter')
+			}
+		});
+		document.addEventListener('mousemove', this.mouseMove.bind(this));
+		document.addEventListener('touchmove', this.touchmove.bind(this));
 		document.addEventListener("keydown", this.canvasKeyDown);
 		document.addEventListener("keyup", this.canvasKeyUp);
-		initAligningGuidelines(this.canvas,true)
-		JSchangeType(this.canvas,'init')
-		this.updateCanvasState('')
-		this.canvas.on("object:added", (event)=>{
-			if(!this.isLoadCanvas)this.updateCanvasState('')
+		initAligningGuidelines(MyCanvas.canvas, true);
+		JSchangeType(MyCanvas.canvas,'init')
+		// await this.createBg()
+		await this.createLayer({str:'init'})//创建图层并且使用
+		MyCanvas.canvas.on("object:added", (event)=>{
+			this.addLayer(event)
 		});
-		return this.canvas
+		this.canvas = MyCanvas.canvas;
+		return MyCanvas.canvas
 	}
+	initCanvasWH(str){
+		let scale
+		if(this.canvasWH.width>this.canvasWH.height)scale = this.canvasDomParent.offsetWidth / this.canvasWH.width
+		if(this.canvasWH.width<this.canvasWH.height)scale = this.canvasDomParent.offsetHeight / this.canvasWH.height
+		if(this.canvasWH.width == this.canvasWH.height)scale = this.canvasDomParent.offsetHeight / this.canvasWH.height
+		let x = this.canvasWH.width / 2
+		let y = this.canvasWH.height / 2
+		if(str == 'updata'){
+			x = 0
+			y = 0
+			const vpt = MyCanvas.canvas.viewportTransform;
+			vpt[4] = 0; // 更新水平偏移
+			vpt[5] = 0; // 更新垂直偏移
+		}
+		MyCanvas.canvas.zoomToPoint(
+			{ // 关键点
+			x: x,
+			y: y
+			},
+			scale
+		)
+		MyCanvas.canvas.setBackgroundColor({
+			source:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC',
+			repeat: 'repeat',
+			},MyCanvas.canvas.renderAll.bind(MyCanvas.canvas),
+		)
+	}
+	mouseMove(event){
+		let e = getMousePosition(event,false)
+		this.setDomMove(e)
+	}
+	touchmove(event){
+		let e = getMousePosition(event,true)
+		this.setDomMove(e)
+	}
+	setDomMove(event){
+		let canvasCenterBox = this.canvasDomParent;
+		if(!canvasCenterBox)return
+		let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
+		let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
+		this.pencilbtnStyle.left = parentX + "px"
+		this.pencilbtnStyle.top =  parentY+'px'
+	}
+	//设置操作
+	setOperation(str){
 
+		this.operation = str
+		MyCanvas.canvas.discardActiveObject();//取消所有选中边框
+		if(this.createPatterning.state){
+			MyCanvas.canvas.remove(this.createPatterning.current)
+		}
+		this.removeSetText()
+		initAligningGuidelines(MyCanvas.canvas,false)
+		MyCanvas.canvas.remove(this.createPatterning.polyLineBtn)
+		if(str == 'pencil'){
+			this.setPencil()
+			this.pencilbtnStyle.display = `block`
+			this.setCursor('none');
+			MyCanvas.canvas.freeDrawingCursor = 'none'
+		}else if(str == 'move'){
+			JSchangeType(MyCanvas.canvas,'')
+			MyCanvas.canvas.isDrawingMode = false
+			this.pencilbtnStyle.display = `none`
+			this.setCursor('grab');
+		}else if(str == 'movePosition'){
+			JSchangeType(MyCanvas.canvas,'init')
+			initAligningGuidelines(MyCanvas.canvas,true)
+			this.setMove()
+			this.pencilbtnStyle.display = `none`
+			this.setCursor('all-scroll');
+			MyCanvas.canvas.isDrawingMode = false
+		}else if(str == 'texture'){
+			this.setTexture()
+			this.pencilbtnStyle.display = `block`
+			MyCanvas.canvas.freeDrawingCursor = 'none'
+			this.setCursor('none');
+		}else if(str == 'eraser'){
+			this.setEraser()
+			this.pencilbtnStyle.display = `block`
+			MyCanvas.canvas.freeDrawingCursor = 'none'
+			this.setCursor('none');
+		}else if(str == 'text'){
+			this.setMove()
+			this.setText()
+			JSchangeType(MyCanvas.canvas,'init')
+			this.setCursor('text')
+			this.pencilbtnStyle.display = `none`
+		}else if(['zoomIn', 'zoomOut'].includes(str)){
+			this.pencilbtnStyle.display = `none`
+			if(str == 'zoomIn')this.setCursor('zoom-in');
+			if(str == 'zoomOut')this.setCursor('zoom-out');
+			MyCanvas.canvas.isDrawingMode = false
+			MyCanvas.canvas.forEachObject((obj) =>{
+				if(obj.type != 'group' && !obj.isType('path')){
+					obj.selectable = false
+				}
+			});
+		}else if(['dashedPencil', 'dashed'].includes(str)){
+			this.setGroupGrid('all')
+			MyCanvas.canvas.isDrawingMode = false
+			this.pencilbtnStyle.display = `none`
+			this.setCursor('crosshair')
+			MyCanvas.canvas.freeDrawingCursor = 'crosshair'
+			if(str == 'dashedPencil')this.setDashedPencil()
+			MyCanvas.canvas.forEachObject((obj) =>{
+				if(obj.type != 'group' && !obj.isType('path')){
+					obj.selectable = false
+				}
+			});
+		}else if(str){
+			this.pencilbtnStyle.display = `none`
+			this.setCursor('auto');
+			MyCanvas.canvas.isDrawingMode = false
+			MyCanvas.canvas.forEachObject((obj) =>{
+				if(obj.type != 'group' && !obj.isType('path')){
+					obj.selectable = false
+				}
+			});
+		}
+		if(str == 'dashed' || str == 'dashedPencil' || str != 'movePosition'){
+			if(this.layer.selectLayer.group.custom.groupType == 'Grid')this.setGroupGrid('all')
+			this.clipPath = {
+				isImg:false,
+				clipGroup:null,
+				img:null,
+			}
+		}
+	}
+	setCursor(str){
+		MyCanvas.canvas.defaultCursor = str;
+		MyCanvas.canvas.moveCursor = str;
+		MyCanvas.canvas.hoverCursor = str;
+		MyCanvas.canvas.upperCanvasEl.style.cursor = str;
+	}
+	setCanvasMove = (event)=>{
+		
+		if(this.mouse.isMovePostion && this.operation == 'move') return this.setCanvasPosition(event)
+		if(MyCanvas.canvas.isDrawingMode){
+		}else{
+			let getActiveObject = MyCanvas.canvas.getActiveObject()
+			if(
+				!this.clipPath.isImg && 
+				this.mouse.isDown && 
+				getActiveObject && 
+				getActiveObject.custom.dashed && 
+				this.layer.selectLayer.group.custom?.groupType == 'Grid' &&
+				this.operation == 'movePosition' &&
+				getActiveObject._objects.length == 1
+			){
+				this.setclipPathImg()
+			}
+			if(this.createPatterning.state){
+				let str = this.operation
+				if(this.operation == 'dashed')str = 'rect'
+	 			JScanvasMouseMove(str,event,this.createPatterning.current,this.mouse.point,this.keyboard.down)
+				MyCanvas.canvas.requestRenderAll()
+	 		}
+		}
+	}
+	setCanvasPosition(event){
+		const e = event;
+		const vpt = MyCanvas.canvas.viewportTransform;
+
+		vpt[4] += e.pointer.x - this.mouse.lastPosX; // 更新水平偏移
+		vpt[5] += e.pointer.y - this.mouse.lastPosY; // 更新垂直偏移
+
+		MyCanvas.canvas.requestRenderAll(); // 请求重绘画布
+		this.mouse.lastPosX = e.pointer.x;
+		this.mouse.lastPosY = e.pointer.y;
+	}
+	// setRemoveDashed(){
+	// 	MyCanvas.canvas.forEachObject((obj) =>{
+	// 		if(obj.custom.dashed && obj._objects){
+	// 			let rect = obj._objects.filter(item => item.type == 'rect')[0]
+	// 			obj.remove(rect)
+	// 			MyCanvas.canvas.renderAll();
+	// 		}
+	// 	});
+	// }
+	//设置再画布上按下
+	setCanvasDown(event){
+		if(event.target && event.target.custom?.dashed && ['dashedPencil', 'dashed'].includes(this.operation)){
+			// if(MyCanvas.canvas.isDrawingMode){
+			// 	MyCanvas.canvas.isDrawingMode = false;
+			// }
+			this.dashed.state = true
+		}else if(!event.target?.custom?.dashed){
+			// if(['dashedPencil'].includes(this.operation)){
+			// 	MyCanvas.canvas.isDrawingMode = true;
+			// }
+			this.dashed.state = false
+		}
+		let dashedGroup = MyCanvas.canvas.getObjects().filter(obj => obj.custom.dashed)[0];
+		if(this.dashed.state && (this.operation == 'dashed' || this.operation == 'dashedPencil') && dashedGroup)return
+		if(!this.dashed.state && (this.operation == 'dashed' || this.operation == 'dashedPencil') && !event.target?.custom?.dashed && dashedGroup){
+			MyCanvas.canvas.remove(dashedGroup)
+		}
+		if(this.operation == 'movePosition' && !event?.target?.custom?.dashed && this.layer.selectLayer.group.custom.groupType == 'Grid')this.setGroupGrid('all');
+
+		//设置移动端按下添加元素
+		this.mouse.isDown = true
+		this.mouse.lastPosX = event.pointer.x;
+		this.mouse.lastPosY = event.pointer.y;
+		if(this.operation == 'move'){
+			this.mouse.isMovePostion = true;
+			this.setCursor('grabbing');
+			return
+		}
+		if(this.operation == 'zoomIn' || this.operation == 'zoomOut'){
+			this.setCanvasZoom(event)
+			return
+		}
+		// this.setRemoveDashed()
+		if(this.addPresent.upScaleChecked){//创建元素
+			this.present.upScaleChecked = false
+			this.present = {}
+			let pointerVpt = canvas.restorePointerVpt(event.pointer)
+			switch (currentType.value.type) {
+				case 'colorBoards':
+					let rect = setGroup(currentType.value.data)
+					setCanvasColor(pointerVpt.y, pointerVpt.x,rect)
+				break
+				default :
+					createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
+				break
+			}
+			// 创建完元素，把当前操作的元素类型设置回 null
+			currentType.value.type = null
+			currentType.value.data = null
+		}
+		this.mouse.point = event.absolutePointer
+		let arr = ['rect','line','circle','triangle','ellipse','fold','dashed']
+		if(arr.indexOf(this.operation) > -1){
+			JSchangeType(MyCanvas.canvas,this.operation)
+			this.createPatterning.state = true
+			MyCanvas.canvas.forEachObject((obj) =>{
+				obj.set('selectable', false);  // 禁用选中
+			});
+			if(this.createPatterning.current && this.operation == 'fold'){
+				MyCanvas.canvas.skipTargetFind = false
+				this.createPatterning.current.points.push({
+					x: this.mouse.point.x,
+					y: this.mouse.point.y
+				})
+			}else{
+				let width = this.brushwork.width[this.operation]?this.brushwork.width[this.operation]:20
+				let data = {
+					str:this.operation,
+					width,
+					selectable:true,
+				}
+				if(this.operation == 'dashed'){
+					width = 1 / MyCanvas.canvas.getZoom()
+					data = {
+						fill:'transparent',
+						strokeDashArray: [width*3, width*3],
+						width,
+						radius:0,
+						str:'rect',
+						selectable:true,
+					}
+				}else if(this.operation == 'rect'){
+					data.width = 0
+				}
+				this.createPatterning.current = JScanvasMouseDown(event,data)
+				if(this.operation == 'dashed')this.createPatterning.current.set({custom:{dashed:true}})
+				MyCanvas.canvas.add(this.createPatterning.current)
+				if(this.operation == 'fold'){
+					this.createPatterning.polyLineBtn = JScreateCheck(event)
+					this.createPatterning.polyLineBtn.on('mousedown',this.foldEnd.bind(this))
+					MyCanvas.canvas.add(this.createPatterning.polyLineBtn)
+				}
+			}
+		}else{
+			// var clickedObject = event.target;
+			// if (clickedObject instanceof fabric.Textbox && this.operation != 'text') {
+			// 	this.createPatterning.textDataShow = true
+			// 	this.createText = clickedObject
+			// 	console.log(1);
+			// }else{
+			// 	console.log(2);
+			// 	this.createPatterning.textDataShow = false
+			// 	this.createText = {}
+			// }
+			// this.createPatterning.state = false
+		}
+	}
+	setTextData(obj){
+		this.fontFamily = obj.fontFamily
+		this.brushwork.width['text'] = obj.fontSize
+		this.brushwork.color = obj.fill
+	}
+	async setCanvasUp(event){
+		this.mouse.isDown = false
+		if(this.mouse.isMovePostion){
+			this.mouse.isMovePostion = false
+			this.setCursor('grab');
+			return
+		}
+		if(this.operation == 'eraser')return this.updataLayer()
+		this.mouse.upPoint = event.absolutePointer
+		if(MyCanvas.canvas.isDrawingMode){
+			setTimeout(() => {
+				// pencilbtnStyle.value.display = `none`
+				this.updateCanvasState()
+			}, 100);
+		}else{
+			// event.target && (event.target.bringToFront())//设置优先级
+		}
+		if(this.createPatterning.state){
+			switch (this.operation) {
+				case 'line':
+					this.createPatterning.current.set({stroke: this.brushwork.color})
+				break
+				case 'fold':
+					// this.createPatterning.current.set({stroke: this.brushwork.color})
+				break
+				default :
+					if(JSON.stringify(this.mouse.point) == JSON.stringify(this.mouse.upPoint)){
+						MyCanvas.canvas.remove(this.createPatterning.current)
+						return
+					}
+					if(this.operation == 'dashed'){
+
+						this.createPatterning.current.set({fill: 'transparent'})
+					}else if(this.operationMode == 'fill'){
+						this.createPatterning.current.set({fill: this.brushwork.color})
+					}else if (this.operationMode == 'border'){
+						this.createPatterning.current.set({fill: 'transparent',stroke: this.brushwork.color,strokeWidth: this.brushwork.width[this.operation]?this.brushwork.width[this.operation]:20})
+					}
+				break
+			}
+			if(this.operation == 'fold'){
+				MyCanvas.canvas.forEachObject((obj) =>{
+					if(this.isSelectable(obj)){
+						obj.selectable = true
+					}else{
+						obj.selectable = false
+					}
+				});
+				MyCanvas.canvas.bringToFront(this.createPatterning.polyLineBtn);//设置优先级最高
+			}else if(this.operation){
+				this.createPatterning.state = false
+				MyCanvas.canvas.renderAll();
+				if(this.operation == 'dashed'){
+					await this.setDashed(this.createPatterning.current)
+				}else{
+					this.addLayer({target:this.createPatterning.current})
+					this.setOperation('movePosition')
+				}
+				this.clearPatterning()//临时图形置为空并且添加撤回对象里面
+			}
+		}
+	}
+	
+	async setclipPathImg(){//裁剪图片
+		if(!this.clipPath.clipGroup)return
+		this.clipPath.isImg = true
+
+		let clipPathElement = this.clipPath.clipGroup._objects.filter(obj => obj.type != 'image')[0]
+		let imgBG = MyCanvas.canvas.getObjects().filter(obj => obj.custom.isSelectable && obj.type == 'rect')[0];
+		let position = {
+			left:this.clipPath.clipGroup?.left - (imgBG.left?imgBG.left:0),
+			top:this.clipPath.clipGroup?.top - (imgBG.top?imgBG.top:0),
+			width:this.clipPath.clipGroup?.width,
+			height:this.clipPath.clipGroup?.height,
+		}
+		// await this.setGroupGrid()
+		//添加裁剪后的图片
+		let elements = MyCanvas.canvas.getObjects().filter(obj => this.isAddToLayer(obj));
+		let imgData = await this.groupToImg(elements,position,'clipPath')
+		let img = await this.createImage({minioUrl:imgData})
+		img.set({
+			scaleX:1,
+			scaleY:1,
+			left:0 - position.width/2,
+			top:0 - position.height/2,
+		})
+		img.clipPath = clipPathElement
+		this.clipPath.clipGroup.insertAt(img)
+		//裁剪
+		this.layer.selectLayer.group.custom.groupType = 'Grid'
+		clipPathElement.clone(cloned=>{
+			cloned.set({left:position.left,top:position.top,strokeWidth:0})
+			if(imgBG?.custom?.state != 'success')this.setClipPath(imgBG,cloned)
+		})
+	}
+	setDashedPencil(){
+		MyCanvas.canvas.isDrawingMode = true
+		let pencil = new fabric.Test(MyCanvas.canvas,{}); //普通笔
+		MyCanvas.canvas.freeDrawingBrush = pencil
+	}
+	async setDashed(obj){
+		MyCanvas.canvas.remove(obj)
+		let position = {
+			left:obj.left,
+			top:obj.top,
+			width:obj.width,
+			height:obj.height,
+		}
+		await obj.clone((cloned)=>{
+			let {width,height,left,top} = position
+			// cloned.set({left:cloned.strokeWidth/2,top:cloned.strokeWidth/2})
+			let group = new fabric.Group([cloned],{
+				left:left + cloned.strokeWidth/2,
+				top:top + cloned.strokeWidth/2,
+				width,height,
+				custom:{
+					dashed:true
+				}
+			})
+			MyCanvas.canvas.add(group)
+		})
+		
+		// this.addLayer({target:obj})//更新参数
+		// for (let index = 0; index < elements.length; index++) {
+		// 	const item = elements[index];
+		// 	await new Promise((resolve, reject) => {
+		// 		if(this.isAddToLayer(item)){
+		// 			item.clone((cloned)=>{
+		// 				this.setClone(item,cloned)
+		// 				if(item.custom?.layerId != -1){
+		// 					temporar.add(cloned)
+		// 				}
+		// 				resolve()
+		// 			})
+		// 		}
+		// 	})
+		// }
+		// const {left,height,top,width} = position
+		// let scale = 1.2/MyCanvas.canvas.getZoom()<1?1.2:1.2/MyCanvas.canvas.getZoom()
+		// let data = temporar.toDataURL({left,height:height+scale,top,width:width+scale});
+		// let img = await this.createImage({minioUrl:data})
+		// img.set({scaleX:1,scaleY:1})
+		// MyCanvas.canvas.forEachObject((item) =>{
+		// 	if(item.custom.isSelectable)return
+		// 	if(!this.isAddToLayer(item))return
+		// 	let imgScale = {
+		// 		pX:(item.scaleX?item.scaleX:1),
+		// 		pY:(item.scaleY?item.scaleY:1),
+		// 	}
+		// 	let scaleWH = item.width / (item.width * imgScale.pX)
+		// 	let rect = new fabric.Rect({
+		// 		left:left * scaleWH - item.left - item.width / 2,
+		// 		top:top * scaleWH - item.top - item.height / 2,
+		// 		width:width * scaleWH,
+		// 		height:height * scaleWH,
+		// 	})
+		// 	let group
+		// 	if(item.clipPath){
+		// 		item.clipPath.clone(cloned =>{	
+		// 			group = cloned
+		// 		})
+		// 	}else{
+		// 		group = new fabric.Group([],)
+		// 	}
+		// 	group.set({
+		// 		width:item.width * imgScale.pX,
+		// 		height:item.height * imgScale.pY,
+		// 		left: -item.width * imgScale.pX / 2,
+		// 		top: -item.height * imgScale.pY / 2,
+		// 		inverted:true,
+		// 	})
+		// 	group.add(rect)
+		// 	item.set({clipPath:group})
+		// 	MyCanvas.canvas.renderAll(); // 请求重绘画布
+		// })
+		// img.set({
+		// 	left:left,
+		// 	top:top,
+		// 	custom:{
+		// 		layerId:this.layer.selectLayer.id,
+		// 	},
+		// 	// hasControls:false,
+		// })
+		// MyCanvas.canvas.add(img)
+	}
+	async setGridOrObject(id,str){
+		this.layer.list.forEach((item) => {
+			if(item.id == id)item.groupType = str
+		})
+		await this.lookingLayer(id).then(rv=>{
+			rv.custom.groupType = str
+		})
+		if(str == 'Grid'){
+			await this.setGroupGrid()
+		}else{
+			await this.setGroupGrid('all')
+		}
+		this.setOperation('movePosition')
+	}
+	async copyLayer(id){
+		let createId = new Date().getTime()
+		let elements = MyCanvas.canvas.getObjects().filter(obj => obj.custom.layerId == id)
+		let copyElements = []
+		for (let i = 0; i < elements.length; i++) {
+			await new Promise((resolve, reject) => {
+				let item = elements[i]
+				item.clone((clonedObj)=>{
+					this.setClone(item,clonedObj)
+					clonedObj.custom.layerId = createId
+					copyElements.push(clonedObj)
+					resolve('')
+				})
+			})
+		}
+		await this.createLayer({id:createId})
+		copyElements.forEach( item=>MyCanvas.canvas.add(item))
+	}
+	async setGroupGrid(str){//group变为图片
+		// MyCanvas.canvas.discardActiveObject();//取消所有选中边框
+		let elements = MyCanvas.canvas.getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type);
+		if(str == 'all'){
+			elements = MyCanvas.canvas.getObjects().filter(obj => this.isAddToLayer(obj) && obj.type);
+		}
+		let layerBg = elements.filter(obj => obj.custom.isSelectable)[0]
+		let scaleXY = {
+			scaleX:layerBg?.scaleX?layerBg?.scaleX:1,
+			scaleY:layerBg?.scaleY?layerBg?.scaleY:1,
+			width:layerBg?.width?layerBg?.width:MyCanvas.canvas.width,
+			height:layerBg?.height?layerBg?.height:MyCanvas.canvas.height,
+		}
+		let imgData = await this.groupToImg(elements,{},'setGrid',scaleXY)
+		let img = await this.createImage({minioUrl:imgData})
+		elements.forEach((obj) =>{
+			if(obj.custom.isSelectable){
+			}else{
+				MyCanvas.canvas.remove(obj)
+			}
+		});
+		if(layerBg){
+			layerBg.custom.state = ''
+			delete layerBg.eraser
+			layerBg.set({
+				scaleX:1,
+				scaleY:1,
+				width: scaleXY.width * scaleXY.scaleX,
+				height: scaleXY.height * scaleXY.scaleY,
+				clipPath:null,
+				fill: new fabric.Pattern({
+					source: img.getElement(),  // 传入图片元素
+					repeat: 'no-repeat'        // 设置图片不重复
+				}),
+				hasBorders: true,
+				hasControls: true
+			})
+			this.setGroupStyle(layerBg)
+		}else{
+			const rect = new fabric.Rect({
+				// left:0,
+				// top:0,
+				width: MyCanvas.canvas.width,
+				height: MyCanvas.canvas.height,
+				strokeWidth:0,
+				fill: new fabric.Pattern({
+					source: img.getElement(),  // 传入图片元素
+					repeat: 'no-repeat'        // 设置图片不重复
+				}),
+				custom:{
+					isSelectable:true,
+				},
+				hasBorders: true,
+				hasControls: true
+			});
+			this.setGroupStyle(rect)
+			MyCanvas.canvas.add(rect)
+		}
+		MyCanvas.canvas.renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
+	}
+	//液化
+	getLiquefactionImgObj(){
+		return new Promise(async (resolve, reject) => {
+			let img,str = null
+			const activeObject = this.canvas.getActiveObject(); // 获取选中的对象
+			let dashedGroup = MyCanvas.canvas.getObjects().filter(obj => obj.custom.dashed)[0];
+
+			if (activeObject && activeObject.type === 'image' && 
+				activeObject.custom.type == 'upImgFiles'
+			){
+				img = activeObject
+				this.liquefaction.type = 'upImgFiles'
+
+			}else if(dashedGroup){//判断选取是否存在
+				if(
+					dashedGroup._objects.filter(item => item.type == 'image').length == 0 && 
+					this.layer.selectLayer.group.custom.groupType == 'Grid'
+				){
+					await this.setclipPathImg()
+				}else if(dashedGroup._objects.filter(item => item.type == 'image').length == 0){
+					resolve()
+					return
+				}
+				await new Promise((resolve, reject) => {
+					dashedGroup.clone(async (cloned)=>{
+						this.setClone(dashedGroup,cloned)
+						this.liquefaction.dashed = dashedGroup
+						this.liquefaction.type = 'dashed'
+						cloned._objects = cloned._objects.filter(item => item.type == 'image')
+						console.log( await cloned.toDataURL());
+						img = await cloned.toDataURL()
+						resolve()
+					})
+				})
+			}else if(this.layer.selectLayer.group.custom.groupType == 'Grid'){//判断当前图层是否可以做为液化图片
+				let bg  = this.canvas.getObjects().filter(item => item.custom?.isSelectable)[0]
+				img = bg.fill.source.src
+				this.liquefaction.type = 'layer'
+			}
+			console.log(img);
+			this.liquefaction.img = img
+			resolve(this.liquefaction)
+		})
+		
+	}
+	async setLiquefactionImgObj(liquefaction,data){
+		if(liquefaction.type == 'upImgFiles'){
+			await new Promise((resolve, reject) => {
+				console.log(liquefaction.img);
+				liquefaction.img.setSrc(data, (value)=>{
+					delete liquefaction.img.minioUrl
+					resolve()
+				})
+			})
+		}else if(liquefaction.type == 'dashed'){
+			if(liquefaction.dashed){
+				await new Promise((resolve, reject) => {
+					liquefaction.dashed._objects = liquefaction.dashed._objects.filter(item => item.type != 'image')
+					fabric.Image.fromURL(data, (value)=>{
+						value.set({
+							left:-liquefaction.dashed.width/2,	
+							top:-liquefaction.dashed.height/2,
+						})
+						liquefaction.dashed.insertAt(value)
+						resolve()
+					})
+				})
+				// canvasObj.addDashedImg(value)
+			}
+		}else if(liquefaction.type == 'layer'){
+			let bg = this.canvas.getObjects().filter(item => item.custom?.isSelectable)[0]
+			let img = await this.createImage({minioUrl:data})
+			bg.set({
+				fill: new fabric.Pattern({
+					source: img.getElement(),  // 传入图片元素
+					repeat: 'no-repeat'        // 设置图片不重复
+				}),
+			})
+		}
+		MyCanvas.canvas.renderAll();
+		this.updateCanvasState()
+	}
+	//end液化
+	setGroupStyle(obj){
+		obj.set({
+			borderColor:'#4584ff',
+			cornerStrokeColor :'#4584ff',
+			cornerStyle:'circle'
+		})
+		obj.setControlsVisibility({
+			mtr:false,
+			deleteControl:false
+		})
+		// obj.controls.deleteControl.mouseUpHandler = null
+	}
+	setClipPath(img,clipPath){
+		let imgScale = {
+			pX:(img?.scaleX?img.scaleX:1),
+			pY:(img?.scaleY?img.scaleY:1),
+		}
+		clipPath.set({
+			left: clipPath.left - img.width*imgScale.pX/2,
+			top: clipPath.top - img.height*imgScale.pY/2,
+			inverted:true,
+		})
+		img.set({clipPath:clipPath})
+		img.custom.state = 'success'
+		MyCanvas.canvas.renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
+	}
+	async groupToImg(elements,imgData,type,scaleXY){
+		let temporar = this.temporarilyExport(scaleXY)
+		let bg  = elements.filter(item => item.custom?.isSelectable)[0]
+		let xy = {
+			x:bg?.left?bg?.left:0,
+			y:bg?.top?bg?.top:0,
+		}
+		for (let index = 0; index < elements.length; index++) {
+			const item = elements[index];
+			await new Promise((resolve, reject) => {
+				item.clone((cloned)=>{
+					this.setClone(item,cloned)
+					if(item.custom?.dashed && item._objects){
+						cloned._objects = cloned._objects.filter(item => item.type == 'image')
+					}
+					// if(type == 'setGrid'){
+						cloned.set({
+							left: cloned.left - xy.x,
+							top: cloned.top - xy.y,
+						})
+					// }
+					if(cloned.custom?.layerId != -1){
+						temporar.add(cloned)
+					}
+					resolve()
+				})
+			})
+		}
+		let data = temporar.toDataURL(imgData);
+		this.closeTemporarilyExport(temporar)
+		return data
+	}
+	setCanvasWheel(opt){
+		const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
+		let zoom = MyCanvas.canvas.getZoom() // 获取画布当前缩放值
+		zoom *= 0.999 ** delta
+		if (zoom > 20) zoom = 20
+		if (zoom < 0.01) zoom = 0.01
+		MyCanvas.canvas.zoomToPoint(
+			{ // 关键点
+			x: opt.e.offsetX,
+			y: opt.e.offsetY
+			},
+			zoom
+		)
+		opt.e.preventDefault()
+		opt.e.stopPropagation()
+		this.setPencilWidth()
+	}
+	foldEnd(key){
+		MyCanvas.canvas.skipTargetFind = true
+		let points = this.createPatterning.current.points
+		if(key == 'Enter'){
+		}else{
+			points.pop()
+		}
+		points.pop()
+		this.createPatterning.state = false
+		MyCanvas.canvas.remove(this.createPatterning.current)
+		MyCanvas.canvas.remove(this.createPatterning.polyLineBtn)
+		let polyline = new fabric.Polyline(points, {
+			fill: this.operationMode == 'fill'? this.brushwork.color : 'transparent',
+			stroke: this.brushwork.color,
+			strokeWidth:this.brushwork.width[this.operation]?this.brushwork.width[this.operation]:20,
+			// selection:false,
+		})
+		polyline.set({
+			left:polyline.left+polyline.strokeWidth / 2,
+			top:polyline.top+polyline.strokeWidth / 2,
+		})
+		MyCanvas.canvas.add(polyline)
+		this.clearPatterning()//临时图形置为空并且添加撤回对象里面
+		// this.layerAddElement(polyline)
+	}
+	clearPatterning(){
+		if(this.createPatterning.state){
+			MyCanvas.canvas.remove(this.createPatterning.current)
+		}
+		this.createPatterning.current = null
+		MyCanvas.canvas.remove(this.createPatterning.polyLineBtn)
+		this.updateCanvasState()
+	}
+	textureValueChange = (value)=>{
+		this.texture.value = value
+		this.setTexture()
+	}
+	setOperationMode(str){
+		this.operationMode = str
+	}
+	brushworkChange = (value)=>{
+		this.brushwork.value = value
+		this.setPencil()
+	}
+	setLayerIndex(str){//设置优先级
+		var activeObject = MyCanvas.canvas.getActiveObject();
+		switch (str) {
+			case 'Front':
+				MyCanvas.canvas.bringToFront(activeObject)//顶层
+				// this.layer.selectLayer.group.bringToFront(activeObject)
+			break
+			case 'Back':
+				MyCanvas.canvas.sendToBack(activeObject)//底层
+				// this.layer.selectLayer.group.sendToBack(activeObject)
+			break
+			case 'Forward':
+				MyCanvas.canvas.bringForward(activeObject)
+				// this.layer.selectLayer.group.bringForward(activeObject)
+			break
+			case 'Backwards':
+				MyCanvas.canvas.sendBackwards(activeObject)
+				// this.layer.selectLayer.group.sendBackwards(activeObject)
+			break
+		}
+
+	}
+	setPencil(){
+		let pencil
+		MyCanvas.canvas.isDrawingMode = true//开启绘画模式
+		if(this.brushwork.value == 'PencilBrush'){
+			pencil = new fabric.PencilBrush(MyCanvas.canvas,{}); //普通笔
+		}else if(this.brushwork.value == 'Marking'){
+			pencil = new fabric.PencilBrush(MyCanvas.canvas,); //记号笔
+		}else if(this.brushwork.value == 'InkBrush'){
+			pencil = new fabric.InkBrush(MyCanvas.canvas,{}); //油画笔
+		}else if(this.brushwork.value=='CrayonBrush'){
+			pencil = new fabric.CrayonBrush(MyCanvas.canvas,{}); //蜡笔
+		}else if(this.brushwork.value == 'RibbonBrush'){
+			pencil = new fabric.RibbonBrush(MyCanvas.canvas,{width: 1,}); //色带
+		}else if(this.brushwork.value == 'MarkerBrush'){
+			pencil = new fabric.MarkerBrush(MyCanvas.canvas,{}); //书写笔
+			// pencil = new fabric.PenBrush(MyCanvas.canvas,{}); //书写笔
+		}else if(this.brushwork.value == 'WritingBrush'){
+			pencil = new fabric.WritingBrush(MyCanvas.canvas,{}); //毛笔
+		}else if(this.brushwork.value == 'LongfurBrush'){
+			pencil = new fabric.LongfurBrush(MyCanvas.canvas,{width: 1,}); //色带
+		}else if(this.brushwork.value == 'SpraypaintBrush'){
+			pencil = new fabric.SpraypaintBrush(MyCanvas.canvas,{}); //长毛刷
+		}
+		
+		MyCanvas.canvas.freeDrawingBrush = pencil
+		if(this.brushwork.value == 'RibbonBrush' || this.brushwork.value == 'LongfurBrush'){
+			MyCanvas.canvas.freeDrawingBrush.width = 1;
+		}
+		if(this.brushwork.value == 'Marking'){
+			MyCanvas.canvas.freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,.5);
+		// }else if(this.brushwork.value == 'InkBrush'){
+		// 	canvas.freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,.2);
+		}else{
+			MyCanvas.canvas.freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,1);
+		}
+		this.setPencilWidth()
+		this.pencilbtnStyle.background = this.brushwork.color
+		MyCanvas.canvas.freeDrawingBrush.isEraser = false
+	}
+	setCanvasZoom(opt){
+		let zoom = MyCanvas.canvas.getZoom() // 获取画布当前缩放值
+		let num = -100
+		if(this.operation == 'zoomOut') num = 100
+		zoom *= 0.999 ** num
+		if (zoom > 20) zoom = 20
+		if (zoom < 0.01) zoom = 0.01
+		// MyCanvas.canvas.setDimensions(MyCanvas.canvas.width *= zoom,MyCanvas.canvas.height *= zoom)
+		// MyCanvas.canvas.wrapperEl.style.zoom = zoom
+		MyCanvas.canvas.zoomToPoint(
+			{ // 关键点
+			x: opt.pointer.x,
+			y: opt.pointer.y
+			},
+			zoom
+		)
+		opt.e.preventDefault()
+		opt.e.stopPropagation()
+		this.setPencilWidth()
+	}
+	async addImage (imgData){
+		let img = await this.createImage(imgData)
+		let position = {
+			// left: 0,
+			// top:MyCanvas.canvas.wrapperEl.parentNode.scrollTop,
+			left: MyCanvas.canvas.width/2,
+			top: MyCanvas.canvas.height/2,
+			
+		}
+		img.set({
+			custom:{
+				type:'upImgFiles'
+			}
+		})
+		await this.createLayer({})
+		this.setCanvasImage(img,position,"upImgFiles",imgData)
+	}
+	createImage(imgData){
+		return new Promise((resolve, reject) => {
+			fabric.Image.fromURL(imgData.minioUrl,(img) => {
+				resolve(img)
+			},{ crossOrigin: "Anonymous" })
+		})
+	}
+	setImageWidth = (key,img)=>{
+		const CW = MyCanvas.canvas.width
+		const CH = MyCanvas.canvas.height
+		let WH = CW>CH?'H':'W'
+		let imgWidth; //这是设置画布等宽
+		if(WH == 'W'){
+			imgWidth = CW / 2;
+		}else{
+			let heightScale = (CH/2) / img.height
+			imgWidth = img.width * heightScale
+		}
+		// let sketchGrouping = 6
+		// if(key == 'upImgFiles'){
+		// 	imgWidth = imgWidth / 8;
+		// }else if (key == "printboardFiles") {
+		// 	imgWidth = imgWidth / 14;
+		// }else if (key == "sketchboardFiles"||key == 'moodboardFiles'||key == 'FinalizeImage') {
+		// 	imgWidth =
+		// 		(imgWidth -
+		// 			(sketchGrouping - 1) * 20) /
+		// 		sketchGrouping;
+		// }else if (key == "likeDesignCollectionList") {
+		// 	if(img){
+		// 		let imgObj = JSON.parse(JSON.stringify(img))
+		// 		let height = imgObj.height
+		// 		imgObj.height = imgWidth / 8 * 1.8
+		// 		let heightScale = imgObj.height / height
+		// 		imgWidth = imgObj.width * heightScale
+		// 	}
+		// }else {
+		// 	if(img){
+		// 		let imgObj = JSON.parse(JSON.stringify(img))
+		// 		if(imgObj.height > imgObj.width){
+		// 			let heightScale = (MyCanvas.canvas.height/2) / imgObj.height
+		// 			imgWidth = imgObj.width * heightScale
+		// 		}else{
+		// 			imgWidth /= 2
+		// 		}
+		// 	}
+		// }
+		return imgWidth
+	}
+	async setCanvasImage(img,position,key,data){
+		let minioUrl = ''//表示收藏或者generate
+		let imgUrl = data.imgUrl
+		if (key == "likeDesignCollectionList") {
+			imgUrl = data.designOutfitUrl;
+		}
+		let imgWidth = await this.setImageWidth(key,img); 
+		if(imgUrl?.split('?')){
+			let url = imgUrl.split('?')[0]
+			var match = url.match(/:(\d+)\/(.*)/);
+			minioUrl = match[2]
+		}
+		let proportion = img.height / img.width; //计算图形宽高比例
+		let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
+		let scale = {
+			X: imgWidth / img.width,
+			Y: (img.width * proportion * scaleWH) / img.height,
+		}
+		img.set({
+			left:position.left - img.width*scale.X/2,
+			top:position.top - img.height*scale.Y / 2,
+			minioUrl,
+			scaleX:scale.X,
+			scaleY:scale.Y,
+		});
+		MyCanvas.canvas.add(img)
+		this.updateCanvasState('')
+	}
+	setMove(){
+		MyCanvas.canvas.isDrawingMode = false
+		MyCanvas.canvas.forEachObject((obj) =>{
+			if(this.isSelectable(obj)){
+				obj.selectable = true
+			}else{
+				obj.selectable = false
+			}
+		});
+		MyCanvas.canvas.renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
+	}
+	async setTexture(){
+		MyCanvas.canvas.isDrawingMode = true//开启绘画模式
+		let img = await JSSetTexture(this.texture.list[this.texture.value].url)
+		let zoom = MyCanvas.canvas.getZoom() // 获取画布当前缩放值
+		let patternBrush = new fabric.PatternBrush(MyCanvas.canvas)  
+		patternBrush.source = img 
+		patternBrush.width = Number(this.brushwork.width[this.operation]) / zoom; // 设置画笔大小 
+		this.setPencilWidth()
+		MyCanvas.canvas.freeDrawingBrush = patternBrush 
+	}
+	setEraser(){
+		MyCanvas.canvas.isDrawingMode = true
+		let eraser = new fabric.EraserBrush(MyCanvas.canvas) 
+		MyCanvas.canvas.freeDrawingBrush = eraser
+		this.pencilbtnStyle.background = '#fff'
+		MyCanvas.canvas.freeDrawingBrush.isEraser = true
+		this.setPencilWidth()
+		MyCanvas.canvas.requestRenderAll();
+
+	}
+	hexToRgba(hex, alpha){
+		const r = parseInt(hex.slice(1, 3), 16);
+		const g = parseInt(hex.slice(3, 5), 16);
+		const b = parseInt(hex.slice(5, 7), 16);
+		return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+	}
+	pencilColor(){
+		if(this.createText?.set){
+			this.setFontFamily()
+			return
+		}
+		if(MyCanvas.canvas.freeDrawingBrush.isEraser){
+		}else{
+			this.pencilbtnStyle.background = this.brushwork.color
+		}
+		if(this.brushwork.value == 'Marking'){
+			MyCanvas.canvas.freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,.5);
+		}else if(this.brushwork.value == 'InkBrush'){
+			MyCanvas.canvas.freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,.2);
+		}else{
+			MyCanvas.canvas.freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,1);
+		}
+	}
+	setFontFamily=()=>{
+		if(this.createText.set){
+			this.createText.set({
+				fontFamily:this.fontFamily,
+				fontSize:this.brushwork.width[this.operation]?this.brushwork.width[this.operation]:20,
+				fill:this.brushwork.color,
+			})
+			MyCanvas.canvas.renderAll();
+		}
+	}
+	setPencilColor(){//切换颜色给铅笔设置颜色
+		clearTimeout(this.setTimeOut.color)
+		clearTimeout(this.setTimeOut.colorHistory)
+		this.setTimeOut.color = setTimeout(()=>{
+			this.pencilColor()
+		},200)
+		this.setTimeOut.colorHistory = setTimeout(()=>{
+			this.colorHistoryList.push(this.brushwork.color)
+		},1000)
+	}
+	setCanvasWH = (str)=>{
+		clearTimeout(this.setTimeOut.canvasWH)
+		this.setTimeOut.canvasWH = setTimeout(()=>{
+			MyCanvas.canvas.setWidth(this.canvasWH.width);
+			MyCanvas.canvas.setHeight(this.canvasWH.height);
+			// MyCanvas.canvas.width = this.canvasWH.width
+			// MyCanvas.canvas.height = this.canvasWH.height
+			this.initCanvasWH('updata')
+		},1000)
+	}
+	setColorHistory = (value)=>{
+		this.brushwork.color = value
+		this.pencilColor()
+	}
+	setPencilWidth(){//切换颜色给铅笔设置颜色
+		let zoom = MyCanvas.canvas.getZoom() // 获取画布当前缩放值
+		clearTimeout(this.setTimeOut.width)
+		this.setTimeOut.width = setTimeout(()=>{
+			if(!this.brushwork.width[this.operation])this.brushwork.width[this.operation]=20
+			// MyCanvas.canvas.freeDrawingBrush.width = Number(this.brushwork.width[this.operation]);
+			let arr = ['PencilBrush','Marking']
+			this.pencilbtnStyle.height = this.brushwork.width[this.operation]+'px'
+			this.pencilbtnStyle.width = this.brushwork.width[this.operation]+'px'
+			if(arr.indexOf(this.brushwork.value) > -1){
+				MyCanvas.canvas.freeDrawingBrush.width = Number(this.brushwork.width[this.operation]) / zoom;
+			}else{
+				MyCanvas.canvas.freeDrawingBrush.width = Number(this.brushwork.width[this.operation]);
+			}
+			if((this.brushwork.value == 'LongfurBrush' || this.brushwork.value == 'RibbonBrush') && this.operation == 'pencil'){
+				MyCanvas.canvas.freeDrawingBrush.width = 1;
+				this.pencilbtnStyle.height = 1+'px'
+				this.pencilbtnStyle.width = 1+'px'
+			}
+		},100)
+	}
+	//关闭u或者创建文字
+	setTextFun(e){
+		if(this.operation != 'text'){
+			return
+		}
+		MyCanvas.canvas.forEachObject((obj) =>{
+			if(obj.type == 'textbox' && !obj.text){
+				MyCanvas.canvas.remove(obj);
+			}
+		});
+		var clickedObject = e.target;
+		if (clickedObject instanceof fabric.Textbox) {
+			this.createText = clickedObject
+			this.setTextData(this.createText)
+		}else{
+		
+			var pointer = MyCanvas.canvas.getPointer(e.pointer);
+			var x = pointer.x;
+			var y = pointer.y;
+			this.createText = new fabric.Textbox('', {
+				left: x,
+				top: y,
+				width: 50,
+				fontSize: this.brushwork.width[this.operation]?this.brushwork.width[this.operation]:20,
+				fontFamily:this.fontFamily,
+				fill:this.canvasPencilColor,
+
+			})
+			MyCanvas.canvas.add(this.createText)
+			// this.layer.selectLayer.group.add(this.createText)
+			this.createText.enterEditing();
+			MyCanvas.canvas.setActiveObject(this.createText).renderAll();
+			this.removeSetText()
+		}
+	}
+	setText(){
+		MyCanvas.canvas.on('mouse:down',(event)=>{
+			if(this.operation == 'zoomIn' || this.operation == 'zoomOut'){
+			}else{
+				this.setTextFun(event)
+			}
+		})
+	}
+	removeSetText(){
+		MyCanvas.canvas.off('mouse:down',this.setTextFun.bind(this))
+	}
+	// async createBg(){//
+	// 	await new Promise((resolve, reject) => {
+	// 		let url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC'
+	// 		fabric.Image.fromURL(url, (backgroundImage)=>{
+	// 			backgroundImage.set({
+	// 			})
+	// 			const rect = new fabric.Rect({
+	// 				left: 0,
+	// 				top: 0,
+	// 				width: MyCanvas.canvas.width,
+	// 				height: MyCanvas.canvas.height,
+	// 				fill:'#FFF',
+	// 				// fill: new fabric.Pattern({
+	// 				// 	source: backgroundImage.getElement(), // 使用图像元素作为填充
+	// 				// 	repeat: 'repeat', // 设置为重复
+	// 				// 	patternTransform: [this.canvasWH.width/this.canvasDomParent.offsetWidth, 0, 0, this.canvasWH.width/this.canvasDomParent.offsetWidth, 0, 0]
+	// 				// }),
+	// 			});
+				
+	// 			const group = new fabric.Group([rect], {
+	// 				width: MyCanvas.canvas.width,
+	// 				height: MyCanvas.canvas.height,
+	// 				erasable:false,
+	// 				selectable:false,
+	// 			});
+	// 			group.custom.layerId = -1
+	// 			MyCanvas.canvas.add(group)
+	// 			MyCanvas.canvas.clipPath = rect
+	// 			resolve()
+	// 		});
+	// 	})
+	// }
+	createLayer(data){
+		let {str,id} = data
+		let canvasData = MyCanvas.canvas.toJSON(['selectable','minioUrl','custom']);
+		return new Promise(async (resolve, reject) => {
+			MyCanvas.canvas.discardActiveObject();
+			if(!id)id = new Date().getTime()
+			let index = this.layer.currentIndex += 1
+			const rect = new fabric.Rect({
+				left: -MyCanvas.canvas.width / 2,
+				top: -MyCanvas.canvas.height / 2,
+				// left:0,
+				// top:0,
+				width: MyCanvas.canvas.width,
+				height: MyCanvas.canvas.height,
+				strokeWidth:0,
+				fill:'#FFF',
+				custom:{
+					layerId:id,
+					isSelectable:true,
+				},
+				// erasable:false,
+				selectable:false,
+			});
+			rect.clone((cloned)=>{
+				rect.clipPath = cloned
+			})
+			const group = new fabric.Group([], {
+				width: MyCanvas.canvas.width,
+				height: MyCanvas.canvas.height,
+				left:0,
+				top:0,
+				selectable:false,
+				erasable:false,
+				subTargetCheck:true,
+				evented:false,
+				// originX:'left', 
+				// originY:'top',
+				custom:{
+					layerId:id,
+					type:'layer' ,
+					groupType:'Object',
+					layerIndex:index,
+					selectLayerIndex:(index) * 10000,
+				}
+			});
+			if(str == 'init'){
+				group.moveTo(group.custom.selectLayerIndex)
+				group.add(rect)
+				group.clone((cloned)=>{
+					cloned.set({left:0,top:0})
+					MyCanvas.canvas.clipPath = cloned
+				})
+			}
+			MyCanvas.canvas.add(group)
+			let img = group.toDataURL({
+				width: MyCanvas.canvas.width,
+				height: MyCanvas.canvas.height,
+			})
+			this.layer.list.unshift({
+				name:`Layer${index}`,
+				id,img,isShow:true,
+				groupType:'Object',
+				index,})
+			await this.selectLayer(id)
+			MyCanvas.canvas.renderAll();
+			this.updateCanvasState()
+			resolve(group)
+		})
+	}
+	layerAddElement(obj){
+		let group = this.layer.selectLayer.group
+		obj.left = obj.left - group.width/2
+		obj.top = obj.top - group.height/2
+		group.add(obj)
+		MyCanvas.canvas.remove(obj)
+		this.updataLayerImg(this.layer.selectLayer.id,group.toDataURL({
+			width: MyCanvas.canvas.width,
+			height: MyCanvas.canvas.height
+		}))
+	}
+	addLayer(options){
+		if(this.createPatterning.state)return
+		this.clipPath.clipGroup = MyCanvas.canvas.getObjects().filter(obj => obj.custom?.dashed)?.[0];
+		if (options.target.type === 'group' && options.target.custom?.layerId) return;
+		if(!options.target?.custom?.layerId){
+			if(options.target?.custom){
+				options.target.custom.layerId = this.layer.selectLayer.id
+			}else{
+				options.target.set({custom:{layerId : this.layer.selectLayer.id}})
+			}
+		}
+		//判断是否可以点击空白地方进行选中
+		if(options.target?.custom?.dashed){
+			options.target.set({perPixelTargetFind:false,erasable:false,hasBorders: false,hasControls: false})
+			// MyCanvas.canvas.setActiveObject(options.target);
+			MyCanvas.canvas.skipTargetFind = false
+			this.setOperation('movePosition')
+		}else if(options.target.type == 'textbox'){
+			options.target.set({perPixelTargetFind:false})
+		}else{
+			options.target.set({perPixelTargetFind:true})
+		}
+		//设置优先级
+		if(options.target?.custom?.isSelectable && (options.target?.type == 'rect')){
+			options.target.custom.selectLayerIndex = this.layer.selectLayer.group.custom.layerIndex * 10000
+		}else{
+			options.target.custom.selectLayerIndex = this.layer.selectLayer.group.custom.selectLayerIndex += 1
+			if(this.clipPath.clipGroup){
+				this.clipPath.clipGroup.custom.selectLayerIndex = this.layer.selectLayer.group.custom.selectLayerIndex + 1
+			}
+		}
+		if(options.target.isType('path'))options.target.selectable=false
+		let arr = MyCanvas.canvas.getObjects().sort((a, b) =>{
+			return a.custom.selectLayerIndex - b.custom.selectLayerIndex; 
+		  });
+		  arr.forEach((item,index)=>{
+			item.moveTo(index)
+		  })
+		
+		if(!options?.target?.custom?.dashed && this.layer.selectLayer.group.custom.groupType == 'Grid')this.setGroupGrid('all')
+		
+		MyCanvas.canvas.renderAll();
+
+		this.updataLayer()
+	}
+	upLayerIndex(list){
+		list.forEach((item,index)=>{
+			let arr = MyCanvas.canvas.getObjects().filter(obj => obj.custom.layerId == item.id)
+			arr.forEach((obj)=>{
+				if(obj.custom.type == 'layer')obj.custom.layerIndex = item.index
+				let selectLayerIndex = obj.custom.selectLayerIndex+''
+				selectLayerIndex = selectLayerIndex.replace(/^\d/, item.index);
+				obj.custom.selectLayerIndex = Number(selectLayerIndex)
+			})
+			// arrList.unshift(obj)
+		})
+		// this.layer.list = arrList
+		let arr = MyCanvas.canvas.getObjects().sort((a, b) =>{
+			return a.custom.selectLayerIndex - b.custom.selectLayerIndex; 
+		});
+		arr.forEach((item,index)=>item.moveTo(index))
+	}
+	updataLayer(){
+		clearTimeout(this.setTimeOut.updataLayer)
+		this.setTimeOut.updataLayer = setTimeout(async()=>{
+			let elements
+			elements = MyCanvas.canvas.getObjects().filter(obj => {
+				return this.isAddToLayer(obj)
+			});
+			const group = new fabric.Group([], {
+				width: this.layer.selectLayer.group.width,
+				height: this.layer.selectLayer.group.height,
+				erasable:false,
+				selectable:false,
+			});
+			for (let i = 0; i < elements.length; i++) {
+				await new Promise((resolve, reject) => {
+					let item = elements[i]
+					item.clone((clonedObj)=>{
+						this.setClone(item,clonedObj)
+						clonedObj.left = clonedObj.left - this.layer.selectLayer.group.width/2
+						clonedObj.top = clonedObj.top - this.layer.selectLayer.group.height/2
+						if(clonedObj.custom?.dashed){
+							let clipPath = clonedObj._objects.filter(item => item.type != 'image')[0]
+							clonedObj.remove(clipPath)
+						}
+						group.add(clonedObj)
+						resolve('')
+					})
+				})
+			}
+			this.updataLayerImg(this.layer.selectLayer.id,group.toDataURL({
+				width: this.layer.selectLayer.group.width,
+				height: this.layer.selectLayer.group.height
+				})
+			)
+		},500)
+	}
+	updataLayerImg(id,img){
+	    this.layer.list.forEach(v => {
+			if (v.id === id) {
+				v.img = img
+			}
+	    })
+	}
+	async layerDelete(index,id){
+		if(this.layer.list.length == 1)return
+		for (let i = index; i < this.layer.list.length; i++) {
+			this.layer.list[this.layer.list.length - i-1].index--
+		}
+		this.layer.list.splice(index,1)
+		if(id == this.layer.selectLayer.id){
+			MyCanvas.canvas.remove(this.layer.selectLayer.group)
+			MyCanvas.canvas.forEachObject((obj) =>{
+				if(obj.type != 'group' && obj.custom?.layerId == id){
+					MyCanvas.canvas.remove(obj)
+				}
+			});
+			this.layer.selectLayer.id = -1
+			this.selectLayer(this.layer.list[this.layer.list.length - 1].id)
+		}else{
+			let group = await this.lookingLayer(id,'setLayerIndex')
+			MyCanvas.canvas.remove(group)
+		}
+		this.updateCanvasState()
+	}
+	async selectLayer(id){
+		await new Promise(async (resolve, reject) => {
+			if(this.layer.selectLayer.id != -1){
+				await this.mergeGroup()
+			}
+			let group = await this.lookingLayer(id,'setRubber')
+			group.custom.selectLayerIndex = group.custom.layerIndex*10000
+			this.layer.selectLayer.group = group
+			this.layer.selectLayer.id = id
+			await this.expandGroup()
+			MyCanvas.canvas.renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
+			this.setOperation('movePosition')
+			resolve('')
+		})
+	}
+	async mergeGroup(){
+		const elements = MyCanvas.canvas.getObjects().filter(obj => this.isAddToLayer(obj));
+		let isClipPath = MyCanvas.canvas.getObjects().filter(obj => obj.custom.dashed);
+		if(isClipPath.length>0)await this.setGroupGrid('all')
+		let group = await this.lookingLayer(this.layer.selectLayer.id,'setlayerIndex')
+		group.set({visible:true})
+		for (let index = 0; index < elements.length; index++) {
+			const item = elements[index];
+			await new Promise((resolve, reject) => {
+				item.clone((v)=>{
+					this.setClone(item,v)
+					v.left = v.left - group.width/2
+					v.top = v.top - group.height/2
+					if(v.custom?.dashed){
+						// MyCanvas.canvas.remove(item)
+						// let img = v._objects.filter(item => item.type == 'image')[0]
+						// if(img){
+						// 	img.set({
+						// 		left:v.left,
+						// 		top:v.top,
+						// 		custom:{
+						// 			layerId:v.custom.layerId
+						// 		}
+						// 	})
+						// 	group.add(img)
+						// }
+					}else{
+						group.add(v)
+					}
+					resolve('')
+				})
+			})
+		}
+		elements.forEach(v => MyCanvas.canvas.remove(v))
+	}
+	async expandGroup(){
+		const elements = this.layer.selectLayer.group._objects.filter(obj => this.isAddToLayer(obj));
+		// fabric.util.enlivenObjects(elements, (clonedObjects) => {
+		this.layer.selectLayer.group.set({visible:false})
+		for (let index = 0; index < elements.length; index++) {
+			const item = elements[index];
+			await new Promise((resolve, reject) => {
+				item.clone((v)=>{
+					this.setClone(item,v)
+					v.left = v.left + this.layer.selectLayer.group.width/2
+					v.top = v.top + this.layer.selectLayer.group.height/2
+					if(v.custom?.dashed){
+						// this.layer.selectLayer.group._objects.remove(item)
+						// let img = v._objects.filter(item => item.type == 'image')[0]
+						// if(img){
+						// 	img.set({
+						// 		left:v.left,
+						// 		top:v.top,
+						// 		custom:{
+						// 			layerId:v.custom.layerId
+						// 		}
+						// 	})
+						// 	MyCanvas.canvas.add(img)
+						// }
+					}else{
+						MyCanvas.canvas.add(v)
+					}
+					if(index == elements.length - 1){
+						elements.forEach(v => this.layer.selectLayer.group.remove(v))
+					}
+					resolve()
+				})
+			})
+		}
+	}
+	lookingLayer(id,str){
+		return new Promise((resolve, reject) => {
+			const groups = MyCanvas.canvas.getObjects()
+			let group = null
+			groups.forEach(v => {
+				if(str && v?.custom?.type === 'layer' && (str == 'setlayerIndex' || str == 'setRubber')){
+					let layerIndex = v?.custom?.layerIndex * 10000
+					v.moveTo(layerIndex)
+				}
+				if(v?.custom?.layerId == id){
+					if(str && str == 'setRubber'){
+						v.set({erasable:'deep'})
+					}
+					
+				}else if(v?.custom?.type === 'layer'){
+					v.set({erasable:false})
+				}
+				if (v?.custom?.layerId === id && v?.custom?.type === 'layer') {
+					group = v
+				}
+			})
+			resolve(group)
+		})
+		
+	}
 	canvasKeyUp(event){
-		this.keyDown = this.keyDown.filter(function(item) {
+		this.keyDown = this.keyDown.filter((item) => {
+			if(item.code !== 'AltLeft'){
+				if(this.oldOperation)this.setOperation(this.oldOperation)
+			}
 			return event.code !== item;
 		})
 	}
+	async layerShowHide(id,item){
+		// console.log(id);
+
+		item.isShow = !item.isShow
+		MyCanvas.canvas.forEachObject((obj)=>{
+			if(obj.custom.layerId == id)obj.visible = item.isShow
+		})
+		MyCanvas.canvas.renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
+
+	}
 	canvasKeyDown(event){
 		if(this.keyDown.indexOf(event.key)>-1){
 		}else{
 			this.keyDown.push(event.code)
-			if(event.key === 'Enter' && operation.value == 'fold'){
-				foldEnd('Enter')
+			if(event.key === 'Enter' && this.operation == 'fold'){
+				this.foldEnd('Enter')
 			}else if(event.key === 'Delete'){
-				deleteObject()
+				this.deleteObject()
 			}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyZ') > -1 && this.keyDown.indexOf('ShiftLeft') > -1){
 				this.historyState('reverse')
 			}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyZ') > -1){
@@ -131,88 +1765,159 @@ class myCanvas {
 				this.copy()
 			}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyV') > -1){
 				this.paste()
+			}else if(this.keyDown.indexOf('AltLeft') > -1 && this.keyDown.length == 1 && this.operation != 'move'){
+				this.oldOperation = this.operation
+				this.setOperation('move')
 			}
 		}
 	}
 	canvasClear(){
-		let oldCanvasDom = this.canvasDomParent.querySelector('.canvas-container')
-		let oldCanvasDom1 =  this.canvasDomParent.querySelector('canvas')
+		if(MyCanvas.canvas?.dispose)MyCanvas.canvas.dispose()
+		let oldCanvasDom = this.canvasDomParent?.querySelector('.canvas-container')
+		let oldCanvasDom1 =  this.canvasDomParent?.querySelector('canvas')
 		if(oldCanvasDom)oldCanvasDom.remove()
 		if(oldCanvasDom1)oldCanvasDom1.remove()
 		this.reverseCanvasState=[];//撤回
 		this.normalCanvasState=[];//反撤回
+		MyCanvas.canvas = null
+		this.canvas = null
+		this.layer = {
+			list:[],
+			selectLayer:{
+				group:null,
+				id:-1,
+			},
+			currentIndex: 0,
+		}
+		this.mouse = {
+			point:null,
+			upPoint:null,
+			isMovePostion:false,
+			lastPosX:0,
+			lastPosY:0,
+		}
+		this.brushwork = {
+			value:'PencilBrush',
+			width:{},
+			color:'#000000',
+			texture:0,
+		}
+		this.operation = 'movePosition'
 		document.removeEventListener("keydown", this.canvasKeyDown);
 		document.removeEventListener("keyup", this.canvasKeyUp);
+		document.removeEventListener('mousemove', this.mouseMove);
+		document.removeEventListener('touchmove', this.touchmove);
 	
 	}
 	//删除选中元素
-	deleteObject = ()=> {
-		if(!this.canvas.getActiveObjects()){
+	deleteObject(){
+		if(!MyCanvas.canvas.getActiveObjects()){
 			return
 		}
-		let target = this.canvas.getActiveObjects()
+		let target = MyCanvas.canvas.getActiveObjects()
 		target.forEach((item)=>{
-			this.canvas.fxRemove(item, {
+			MyCanvas.canvas.fxRemove(item, {
 				onComplete:()=>{
-					this.canvas.discardActiveObject(); // 丢弃当前选中的对象
-					this.canvas.renderAll(); // 重新渲染 Canvas
+					MyCanvas.canvas.discardActiveObject(); // 丢弃当前选中的对象
+					MyCanvas.canvas.renderAll(); // 重新渲染 Canvas
 				}
 			})
-			this.canvas.FX_DURATION = 300
+			MyCanvas.canvas.FX_DURATION = 200
+			// MyCanvas.canvas.remove(item)
 		})
+		this.updataLayer()
 		this.updateCanvasState('remove')
 	}
+	async getDashedImg(cloned){
+		let position = {
+			left:cloned?.left,
+			top:cloned?.top,
+			width:cloned?.width + cloned?.strokeWidth*2,
+			height:cloned?.height + cloned?.strokeWidth*2,
+		}
+		let elements = MyCanvas.canvas.getObjects().filter(obj => this.isAddToLayer(obj));
+		let imgData = await this.groupToImg(elements,position,'clipPath')//矩形裁剪图片
+		let img = await this.createImage({minioUrl:imgData})
+		img.set({
+			left:position.left,
+			top:position.top,
+		})
+		return img
+	}
 	//复制粘贴
-	copy(canvas){
-		var activeObject = this.canvas.getActiveObject();
+	async copy(canvas){
+		var activeObject = MyCanvas.canvas.getActiveObject();
 		if(!activeObject){
 			return
 		}
-		activeObject.clone((cloned)=>{
-			this._clipboard = cloned;
+		let copyObj = null
+		await new Promise((resolve, reject) => {
+			activeObject.clone(async (cloned)=>{
+				this.setClone(activeObject,cloned)
+				if(cloned.custom.dashed){
+					copyObj = await this.getDashedImg(cloned)
+				}else{
+					copyObj = cloned
+				}
+				resolve()
+			})
 		})
+		
+		this._clipboard = copyObj;
 	}
-	paste = () => {//粘贴
+	async paste(){//粘贴
 		if(!this._clipboard){
 			return
 		}
+		await this.createLayer({})
 		this._clipboard.clone(clonedObj => {
-			this.canvas.discardActiveObject() // 取消选择
-
-			// 设置新内容的坐标位置
+			// this.setClone(this._clipboard,clonedObj)
+			MyCanvas.canvas.discardActiveObject() // 取消选择
 			clonedObj.set({
-					left: clonedObj.left + 10,
-					top: clonedObj.top + 10,
-					evented: true
+				left: clonedObj.left,
+				top: clonedObj.top,
+				selectable: true
+			})
+			if (clonedObj.type === 'activeSelection') {
+				// 活动选择需要一个对画布的引用
+				clonedObj.forEachObject((obj)=>{
+					MyCanvas.canvas.add(obj)
 				})
 
-			if (clonedObj.type === 'activeSelection') {
-					// 活动选择需要一个对画布的引用
-					clonedObj.canvas = canvas;
-					clonedObj.forEachObject((obj)=>{
-						this.canvas.add(obj)
-					})
-
-					clonedObj.setCoords()
-				} else {
-					this.canvas.add(clonedObj)
-				}
-				this._clipboard.top += 10
-				this._clipboard.left += 10
-				this.canvas.setActiveObject(clonedObj)
-				this.canvas.requestRenderAll()
+				clonedObj.setCoords()
+			} else {
+				MyCanvas.canvas.add(clonedObj)
+				// this.layer.selectLayer.group.add(clonedObj)
+			}
+			MyCanvas.canvas.setActiveObject(clonedObj)
+			MyCanvas.canvas.requestRenderAll()
 		})
+		this._clipboard = null
 		this.updateCanvasState()
 	}
-
+	isSelectable(obj){//判断元素是否允许选中
+		return (obj.custom?.type != 'layer' && (!obj.custom?.isSelectable || this.layer.selectLayer.group.custom.groupType == 'Grid') && !obj.isType('path'))
+		//isSelectable已废弃，现在isSelectable作为判断是否是背景来使用
+		return (obj.custom?.type != 'layer' && !obj.isType('path'))
+	}
+	isAddToLayer(obj){//判断元素是否允许添加
+		return(obj.custom?.type != 'layer' && obj.custom?.layerId == this.layer.selectLayer.id)
+	}
 	//撤回反撤回
 	//设置画布监听修改添加事件，用来做撤回功能
 	updateCanvasState(str){
-		const canvasAsJson = JSON.stringify(this.canvas.toJSON());
+		let canvasData = MyCanvas.canvas.toJSON(['custom','selectable','minioUrl']);
+		if(canvasData.clipPath){
+			canvasData.clipPath.left = 0
+			canvasData.clipPath.top = 0
+		}
+		let canvasAsJson = JSON.stringify(canvasData)
+		let layerList = JSON.stringify(this.layer.list)
+		let layerId = this.layer.selectLayer.id
 		if(str == 'loadingCompleted'){
 			// this.reverseCanvasState.push(canvasAsJson);
 		}
-		this.normalCanvasState.push(canvasAsJson);
+		this.normalCanvasState.push({canvasAsJson,layerList,layerId});
 		if (this.isLoadCanvas) {
 			this.reverseCanvasState = []
 			this.isLoadCanvas = false;
@@ -220,22 +1925,85 @@ class myCanvas {
 		}
 	}
 	//撤回
-	historyState(str){
+	async historyState(str){
 		if(str == 'reverse' && this.reverseCanvasState.length > 0){//反撤回
 			let obj = this.reverseCanvasState.pop()
-			// this.canvasState = this.reverseCanvasState[this.reverseCanvasState.length-1]
-			this.canvasState = obj 
+			let layerList = JSON.parse(obj.layerList)
+			this.layer.list = layerList
+			this.layer.selectLayer.id = obj.layerId
+			this.canvasState = obj.canvasAsJson
 			this.normalCanvasState.push(obj);
 		}else if(str == '' && this.normalCanvasState.length > 1){
 			let obj = this.normalCanvasState.pop()
-			this.canvasState = this.normalCanvasState[this.normalCanvasState.length-1]
+			let select = this.normalCanvasState[this.normalCanvasState.length-1]
+			this.canvasState = select.canvasAsJson
+			this.layer.list = JSON.parse(select.layerList)
+			this.layer.selectLayer.id = select.layerId
 			this.reverseCanvasState.push(obj);
 			this.isLoadCanvas = true;
 		}else{
 			return
 		}
-		this.canvas.loadFromJSON(this.canvasState, () => {});
+		MyCanvas.canvas.loadFromJSON(this.canvasState, () => {});
+		MyCanvas.canvas.setBackgroundColor({
+			source:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC',
+			repeat: 'repeat',
+			},MyCanvas.canvas.renderAll.bind(MyCanvas.canvas),
+		)
+	}
+	temporarilyExport(data){
+		let scaleXY = {
+			scaleX:data?.scaleX?data?.scaleX:1,
+			scaleY:data?.scaleY?data?.scaleY:1,
+		}
+		let width = data?.width || MyCanvas.canvas.width
+		let height = data?.height || MyCanvas.canvas.height
+		var canvasDom = document.createElement("canvas");
+		let exportCanvas = new fabric.Canvas(canvasDom, {
+			width:width*scaleXY.scaleX,
+			height:height*scaleXY.scaleY,
+			scaleX:scaleXY.scaleX,
+			scaleY:scaleXY.scaleY,
+			isDrawingMode: false, // 开启绘图模式
+		});
+		return exportCanvas
+	}
+	closeTemporarilyExport(temporar){
+		if(temporar){
+			temporar.wrapperEl.remove()
+			temporar.dispose()
+		}
+	}
+	setClone(obj,goal){
+		if(obj.custom){
+			goal.set({custom:JSON.parse(JSON.stringify(obj.custom))})
+		}
+		goal.perPixelTargetFind = obj.perPixelTargetFind
+		goal.hasBorders = obj.hasBorders
+		goal.hasControls = obj.hasControls
+		goal.selectable = obj.selectable
+		goal.erasable = obj.erasable
+		if(obj.minioUrl)goal.minioUrl = obj.minioUrl
+	}
+	//导出
+	selectExport(){
+		let layer = this.layer.list.filter(item=>item.id == this.layer.selectLayer.id)[0]
+		return layer.img
+	}
+	allExport(){
+		let exportCanvas = this.temporarilyExport()
+		MyCanvas.canvas.forEachObject((obj) =>{
+			if(obj.custom?.layerId != -1){
+				obj.clone((cloned)=>{
+					this.setClone(obj,cloned)
+					exportCanvas.add(cloned)
+				})
+
+			}
+		});
+		let data = exportCanvas.toDataURL("image/png");
+		this.closeTemporarilyExport(exportCanvas)
+		return data
 	}
 }
-
-export default new myCanvas()
\ No newline at end of file
+export default new MyCanvas()
\ No newline at end of file
diff --git a/src/views/HomeView/HomeView.vue b/src/views/HomeView/HomeView.vue
index beeee67c..a6ff662b 100644
--- a/src/views/HomeView/HomeView.vue
+++ b/src/views/HomeView/HomeView.vue
@@ -218,8 +218,9 @@
 		<!-- design collection的进度蒙层  end-->
 		<affiche ref="affiche"></affiche>
 		<!-- <RobotAssist></RobotAssist> -->
-	</div>
+	<tesst></tesst>
 
+	</div>
 </template>
 
 <script lang="ts">
@@ -227,6 +228,7 @@ import { defineComponent, h, ref, computed ,inject,provide,nextTick,createVNode}
 // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 // import HeaderComponent from "@/component/HomePage/Header.vue";
 import CollectionModal from "@/component/HomePage/collectionModal.vue";
+import tesst from "@/component/Canvas/test.vue";
 import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
 import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
 import productImg from "@/component/HomePage/productImg.vue";
@@ -251,6 +253,7 @@ const FileSaver = require("file-saver");
 export default defineComponent({
 	components: {
 		// HeaderComponent,
+		tesst,
 		CollectionModal,
 		NewCollectionReview,
 		DesignDetail,
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index bde9a7b3..c8dd6332 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -7,153 +7,169 @@
             />
             <!-- 账号密码和邮箱登录  start-->
             <div class="login_content" v-if="isLogin === 1">
-				<div class="login_content_left">
-					<div class="login_type_list">
-						<div
-							:class="[
-								'login_type_item','username_login_item',
-								'login_active',
-							]"
-						>
-							Log on to AiDA 3.1
-						</div>
-					</div>
-					<!-- 账号密码登录 start -->
-					<!-- v-show="loginType == 'username'" -->
-					<div >
-						<div class="login_form_content" :state="emailStap">
-								<div class="login_form_title">Name</div>
-							<input
-								class="login_form_input"
-								placeholder="Enter your username"
-								v-model="username"
-							/>
-							
-							<div class="login_form_title marign_top30">
-								<div>Password</div>
-								<!-- <div class="tip_content" @click="changeIsLogin(2)">
+                <div class="login_content_left">
+                    <div class="login_type_list">
+                        <div
+                            :class="[
+                                'login_type_item',
+                                'username_login_item',
+                                'login_active',
+                            ]"
+                        >
+                            Log on to AiDA 3.1
+                        </div>
+                    </div>
+                    <!-- 账号密码登录 start -->
+                    <!-- v-show="loginType == 'username'" -->
+                    <div>
+                        <div class="login_form_content" :state="emailStap">
+                            <div class="login_form_title">Name</div>
+                            <input
+                                class="login_form_input"
+                                placeholder="Enter your username"
+                                v-model="username"
+                            />
+
+                            <div class="login_form_title marign_top30">
+                                <div>Password</div>
+                                <!-- <div class="tip_content" @click="changeIsLogin(2)">
 									Forgot password？
 								</div> -->
-							</div>
-							<div class="password_input_block">
-								<input
-									class="login_form_input"
-									:type="passwordType"
-									placeholder="Enter your password"
-									v-model="password"
-									@keydown.enter="submitPerLogin()"
-								/>
-								<div class="icon iconfont icon-yanjing_yincang_o password_show_icon" @click="changePasswordType()"></div>
-							</div>
-							<div class="login_form_title marign_top30">Email</div>
-							<input
-								class="login_form_input"
-								placeholder="Enter your email address"
-								v-model="email"
-								@keydown.enter="submitPerLogin()"
-							/>
+                            </div>
+                            <div class="password_input_block">
+                                <input
+                                    class="login_form_input"
+                                    :type="passwordType"
+                                    placeholder="Enter your password"
+                                    v-model="password"
+                                    @keydown.enter="submitPerLogin()"
+                                />
+                                <div
+                                    class="icon iconfont icon-yanjing_yincang_o password_show_icon"
+                                    @click="changePasswordType()"
+                                ></div>
+                            </div>
+                            <div class="login_form_title marign_top30">
+                                Email
+                            </div>
+                            <input
+                                class="login_form_input"
+                                placeholder="Enter your email address"
+                                v-model="email"
+                                @keydown.enter="submitPerLogin()"
+                            />
 
-						<!-- 邮箱登录 start -->
-							<div class="login_form_email" :class="{active:emailStap===2}">
-					<!-- <div v-show="loginType == 'email'" class="login_form_email"> -->
-						<!-- <div v-show="emailStap === 1" class="forget_password_content">
-							<div class="forget_password_content_block" @click="changeLoginType('username')">
-								<span class="icon iconfont fi-br-arrow-left"></span
-								><span class="forget_password_content_title"
-									>Log on to AiDA</span
-								>
-							</div>
-							<div class="login_form_content">
-								<div class="login_form_title">Email</div>
-								<input
-									class="login_form_input"
-									placeholder="Enter your email address"
-									v-model="email"
-									@keydown.enter="emailNextStepFun()"
-								/>
-							</div>
-							<div
-								class="login_submit_button marign_top40"
-								@click="emailNextStepFun()"
-							>
-								Sign In
-							</div>
-						</div> -->
+                            <!-- 邮箱登录 start -->
+                            <div
+                                class="login_form_email"
+                                :class="{ active: emailStap === 2 }"
+                            >
+                                <div
+                                    v-show="emailStap === 2"
+                                    class="email_last_step"
+                                >
+                                    <div class="email_last_step_block">
+                                        <span class="email_last_step_content"
+                                            >Verify with one-time verification
+                                            code</span
+                                        >
+                                        <i
+                                            class="fi fi-br-cross email_last_step_block_icon"
+                                            @click="emailLastStepFun()"
+                                        ></i>
+                                    </div>
+                                    <div class="email_last_step_bottom">
+                                        <div class="email_last_step_des">
+                                            <div class="sent_email_content">
+                                                Sent to {{ email }}
+                                            </div>
+                                            <div class="tip_content">
+                                                <span v-show="time"
+                                                    >{{ time }}s</span
+                                                >
+                                                <span
+                                                    v-show="!time"
+                                                    @click="emailNextStepFun()"
+                                                    >Resend</span
+                                                >
+                                            </div>
+                                        </div>
+                                        <VerificationCodeInput
+                                            :ct="emailCode"
+                                            @sendCaptcha="
+                                                submitEmailLogin($event)
+                                            "
+                                        ></VerificationCodeInput>
 
-						<div v-show="emailStap === 2"  class="email_last_step">
-							
-							<div class="email_last_step_block" >
-								<span class="email_last_step_content"
-									>Verify with one-time verification code</span
-								>
-								<i class="fi fi-br-cross email_last_step_block_icon" @click="emailLastStepFun()"></i>
-							</div>
-							<div class="email_last_step_bottom">
-								<div class="email_last_step_des">
-								<div class="sent_email_content">
-									Sent to {{ email }}
-								</div>
-								<div class="tip_content">
-									<span v-show="time">{{ time }}s</span>
-									<span v-show="!time" @click="emailNextStepFun()"
-										>Resend</span
-									>
-								</div>
-							</div>
-							<VerificationCodeInput
-								:ct="emailCode"
-								@sendCaptcha="submitEmailLogin($event)"
-							></VerificationCodeInput>
+                                        <div class="email_last_step_des">
+                                            <div
+                                                class="sent_email_content email_tip_content"
+                                            >
+                                                Please check the junk box if you
+                                                haven't received verification
+                                                code
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
 
-							<div class="email_last_step_des">
-								<div class="sent_email_content email_tip_content">
-								Please check the junk box if you haven't received verification code
-								</div>
-							</div>
-							</div>
-						</div>
-					</div>
+                        <div class="login_form_title marign_top30">
+                            <label :class="{ active: emailStap == 2 }">
+                                <input
+                                    :state="emailStap"
+                                    type="checkbox"
+                                    v-model="checked"
+                                />
+                                <span
+                                    >I agree to all Term, Privacy Policy and
+                                    Fees</span
+                                >
+                            </label>
+                        </div>
+						<div class="thirdPartyLogin marign_top30">
+							<googleLogin></googleLogin>
 						</div>
+                        <div
+                            class="login_submit_button marign_top40"
+                            :state="emailStap"
+                            @click="submitPerLogin()"
+                        >
+                            Sign in
+                        </div>
 
-						<div  class="login_form_title marign_top30">
-							<label :class="{active:emailStap == 2}">
-								<input :state="emailStap" type="checkbox" v-model="checked">
-								<span>I agree to all Term, Privacy Policy and Fees</span>
-							</label>
-						</div>
-						
-						<div
-							class="login_submit_button marign_top40" :state="emailStap"
-							@click="submitPerLogin()"
-						>
-						Sign in
-						</div>
-						
-						<div class="login_text"  >
-							<div class="forget_password_text" @click="changeIsLogin(2)">Forgot your password</div>
-						</div>
+                        <div class="login_text">
+                            <div
+                                class="forget_password_text"
+                                @click="changeIsLogin(2)"
+                            >
+                                Forgot your password
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 账号密码登录 end -->
+                </div>
 
-					</div>
-					<!-- 账号密码登录 end -->
-					
-				</div>
-                
                 <!-- 邮箱登录 end -->
-				<div class="login_content_right mdhidden">
-					<img
-						src="@/assets/images/loginPage/aida_logo_centent.jpg"
-					/>
-					<!-- <img src="https://www.aida.com.hk/download/aida_V2_images/image/login-right-image.jpg" alt=""> -->
-				</div>
+                <div class="login_content_right mdhidden">
+                    <img
+                        src="@/assets/images/loginPage/aida_logo_centent.jpg"
+                    />
+                    <!-- <img src="https://www.aida.com.hk/download/aida_V2_images/image/login-right-image.jpg" alt=""> -->
+                </div>
             </div>
 
             <!-- 忘记密码 start -->
             <div class="forget_password_content" v-else>
-                <div class="forget_password_content_block" @click="forgetPasswordLastStepFun()">
+                <div
+                    class="forget_password_content_block"
+                    @click="forgetPasswordLastStepFun()"
+                >
                     <!-- <span class="icon iconfont fi-br-arrow-left"></span
                     > -->
-					<i class="fi fi-br-arrow-left"></i>
-					<span class="forget_password_content_title"
+                    <i class="fi fi-br-arrow-left"></i>
+                    <span class="forget_password_content_title"
                         >Retrieve password</span
                     >
                 </div>
@@ -215,48 +231,70 @@
                 </div>
             </div>
             <!-- 忘记密码 end -->
-           
         </div>
 
         <div class="login_footer">
-            <div class="login_footer_item"><div class="login_footer_item_text">©2024 Code-Create Limited</div></div>
             <div class="login_footer_item">
-                <div class="login_footer_item_text footer_item_text_pointer" @click="turnToWindow('https://code-create.com.hk/aida-terms-and-conditions/')">Terms&Conditions</div>
+                <div class="login_footer_item_text">
+                    ©2024 Code-Create Limited
+                </div>
+            </div>
+            <div class="login_footer_item">
+                <div
+                    class="login_footer_item_text footer_item_text_pointer"
+                    @click="
+                        turnToWindow(
+                            'https://code-create.com.hk/aida-terms-and-conditions/'
+                        )
+                    "
+                >
+                    Terms&Conditions
+                </div>
                 <div class="login_footer_line"></div>
-                <div class="login_footer_item_text footer_item_text_pointer" @click="turnToWindow('https://code-create.com.hk/aida-subscription-agreement/')">Privacy Policy</div>
+                <div
+                    class="login_footer_item_text footer_item_text_pointer"
+                    @click="
+                        turnToWindow(
+                            'https://code-create.com.hk/aida-subscription-agreement/'
+                        )
+                    "
+                >
+                    Privacy Policy
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent,ref ,onMounted} from "vue";
+import { defineComponent, ref, onMounted } from "vue";
 import { Https } from "@/tool/https";
 import { isEmail } from "@/tool/util";
-import { setCookie ,WriteCookie } from "@/tool/cookie";
+import { setCookie, WriteCookie } from "@/tool/cookie";
 import { message } from "ant-design-vue";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
+import googleLogin from "@/component/LoginPage/googleLogin.vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { setLang } from "@/tool/guide";
 const md5 = require("md5");
 export default defineComponent({
     components: {
-        VerificationCodeInput,
+        VerificationCodeInput,googleLogin
     },
-    setup(){
-        let timer:any =  0;
-		const {locale} = useI18n()
-		const store = useStore();
-        return{
-			store,
+    setup() {
+        let timer: any = 0;
+        const { locale } = useI18n();
+        const store = useStore();
+        return {
+            store,
             timer,
-			locale
-        }
+            locale,
+        };
     },
     data() {
         return {
-			checked:false,
+            checked: false,
             isLogin: 1, //是否为登录 1-登录， 2-忘记密码
             loginType: "username",
             emailStap: 1, // 邮箱登录步骤
@@ -272,9 +310,9 @@ export default defineComponent({
             newPassword: "", //新密码
             isCheckRobot: false,
             time: 60, //60秒倒计时
-            passwordType:'password',
-            userId:'',
-			loginTime:true
+            passwordType: "password",
+            userId: "",
+            loginTime: true,
         };
     },
     methods: {
@@ -313,7 +351,7 @@ export default defineComponent({
                     if (rv) {
                         this.emailStap = 2;
                         this.time = 60;
-                        this.emailCode = ["", "", "", "", "", ""]
+                        this.emailCode = ["", "", "", "", "", ""];
                         this.createTimer();
                     }
                 }
@@ -323,12 +361,11 @@ export default defineComponent({
         //邮箱登录的上一步
         emailLastStepFun() {
             this.emailStap = 1;
-			this.username = "",
-            this.password = "",
-            this.email = "";
-			this.checked=false,
-			this.loginType = "username",
-            (this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
+            (this.username = ""), (this.password = ""), (this.email = "");
+            (this.checked = false),
+                (this.loginType = "username"),
+                (this.emailCode = ["", "", "", "", "", ""]),
+                this.clearTimer();
         },
 
         //忘记密码的下一步
@@ -365,23 +402,22 @@ export default defineComponent({
 
         //忘记密码填写完邮箱验证码进行下一步
         submitPasswordCode(emailVerifyCode: any) {
-			// console.log(123123);
-			let data = {
+            // console.log(123123);
+            let data = {
                 email: this.forgetPasswordEmail,
                 emailVerifyCode: emailVerifyCode,
-                password: '',
-				verifyEmail:true,
+                password: "",
+                verifyEmail: true,
             };
             Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
                 (rv: any) => {
                     if (rv) {
                         this.forgetEmailValue = emailVerifyCode;
-						this.frogetPasswordStep = 3;
-						this.clearTimer();
+                        this.frogetPasswordStep = 3;
+                        this.clearTimer();
                     }
                 }
             );
-            
         },
 
         //改变勾选是否是机器人
@@ -391,66 +427,70 @@ export default defineComponent({
 
         //提交账号密码预先登录
         submitPerLogin() {
-			//输入账号密码
-			if(this.emailStap>=2){
-				return;
-			}else{
-				if (!this.username || !this.password) {
-					message.info("Please enter your account number or password");
-					return;
-				}
-				//输入邮箱
-				if (!this.email) {
-					message.info("Please enter your email address");
-					return;
-				}
-				//判断邮箱格式是否正确
-				if (!isEmail(this.email)) {
-					message.info("The email format is incorrect");
-					return;
-				}
-				//判断是否同意隐私政策
-				if (!this.checked) {
-					message.info("Agree to all terms, privacy fees and policies");
-					return;
-				}
-				let data = {
-					password: md5(this.password + "abc"),
-					userName: this.username,
-					email: this.email,
-					operationType:"LOGIN",
-					ip:"",
-				};
-				// this.loginType = 'email'
-				if(this.loginTime){
-					this.loginTime = false
-					Https.axiosPost(Https.httpUrls.preLogin, data).then(
-					(rv: any) => {
-						// if (rv) {
-						//     this.loginType = 'email'
-						// }
-						this.emailStap = 2;
-						if (rv) {
-							this.userId = rv.userId
-							this.loginType = 'email'
-							this.time = 60;
-							this.emailCode = ["", "", "", "", "", ""]
-							this.createTimer();
-						}
-					}
-					).catch(res=>{
-						this.emailStap = 1;
-					});
-					setTimeout(() => {
-						this.loginTime = true
-					}, 2000);
-				}
-		
-			}
+            //输入账号密码
+            if (this.emailStap >= 2) {
+                return;
+            } else {
+                if (!this.username || !this.password) {
+                    message.info(
+                        "Please enter your account number or password"
+                    );
+                    return;
+                }
+                //输入邮箱
+                if (!this.email) {
+                    message.info("Please enter your email address");
+                    return;
+                }
+                //判断邮箱格式是否正确
+                if (!isEmail(this.email)) {
+                    message.info("The email format is incorrect");
+                    return;
+                }
+                //判断是否同意隐私政策
+                if (!this.checked) {
+                    message.info(
+                        "Agree to all terms, privacy fees and policies"
+                    );
+                    return;
+                }
+                let data = {
+                    password: md5(this.password + "abc"),
+                    userName: this.username,
+                    email: this.email,
+                    operationType: "LOGIN",
+                    ip: "",
+                };
+                // this.loginType = 'email'
+                if (this.loginTime) {
+                    this.loginTime = false;
+                    Https.axiosPost(Https.httpUrls.preLogin, data)
+                        .then((rv: any) => {
+                            // if (rv) {
+                            //     this.loginType = 'email'
+                            // }
+                            this.emailStap = 2;
+                            if (rv) {
+                                this.userId = rv.userId;
+                                this.loginType = "email";
+                                this.time = 60;
+                                this.emailCode = ["", "", "", "", "", ""];
+                                this.createTimer();
+                            }
+                        })
+                        .catch((res) => {
+                            this.emailStap = 1;
+                        });
+                    setTimeout(() => {
+                        this.loginTime = true;
+                    }, 2000);
+                }
+            }
         },
 
-        changePasswordType(){
-            this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
+        changePasswordType() {
+            this.passwordType =
+                this.passwordType === "password" ? "text" : "password";
         },
 
         //邮箱登录提交
@@ -459,50 +499,56 @@ export default defineComponent({
                 email: this.email,
                 emailVerifyCode: emailVerifyCode,
                 loginType: "EMAIL",
-                userId:this.userId
+                userId: this.userId,
             };
-            Https.axiosPost(Https.httpUrls.accountLogin, data).then(
-                (rv: any) => {
+            Https.axiosPost(Https.httpUrls.accountLogin, data)
+                .then((rv: any) => {
                     if (rv) {
-						if(rv.systemUser == 4){
-							rv.systemUser = 1
-						}
+                        if (rv.systemUser == 4) {
+                            rv.systemUser = 1;
+                        }
                         this.createTimer();
-						let isTest = rv.systemUser == 3?true:false
-						let isBeginner = rv.isBeginner == 1?true:false
+                        let isTest = rv.systemUser == 3 ? true : false;
+                        let isBeginner = rv.isBeginner == 1 ? true : false;
                         let token = rv.token;
                         setCookie("isMurmur", false);
                         setCookie("token", token);
                         setCookie("isTest", isTest);
                         setCookie("isBeginner", isBeginner);
-                        setCookie("isBeginnerNum", 0);//从第一步开始，机器人开始的话就是从第二部开始
+                        setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
                         setCookie("userInfo", JSON.stringify(rv));
-						this.store.commit("setSystemUser", rv.systemUser)
-						let obj:any = {
-							avatar : rv.avatar,
-							followeeCount : rv.followeeCount,
-							followerCount : rv.followerCount,
-						}
-						
-						this.store.commit("setUserInfo", obj)
-						if(rv.systemUser == 0){
-							this.turnToHomePage('/Square');
-						}else{
-							if(window.innerWidth < 768){
-								message.info("If you need to design, please log in using an iPad or computer.");
-								this.turnToHomePage('/Square');
-							}else{
-								this.turnToHomePage('/home');
-							}
-						}
-						sessionStorage.setItem('isTimeOne', JSON.stringify(false));//是否需要公告 提示 弹窗
-						let randomNum:any = Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
-						sessionStorage.setItem('sessionId', randomNum);  
-						sessionStorage.setItem('record', JSON.stringify([]))
+                        this.store.commit("setSystemUser", rv.systemUser);
+                        let obj: any = {
+                            avatar: rv.avatar,
+                            followeeCount: rv.followeeCount,
+                            followerCount: rv.followerCount,
+                        };
+
+                        this.store.commit("setUserInfo", obj);
+                        if (rv.systemUser == 0) {
+                            this.turnToHomePage("/Square");
+                        } else {
+                            if (window.innerWidth < 768) {
+                                message.info(
+                                    "If you need to design, please log in using an iPad or computer."
+                                );
+                                this.turnToHomePage("/Square");
+                            } else {
+                                this.turnToHomePage("/home");
+                            }
+                        }
+                        sessionStorage.setItem(
+                            "isTimeOne",
+                            JSON.stringify(false)
+                        ); //是否需要公告 提示 弹窗
+                        let randomNum: any =
+                            Math.floor(Math.random() * 9000000000000000) +
+                            1000000000000000;
+                        sessionStorage.setItem("sessionId", randomNum);
+                        sessionStorage.setItem("record", JSON.stringify([]));
                     }
-                }
-			).catch(res=>{
-			});
+                })
+                .catch((res) => {});
         },
 
         //修改密码提交
@@ -511,7 +557,7 @@ export default defineComponent({
                 email: this.forgetPasswordEmail,
                 emailVerifyCode: this.forgetEmailValue,
                 password: md5(this.newPassword + "abc"),
-				verifyEmail:false,
+                verifyEmail: false,
             };
             Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
                 (rv: any) => {
@@ -542,28 +588,28 @@ export default defineComponent({
         },
 
         //跳转到首页
-        turnToHomePage(str:any) {
-			this.getLang()
+        turnToHomePage(str: any) {
+            this.getLang();
             // this.$router.push("/home");
-			// console.log(window.location.search.substring(1));
-			this.store.commit("clearAllData");
-			this.store.commit("clearAllCollection");
-			this.store.commit("setAllBoardDataChoose",{});
-			this.store.commit("clearShowSketchboard",{});
-			this.$router.push(str);
+            // console.log(window.location.search.substring(1));
+            this.store.commit("clearAllData");
+            this.store.commit("clearAllCollection");
+            this.store.commit("setAllBoardDataChoose", {});
+            this.store.commit("clearShowSketchboard", {});
+            this.$router.push(str);
         },
-		//获取当前语言
-		getLang(){
-			let data ={}
-			Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
+        //获取当前语言
+        getLang() {
+            let data = {};
+            Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
                 (rv: any) => {
                     if (rv) {
-						this.locale = rv
-						setLang(rv)
+                        this.locale = rv;
+                        setLang(rv);
                     }
                 }
             );
-		},
+        },
         turnToWindow(url: any) {
             window.open(url);
         },
@@ -585,58 +631,57 @@ export default defineComponent({
         }
 
         .login_content {
-			
             position: absolute;
             top: 50%;
             left: 50%;
-            transform: translate(-50%,-50%);
+            transform: translate(-50%, -50%);
             // width: 60rem;
-			width: 150rem;
-            background: #FFFFFF;
+            width: 150rem;
+            background: #ffffff;
             // box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
             border-radius: 1rem;
             padding: 3rem 6rem 6.5rem;
             box-sizing: border-box;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			@media (max-width: 768px) {
-				width: 100%;
-			}
-			.login_content_left{
-				width: 40%;
-				@media (max-width: 768px) {
-					width: 100%;
-				}
-				.login_form_email{
-					position: absolute;
-					left: 0;
-					width: 100%;
-					height: 100%;
-					top: 0;
-					background: #fff;
-					transform: scale(0);
-					transition: .3s all;
-					border: 2px solid;
-					border-radius: 20px;
-					.email_last_step{
-						width: 100%;
-						height: 100%;
-						#app{
-							height: auto;
-						}
-					}
-				}
-				.active{
-					transform: scale(1);
-				}
-			}
-			.login_content_right{
-				width: 40%;
-				img{
-					width: 100%;
-				}
-			}
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            @media (max-width: 768px) {
+                width: 100%;
+            }
+            .login_content_left {
+                width: 40%;
+                @media (max-width: 768px) {
+                    width: 100%;
+                }
+                .login_form_email {
+                    position: absolute;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    top: 0;
+                    background: #fff;
+                    transform: scale(0);
+                    transition: 0.3s all;
+                    border: 2px solid;
+                    border-radius: 20px;
+                    .email_last_step {
+                        width: 100%;
+                        height: 100%;
+                        #app {
+                            height: auto;
+                        }
+                    }
+                }
+                .active {
+                    transform: scale(1);
+                }
+            }
+            .login_content_right {
+                width: 40%;
+                img {
+                    width: 100%;
+                }
+            }
             .login_type_list {
                 width: 100%;
                 display: flex;
@@ -645,7 +690,7 @@ export default defineComponent({
                     text-align: center;
                     font-size: 3.6rem;
                     font-weight: bold;
-                    color: #D7D7D7;
+                    color: #d7d7d7;
                     cursor: pointer;
                     height: 4rem;
                     line-height: 4rem;
@@ -655,49 +700,49 @@ export default defineComponent({
                     }
                 }
             }
-			.login_form_title {
-                    font-size: 1.6rem;
-                    // color: #666666;
-					font-weight: 900;
-					color: #000;
+            .login_form_title {
+                font-size: 1.6rem;
+                // color: #666666;
+                font-weight: 900;
+                color: #000;
+                display: flex;
+                justify-content: space-between;
+                box-sizing: border-box;
+                label {
                     display: flex;
-                    justify-content: space-between;
-                    box-sizing: border-box;
-					label{
-						display: flex;
-						span{
-							font-size: 1.6rem;
-							margin-left: 10px;
-							font-weight: normal;
-						}
-						&.active{
-							pointer-events:none;
-							input{
-								pointer-events:none;
-							}
-						}
-					}
+                    span {
+                        font-size: 1.6rem;
+                        margin-left: 10px;
+                        font-weight: normal;
+                    }
+                    &.active {
+                        pointer-events: none;
+                        input {
+                            pointer-events: none;
+                        }
+                    }
                 }
+            }
 
             .login_form_content {
                 margin-top: 4rem;
-				position: relative;
-                &[state="2"]{
-					>*{
-						opacity: 0;
-					}
-					.login_form_email{
-						opacity: 1;
-					}
-				}
-                .password_input_block{
+                position: relative;
+                &[state="2"] {
+                    > * {
+                        opacity: 0;
+                    }
+                    .login_form_email {
+                        opacity: 1;
+                    }
+                }
+                .password_input_block {
                     position: relative;
 
-                    .password_show_icon{
+                    .password_show_icon {
                         position: absolute;
                         font-size: 2.4rem;
                         right: 2rem;
-                        top:1.7rem;
+                        top: 1.7rem;
                         cursor: pointer;
                     }
                 }
@@ -706,14 +751,13 @@ export default defineComponent({
                     width: 100%;
                     height: 5rem;
                     margin-top: 1rem;
-                    border: 0.1rem solid #DFDFDF;
+                    border: 0.1rem solid #dfdfdf;
                     border-radius: 2.5rem;
                     padding-left: 2.1rem;
                     line-height: 5rem;
                     font-size: 1.4rem;
                     box-sizing: border-box;
                     outline: none;
-                    
 
                     &::placeholder {
                         color: #a5b0c2;
@@ -723,38 +767,36 @@ export default defineComponent({
 
             .email_last_step {
                 // margin-top: 4rem;
-				.email_last_step_bottom{
-					padding: 0 40px;
-				}
-                .email_last_step_block{
-					padding: 10px;
-					border-bottom: 2px solid;
-					box-sizing: border-box;
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					.email_last_step_content {
-                    margin-left: 1rem;
-                    font-size: 2.2rem;
-                    font-weight: bold;
-                    color: #030303;
+                .email_last_step_bottom {
+                    padding: 0 40px;
                 }
-					.email_last_step_block_icon{
-						cursor: pointer;
-						margin-right: 1rem;
-						height: 20px;
-					}
+                .email_last_step_block {
+                    padding: 10px;
+                    border-bottom: 2px solid;
+                    box-sizing: border-box;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    .email_last_step_content {
+                        margin-left: 1rem;
+                        font-size: 2.2rem;
+                        font-weight: bold;
+                        color: #030303;
+                    }
+                    .email_last_step_block_icon {
+                        cursor: pointer;
+                        margin-right: 1rem;
+                        height: 20px;
+                    }
                 }
 
                 .fi-br-arrow-left {
                     font-size: 2.5rem;
                     font-weight: bold;
                     color: #030303;
-					transform: translateY(1rem);
-					display: inline-block;
+                    transform: translateY(1rem);
+                    display: inline-block;
                 }
-
-                
             }
 
             .login_submit_button {
@@ -767,9 +809,9 @@ export default defineComponent({
                 font-weight: 500;
                 color: #ffffff;
                 cursor: pointer;
-				&[state="2"]{
-					cursor: not-allowed;
-				}
+                &[state="2"] {
+                    cursor: not-allowed;
+                }
             }
             .login_text {
                 font-size: 1.6rem;
@@ -778,7 +820,7 @@ export default defineComponent({
                 display: flex;
                 justify-content: flex-end;
 
-                .forget_password_text{
+                .forget_password_text {
                     cursor: pointer;
                 }
             }
@@ -788,15 +830,15 @@ export default defineComponent({
             position: absolute;
             top: 50%;
             left: 50%;
-            transform: translate(-50%,-50%);
+            transform: translate(-50%, -50%);
             width: 60rem;
-            background: #FFFFFF;
-            box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
+            background: #ffffff;
+            box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200, 200, 200, 0.3);
             border-radius: 1rem;
             padding: 3rem 6rem 6.5rem;
             box-sizing: border-box;
 
-            .forget_password_content_block{
+            .forget_password_content_block {
                 cursor: pointer;
             }
 
@@ -804,8 +846,8 @@ export default defineComponent({
                 font-size: 3.8rem;
                 font-weight: bold;
                 color: #030303;
-				transform: translateY(1rem);
-				display: inline-block;
+                transform: translateY(1rem);
+                display: inline-block;
             }
             .forget_password_content_title {
                 font-size: 3.2rem;
@@ -830,7 +872,7 @@ export default defineComponent({
                     width: 100%;
                     height: 5rem;
                     margin-top: 1rem;
-                    border: 0.1rem solid #DFDFDF;
+                    border: 0.1rem solid #dfdfdf;
                     border-radius: 2.5rem;
                     padding-left: 2.1rem;
                     line-height: 5rem;
@@ -865,7 +907,7 @@ export default defineComponent({
         }
     }
 
-    .login_footer{
+    .login_footer {
         position: absolute;
         display: flex;
         align-items: center;
@@ -875,30 +917,28 @@ export default defineComponent({
         width: 100%;
         padding: 0 4rem;
 
-        .login_footer_item{
+        .login_footer_item {
             display: flex;
             align-items: center;
 
-            .login_footer_item_text{
+            .login_footer_item_text {
                 font-size: 1.3rem;
                 color: #151515;
             }
 
-            .footer_item_text_pointer{
+            .footer_item_text_pointer {
                 cursor: pointer;
             }
 
-            .login_footer_line{
+            .login_footer_line {
                 width: 0.1rem;
                 height: 2rem;
                 margin: 0 2rem;
-                background: #B9B9B9;
+                background: #b9b9b9;
             }
         }
-
     }
 
-
     .marign_top20 {
         margin-top: 2rem;
     }
@@ -913,7 +953,10 @@ export default defineComponent({
     .marign_top40 {
         margin-top: 4rem;
     }
-
+	.thirdPartyLogin{
+		display: flex;
+		justify-content: space-between;
+	}
     .tip_content {
         font-size: 1.3rem;
         font-weight: bold;
@@ -934,11 +977,10 @@ export default defineComponent({
             color: #a5b0c2;
         }
 
-        .email_tip_content{
+        .email_tip_content {
             font-size: 1.4rem;
             color: #030303;
         }
     }
 }
-
 </style>
\ No newline at end of file