From ac41bc1fd44685458a5a0b45504a24b0db95cd87 Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Mon, 14 Oct 2024 16:42:28 +0800
Subject: [PATCH] =?UTF-8?q?mini=E7=94=BB=E5=B8=83=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=AC=94=E8=A7=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/js/fabric.brushes.js                 | 58 +++++++++++++++++++--
 src/component/Detail/setDesignItem.vue      |  4 +-
 src/component/modules/generalMiniCanvas.vue |  4 +-
 3 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/public/js/fabric.brushes.js b/public/js/fabric.brushes.js
index 0701ce65..51b3f331 100644
--- a/public/js/fabric.brushes.js
+++ b/public/js/fabric.brushes.js
@@ -134,7 +134,9 @@ fabric.BaseBrush.prototype.convertToImg = function() {
 	if(!xy){
 		return
 	}
-	img.set({left:xy.x/pixelRatio,top:xy.y/pixelRatio,'scaleX':1/pixelRatio,'scaleY':1/pixelRatio}).setCoords();
+	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();
 	this.canvas.add(img).clearContext(this.canvas.contextTop);
 	this.canvas.clearContext(this.canvas.contextTop);
 }
@@ -232,6 +234,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];
 		this.canvas.contextTop.globalAlpha = this.opacity;
 		this._size = this.width / 2 + this._baseWidth;
 		this._drawn = false;
@@ -239,6 +243,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];
 		this.update(pointer);
 		this.draw(this.canvas.contextTop);
 	},
@@ -403,6 +409,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];
 		var len, i, point = this.setPointer(pointer),
 			subtractPoint = point.subtract(this._lastPoint),
 			distance = point.distanceFrom(this._lastPoint),
@@ -467,6 +475,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];
 		var len, i, point = this.setPointer(pointer);
   
 		this._strokes = [];
@@ -500,6 +510,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];
 		this._points = [pointer];
 		this._count = 0;
 
@@ -512,6 +524,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];
 		this._points.push(pointer);
 
 		var i, dx, dy, d, size,
@@ -595,6 +609,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];
 		this._lastPoint = pointer;
 		this.canvas.contextTop.strokeStyle = this.color;
 		this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -603,6 +619,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];
 			this._render(pointer);
 		}
 	},
@@ -662,6 +680,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];
 		this._lastPoint = pointer;
 		this.canvas.contextTop.strokeStyle = this.color;
 		this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -670,6 +690,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];
 			this._render(pointer);
 		}
 	},
@@ -734,6 +756,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];
 		this._lastPoint = pointer;
 		this.canvas.contextTop.strokeStyle = this.color;
 		this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -742,6 +766,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];
 			this._render(pointer);
 		}
 	},
@@ -807,6 +833,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];
 		this._lastPoint = pointer;
 		this.canvas.contextTop.lineWidth = this._lineWidth;
 		this._size = this.width + this._baseWidth;
@@ -814,6 +842,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];
 			this._render(pointer);
 		}
 	},
@@ -870,7 +900,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];
 		this._lastPoint = pointer;
 
 		//ctx.globalCompositeOperation = 'source-over';
@@ -887,6 +918,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];
 		this._lastPoint = pointer;
 	},
 
@@ -921,6 +954,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];
 		this._points = [pointer];
 
 		var ctx = this.canvas.contextTop,
@@ -932,6 +967,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];
 		this._points.push(pointer);
 
 		var ctx = this.canvas.contextTop,
@@ -988,6 +1025,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];
 		this._points = [pointer];
 
 		var ctx = this.canvas.contextTop,
@@ -998,6 +1037,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];
 		this._points.push(pointer);
 
 		var i, dx, dy, d, factor = .3 * this.width,
@@ -1083,6 +1124,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];
 		this._point = new fabric.Point(pointer.x, pointer.y);
 		this._lastPoint = this._point;
 
@@ -1095,6 +1138,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];
 		this._lastPoint = this._point;
 		this._point = new fabric.Point(pointer.x, pointer.y);
 	},
@@ -1169,7 +1214,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];
 		this._lastPoint = pointer;
 		this._drawn = false;
 
@@ -1181,6 +1227,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];
 		var ctx = this.canvas.contextTop,
 			dx = pointer.x - this._lastPoint.x,
 			dy = pointer.y - this._lastPoint.y,
@@ -1233,12 +1281,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];
 		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];
 		this._points.push(pointer);
 
 		var ctx = this.canvas.contextTop,
diff --git a/src/component/Detail/setDesignItem.vue b/src/component/Detail/setDesignItem.vue
index a2866634..4842f236 100644
--- a/src/component/Detail/setDesignItem.vue
+++ b/src/component/Detail/setDesignItem.vue
@@ -40,9 +40,9 @@
 		</div>
 		<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
 	</div>
-	<div class="design_compile_content">
+	<!-- <div class="design_compile_content">
 		<editFrontBack :patchData="frontBack" :imgDomIndex="imgDomIndex" ref="editFrontBack"></editFrontBack>
-	</div>
+	</div> -->
 	
 </template>
 
diff --git a/src/component/modules/generalMiniCanvas.vue b/src/component/modules/generalMiniCanvas.vue
index 498710b7..02d05b64 100644
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -18,7 +18,7 @@
 					<span>{{ $t('exportModel.Color') }}</span>
 					<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
 				</div>
-				<!-- <div class="generalMiniCanvas_input_item brushwork" v-show="canvasState == 'pencil'">
+				<div class="generalMiniCanvas_input_item brushwork" v-show="canvasState == 'pencil'">
 					<span >{{ $t('exportModel.Brushwork') }}:</span>
 					<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
 						style="width: 20rem"
@@ -28,7 +28,7 @@
 							<img :src="item.url" alt="">
 						</a-select-option>
 					</a-select>
-				</div> -->
+				</div>
 			</div>
 			<div class="exportCanvasBox_center_data">
 				<div class="generalMiniCanvas_btn generalMiniCanvas_item" :class="{spread:spreadState}">