更新绘画功能

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">

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)

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,

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>

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>

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>

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>

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>

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>

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')

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]){

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
 		}

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>

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();
       }

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;

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){

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,