fix

src/component/Detail/editFrontBack.vue

@@ -71,6 +71,7 @@ export default defineComponent({
 			imgDomIndex = newVal
 			props.patchData.front.imageUrl=  ''
 			clearTimeout(setTimeSubmit)
+			
 			init(props.patchData.front[newVal],'')
 		})
 		let canvasBtn = reactive({

src/component/HomePage/generalMenu.vue

@@ -192,6 +192,7 @@ import { message, Upload, Modal } from "ant-design-vue";
  .ant-popover-inner-content{
 		display: flex;
 		flex-direction: column;
+		align-items: center;
 	}
 </style>
  <style lang="less">

src/component/modules/generalMiniCanvas.vue

@@ -2,7 +2,7 @@
     <div class="generalMiniCanvas">
 		<div class="addDetails_canvasCenter">
 			<div class="generalMiniCanvas_input generalMiniCanvas_item" :class="{spread:spreadState}">
-				<div class="generalMiniCanvas_input_item" v-show="(canvasState != 'move' && canvasState != 'liquidation')">
+				<div class="generalMiniCanvas_input_item" v-show="(canvasState != 'move' && canvasState != 'liquidation' && canvasState != 'movePosition')">
 					<span>{{ $t('exportModel.Size') }}</span>
 					<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
 				</div>
@@ -18,7 +18,17 @@
 					<span>{{ $t('exportModel.Color') }}</span>
 					<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
 				</div>
-				
+				<!-- <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"
+						@change="brushworkChange"
+						>
+						<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
+							<img :src="item.url" alt="">
+						</a-select-option>
+					</a-select>
+				</div> -->
 			</div>
 			<div class="exportCanvasBox_center_data">
 				<div class="generalMiniCanvas_btn generalMiniCanvas_item" :class="{spread:spreadState}">
@@ -27,12 +37,15 @@
 					</div> -->
 					<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
 					<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
+					<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasState == 'movePosition'}"></i>
 					<!-- <i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> -->
 					<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
 					<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
 					<!-- <i class="icon iconfont icon-IC-yehua" @click="setOperation('liquidation')"></i> -->
 					<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
 					<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
+					<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasState == 'zoomIn'}"></i>
+					<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasState == 'zoomOut'}"></i>
 				</div>
 				
 				<div class="exportCanvasBox_center_box">
@@ -147,6 +160,7 @@ export default defineComponent({
 		let normalCanvasState = ref([])//存放canvas操作
 		let canvasState = ref()//存放canvas操作
 		let keyDown = []//监听键盘的 keydown 和 keyup 事件
+		let isMovePostion = false
 		let init = ()=>{
 			normalCanvasState.value = []
 			reverseCanvasState.value = []
@@ -178,6 +192,9 @@ export default defineComponent({
 						height:canvasWH.value * hScale,
 					})
 					canvas.selection = false;
+					// canvas.set({
+					// 	backgroundColor: 'lightblue'
+					// });
 					scale = img.height/canvas.height
 					pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
 					
@@ -203,17 +220,16 @@ export default defineComponent({
 					},{ crossOrigin: "Anonymous" });
 					// 鼠标抬起事件
 					canvas.on('mouse:up', function(event) {
-						if(canvasBtn.canvasState != 'move'){
+						if(isMovePostion)isMovePostion = false
-							updateCanvasState('mouseUp')
+						if(canvasBtn.canvasState != 'move')updateCanvasState('mouseUp')
-						}
 					});
+					canvas.on("mouse:down", event=>setCanvasDown(event));
 					canvas.on('mouse:wheel', opt => {
 						const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
 						let zoom = canvas.getZoom() // 获取画布当前缩放值
 						zoom *= 0.999 ** delta
 						if (zoom > 20) zoom = 20
 						if (zoom < 0.01) zoom = 0.01
-						// console.log(zoom);
 						canvas.zoomToPoint(
 							{ // 关键点
 							x: opt.e.offsetX,
@@ -223,7 +239,9 @@ export default defineComponent({
 						)
 						opt.e.preventDefault()
 						opt.e.stopPropagation()
+						upDataPencilWidth(zoom)
 					})
+					canvas.on("mouse:move", event=>setCanvasMove(event));
 
 					//画布上移动
 					document.addEventListener('mousemove', mouseMove);
@@ -260,13 +278,13 @@ export default defineComponent({
 		}
 		let mouseMove = (event)=>{
 			let e = getMousePosition(event,false)
-			setCanvasMove(e)
+			setDomMove(e)
 		}
 		let touchmove = (event)=>{
 			let e = getMousePosition(event,true)
-			setCanvasMove(e)
+			setDomMove(e)
 		}
-		let setCanvasMove = (event)=>{
+		let setDomMove = (event)=>{
 			if(canvas.isDrawingMode){
 				canvas.setCursor('none');
 			}
@@ -277,39 +295,155 @@ export default defineComponent({
 			pencilbtnStyle.value.left = parentX + "px"
 			pencilbtnStyle.value.top =  parentY+'px'
 		}
+		let setCanvasMove = (event) =>{
+			if(canvasBtn.canvasState == 'movePosition' && isMovePostion)setCanvasPosition(event)
+		}
+		let lastPosX = 0
+		let lastPosY = 0
+		let setCanvasDown = (event)=>{
+			if(canvasBtn.canvasState == 'movePosition'){
+				isMovePostion = true;
+				lastPosX = event.e.clientX;
+				lastPosY = event.e.clientY;
+				return
+			}
+			if(canvasBtn.canvasState == 'zoomIn' || canvasBtn.canvasState == 'zoomOut'){
+				setCanvasZoom(event)
+				return
+			}
+		}
+		let setCanvasPosition = (event)=>{
+			const e = event.e;
+            const vpt = canvas.viewportTransform;
+
+            vpt[4] += e.clientX - lastPosX; // 更新水平偏移
+            vpt[5] += e.clientY - lastPosY; // 更新垂直偏移
+
+            canvas.requestRenderAll(); // 请求重绘画布
+            lastPosX = e.clientX;
+            lastPosY = e.clientY;
+		}
+		let setCanvasZoom = (opt)=>{
+			let zoom = canvas.getZoom() // 获取画布当前缩放值
+			let num = -100
+			if(canvasBtn.canvasState == 'zoomOut') num = 100
+			zoom *= 0.999 ** num
+			if (zoom > 20) zoom = 20
+			if (zoom < 0.01) zoom = 0.01
+			// console.log(zoom);
+			canvas.zoomToPoint(
+				{ // 关键点
+				x: opt.e.offsetX,
+				y: opt.e.offsetY
+				},
+				zoom
+			)
+			opt.e.preventDefault()
+			opt.e.stopPropagation()
+			upDataPencilWidth(zoom)
+		}
 		let setOperation = (str)=>{
 			canvasBtn.canvasState = str
 			let canvasCenterBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center_box");
 			let classList = canvasCenterBox.className.split(' ');
+			canvasCenterBox.className = 'exportCanvasBox_center_box'
 			if(str == 'move'){
 				setMove()
 				pencilbtnStyle.value.display = `none`
-				if(classList.indexOf('cursorNone')>-1) canvasCenterBox.classList.remove('cursorNone')
+				canvasCenterBox.className = 'exportCanvasBox_center_box'
 			}else if(str == 'pencil'){
 				setPencil()
 				pencilbtnStyle.value.display = `block`
-				if(classList.indexOf('cursorNone') == -1) canvasCenterBox.classList.add('cursorNone')
+				canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
 			}else if(str == 'eraser'){
 				setEraser()
 				pencilbtnStyle.value.display = `block`
-				if(classList.indexOf('cursorNone') == -1) canvasCenterBox.classList.add('cursorNone')
+				canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
 			}else if(str == 'liquidation'){
 				canvas.isDrawingMode = false
-				if(classList.indexOf('cursorNone') == -1) canvasCenterBox.classList.add('cursorNone')
+				canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
+			}else if(str == 'zoomIn' || str == 'zoomOut'){
+				pencilbtnStyle.value.display = `none`
+				canvas.isDrawingMode = false
+				canvas.forEachObject((obj) =>obj.selectable = false);
+				canvasCenterBox.className = 'exportCanvasBox_center_box'
+			}else if(str == 'movePosition'){
+				canvas.isDrawingMode = false
+				pencilbtnStyle.value.display = `none`
+				canvas.forEachObject((obj) =>obj.selectable = false);
+				canvasCenterBox.className = 'exportCanvasBox_center_box cursorMove'
 			}
 		}
+		let brushworkValue = ref('PencilBrush')
+		let brushworkChange = (value)=>{
+			brushworkValue.value = value
+			setPencil()
+		}
 		let setMove = ()=>{
 			canvas.isDrawingMode = false
 			canvas.forEachObject((obj) =>obj.selectable = true);
 		}
+		let brushList = ref([
+			{
+				value:'PencilBrush',
+				url:'/image/brush/PencilBrush.jpg'
+			},{
+				value:'Marking',
+				url:'/image/brush/PencilBrush-2.jpg'
+			},{
+				value:'InkBrush',
+				url:'/image/brush/InkBrush.jpg'
+			},{
+				value:'CrayonBrush',
+				url:'/image/brush/CrayonBrush.jpg'
+			},{
+				value:'RibbonBrush',
+				url:'/image/brush/RibbonBrush.jpg'
+			},{
+				value:'MarkerBrush',
+				url:'/image/brush/MarkerBrush.jpg'
+			},{
+				value:'WritingBrush',
+				url:'/image/brush/WritingBrush.jpg'
+			},{
+				value:'LongfurBrush',
+				url:'/image/brush/LongfurBrush.jpg'
+			},{
+				value:'SpraypaintBrush',
+				url:'/image/brush/SpraypaintBrush.jpg'
+			},
+		])
 		let setPencil = ()=>{
+			let pencil
 			canvas.isDrawingMode = true//开启绘画模式
-			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
+			if(brushworkValue.value == 'PencilBrush'){
+				pencil = new fabric.PencilBrush(canvas,{}); //普通笔
+			}else if(brushworkValue.value == 'Marking'){
+				pencil = new fabric.PencilBrush(canvas,); //记号笔
+			}else if(brushworkValue.value == 'InkBrush'){
+				pencil = new fabric.InkBrush(canvas,{}); //油画笔
+			}else if(brushworkValue.value=='CrayonBrush'){
+				pencil = new fabric.CrayonBrush(canvas,{}); //蜡笔
+			}else if(brushworkValue.value == 'RibbonBrush'){
+				pencil = new fabric.RibbonBrush(canvas,{width: 1,}); //色带
+			}else if(brushworkValue.value == 'MarkerBrush'){
+				pencil = new fabric.MarkerBrush(canvas,{}); //书写笔
+				// pencil = new fabric.PenBrush(canvas,{}); //书写笔
+			}else if(brushworkValue.value == 'WritingBrush'){
+				pencil = new fabric.WritingBrush(canvas,{}); //毛笔
+			}else if(brushworkValue.value == 'LongfurBrush'){
+				pencil = new fabric.LongfurBrush(canvas,{width: 1,}); //色带
+			}else if(brushworkValue.value == 'SpraypaintBrush'){
+				pencil = new fabric.SpraypaintBrush(canvas,{}); //长毛刷
+			}
+			
+            canvas.freeDrawingBrush = pencil
 			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-			canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor
+
 			pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
 			canvas.freeDrawingBrush.isEraser = false
 			setPencilWidth()
+			pencilColor()
 		}
 		let setEraser = ()=>{
 			canvas.isDrawingMode = true
@@ -321,6 +455,9 @@ export default defineComponent({
 			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
 			setPencilWidth()
 		}
+		let upDataPencilWidth = (zoom)=>{
+			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]) / zoom;
+		}
 		let deleteObj = ()=> {
 			// if(!canvas.getActiveObjects()){
 			// 	return
@@ -343,9 +480,13 @@ export default defineComponent({
 		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
 			clearTimeout(setTimeOut.pencilWidth)
 			setTimeOut.pencilWidth = setTimeout(()=>{
-				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
+				let zoom = canvas.getZoom() // 获取画布当前缩放值
+				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]) / zoom
 				pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
 				pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
+				if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
+					canvas.freeDrawingBrush.width = 1;
+				}
 			},300)
 		}
 		let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
@@ -358,12 +499,24 @@ export default defineComponent({
 			// 	colorHistoryList.value.push(canvasPencilColor.value)
 			// },1000)
 		}
+		let 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})`;
+		}
 		let pencilColor = ()=>{
 			if(canvas.freeDrawingBrush.isEraser){
 				canvas.freeDrawingBrush.color = '#FFFFFF';
 			}else{
 				pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
-				canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor;
+				if(brushworkValue.value == 'Marking'){
+					console.log(canvasBtn.canvasPencilColor);
+					console.log(hexToRgba(canvasBtn.canvasPencilColor,.5));
+					canvas.freeDrawingBrush.color = hexToRgba(canvasBtn.canvasPencilColor,.5)
+				}else{
+					canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor
+				}
 			}
 		}
 		let routesChange = (str)=>{
@@ -434,9 +587,12 @@ export default defineComponent({
 						)
 						exportCanvas.add(obj)
 					})
-					console.log(canvas.toDataURL("image/png"));
+					let position = JSON.parse(JSON.stringify(canvas.viewportTransform))
-					
+					position[4] *= scale
-					let data = canvas.toDataURL("image/png");
+					position[5] *= scale
+					//设置画布当前那位置和缩放
+					// exportCanvas.viewportTransform = position
+					let data = exportCanvas.toDataURL("image/png");
 					if(liquefation){
 						return resolve(data)
 					}
@@ -458,6 +614,7 @@ export default defineComponent({
 		let submitLiquefaction = (rv)=>{
 			// const originalWidth = liquefactionData.value.width // 保存原始宽度
 			// const originalHeight = liquefactionData.value.height; // 保存原始高度
+			canvas.viewportTransform = [1,0,0,1,0,0]
 			fabric.Image.fromURL(rv, function(img) {
 				// 设置背景图对象的宽度和高度与 canvas 相同
 				img.scaleToWidth(canvas.width);
@@ -510,6 +667,9 @@ export default defineComponent({
 			submitLiquefaction,
 			setLiquefaction,
 			routesChange,
+			brushList,
+			brushworkValue,
+			brushworkChange,
         };
     },
     data() {
@@ -523,6 +683,7 @@ export default defineComponent({
 });
 </script>
 <style lang="less">
+
 .generalMiniCanvas{
 	position: relative;
 	height: 100%;
@@ -566,6 +727,13 @@ export default defineComponent({
 			display: flex;
 			margin-right: 3rem;
 			align-items: center;
+			&.brushwork{
+				img{
+					width: 100%;
+					max-height: 100%;
+					object-fit: contain;
+				}
+			}
 			span{
 				margin-right: 1rem;
 			}
@@ -644,6 +812,12 @@ export default defineComponent({
 		&.cursorNone:hover{
 			cursor: none;
 		}
+		&.cursorMove:hover{
+			cursor: move;
+			canvas{
+				cursor: move !important;
+			}
+		}
 		.editFrontBack_pencilbtn{
 			position: absolute;
 			z-index: 1;