Merge branch 'StableVersion' into develop

src/component/HomePage/ExportModel.vue

@@ -29,19 +29,19 @@
                     <div>Height:</div>
                     <input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height"/>
                 </label>
-                <div class="exportCanvasBox_title" @click.stop="setCloseNav(0)">
+                <div class="exportCanvasBox_title" @click.stop="setCloseNav('nav')">
 					Canvas Nav
 					<div
                         :class="[
                             'icon',
                             'iconfont',
                             'icon-xiala',
-							closeNav==0?'icon-rotate':''
+							closeNav.nav?'icon-rotate':''
                         ]"
                     >
 					</div>
 				</div>
-                <div class="exportCanvasBox_img" :class="{'closeNav' :closeNav==0}">
+                <div class="exportCanvasBox_img exportCanvasBox_left_item" :class="{'closeNav' :closeNav.nav}">
                     <div
                         class="exportCanvasBox_allItem"
                         v-for="(item,key) in allBoardData"
@@ -65,16 +65,62 @@
                         </div>
                     </div>
                 </div>
-				<div class="exportCanvasBox_title" @click.stop="setCloseNav(1)">
+				<div class="exportCanvasBox_title" @click.stop="setCloseNav('tool')">
 					Canvas Tool
 					<div
                         :class="[
                             'icon',
                             'iconfont',
                             'icon-xiala',
-							closeNav==1?'icon-rotate':''
+							closeNav.tool?'icon-rotate':''
                         ]"
                     >
+					
+					</div>
+				</div>
+				<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
+					<div class="exportCanvasBox_left_tool_item">
+						<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:operation == 'pencil'}"></i>
+						<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}"></i>
+						<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}"></i>
+					</div>
+					<div class="exportCanvasBox_left_tool_item">
+						<label>
+							<div >Color</div>
+							<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
+						</label>
+						<label>
+							<div >Size:</div>
+							<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
+						</label>
+					</div>
+				</div>
+				<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
+					More
+					<div
+                        :class="[
+                            'icon',
+                            'iconfont',
+                            'icon-xiala',
+							closeNav.move?'icon-rotate':''
+                        ]"
+                    >
+					</div>
+				</div>
+				<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.move}">
+					<div class="exportCanvasBox_left_tool_item">
+						<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
+						<i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i>
+						<i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i>
+						<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
+						<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
+						<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
+					</div>
+					<div class="exportCanvasBox_left_tool_item leftAlign">
+						<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
+						<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
 					</div>
 				</div>
             </div>
@@ -86,8 +132,6 @@
                 <div class="exportCanvasBox_title">
 					High-definition Download
 				</div>
-				<div @click="historyState(stateIndex - 1)">123</div>
-				<div @click="historyState(stateIndex + 1)">321</div>
 				<div class="exportCanvasBox_right_definition">
 					<label>
 						<div>Width:</div>
@@ -100,7 +144,7 @@
 				</div>
 				<div class="" @click="multiselect">all</div>
 				<div class="exportCanvasBox_right_btn">
-					<div class="subitOkPreviewBtn" @click="setExport">HD Export</div>
+					<div class="subitOkPreviewBtn" @click="setHDExport">HD Export</div>
 					<div class="subitOkPreviewBtn" @click="setExport">Export</div>
 				</div>
             </div>
@@ -114,13 +158,13 @@
 import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
 } from "vue";
 import { Https } from "@/tool/https";
-import { multiselectJS } from "@/tool/canvasDrawing";
 import scaleImage from "@/component/HomePage/scaleImage.vue";
 import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
 import { useStore } from "vuex";
 import JSZip, { forEach } from "jszip";
 import { message, Modal } from "ant-design-vue";
 const FileSaver = require("file-saver");
+import { multiselectJS,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck } from "@/tool/canvasDrawing";
 export default defineComponent({
     components: {
         scaleImage,
@@ -163,11 +207,14 @@ export default defineComponent({
 		let likeDesign = 4; //整体图分组
 		let disposeMoodboardShow = true;
 
-
-		let canvasState = ref([])//存放canvas操作
-		let stateIndex = ref(-1)//表示撤回数量
+		
+		let canvasState = ref()//存放canvas操作
+		let reverseCanvasState = ref([])//存放canvas操作
+		let normalCanvasState = ref([])//存放canvas操作
 		let isLoadCanvas = false//撤回或者反撤回false为撤回
         let init = () => {
+			normalCanvasState.value = []
+			reverseCanvasState.value = []
             showUpgradePlan.value = true;
             nextTick().then(async () => {
                 allBoardData.value.likeDesignCollectionList =
@@ -187,15 +234,27 @@ export default defineComponent({
                     isDrawingMode: false, // 开启绘图模式
 					// preserveObjectStacking: true,
                 });
+				JSchangeType(canvas,'init')
 				canvasOnDrop()//开启鼠标到画布事件
 				setRemoveImage()//设置元素删除
 				canvas.on("object:modified", ()=>{
 					updateCanvasState()
 				});
-				canvas.on('selection:created', ()=>{
-					updateCanvasState('created')
-				});
-				// canvas.on("object:added", updateCanvasState);
+				//鼠标移动
+				canvas.on("mouse:move", event =>setCanvasMove(event));
+				canvas.on("mouse:out", event=>setCanvasOut(event));
+				canvas.on("mouse:down", event=>setCanvasDown(event));
+				canvas.on("mouse:up", event=>setCanvasUp(event));
+				// canvas.on('path:created', (event)=>{updateCanvasState()});
+				// canvas.on("selection:created", (event)=>{setZIndex(event)});
+				// canvas.on('object:removed', function() {
+				// });
+				// canvas.on("object:added", (obj)=>{
+				// 	obj.target.cornerSize = 10
+				// 	obj.target.transparentCorners = false
+				// });
+				fabric.Object.prototype.cornerSize = 10
+				fabric.Object.prototype.transparentCorners = false 
 				// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
                 let arr = [
                     "disposeMoodboard",
@@ -303,24 +362,29 @@ export default defineComponent({
 						canvas.setHeight(canvasWH.value.height);
 					}
                 }
+				updateCanvasState('')//加载完成后记录一下
             });
         };
 		let setRemoveImage = ()=>{
 			let deleteObject = (eventData, transform)=> {
-				var target = [transform.target];
-				if(transform.target._objects){
-					target = transform.target._objects
-				}
-			// canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
-			// 	const sel = new fabric.ActiveSelection(canvas.getObjects(), {
-			// 	canvas
-			// })
+				// var target = [transform.target];
+				let target = canvas.getActiveObjects()
 				target.forEach((item)=>{
-					var canvas = item.canvas;
-					canvas.remove(item);
+					// var canvas = item.canvas;
+					// canvas.remove(item);
+					canvas.fxRemove(item, {
+						onComplete(){
+						canvas.discardActiveObject(); // 丢弃当前选中的对象
+						canvas.renderAll(); // 重新渲染 Canvas
+						}
+					})
+					canvas.FX_DURATION = 300
 				})
-				canvas.requestRenderAll();
-				canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
+				// canvas.requestRenderAll();
+				// canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
+				// canvas.discardActiveObject(); // 丢弃当前选中的对象
+				// canvas.renderAll(); // 重新渲染 Canvas
+				updateCanvasState('remove')
 			}
 			const deleteIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC"
 			// 创建删除图片元素
@@ -348,22 +412,7 @@ export default defineComponent({
 				cornerSize: 24
 			})
 		}
-		//设置画布监听修改添加事件，用来做撤回功能
-		let updateCanvasState = (str) =>{
-			if (!isLoadCanvas) {
-				const canvasAsJson = JSON.stringify(canvas.toJSON());
-				if(str == 'created'){
-					if(canvasState.value.length == 0){
-						canvasState.value.push(canvasAsJson);
-					}
-				}else{
-					canvasState.value.push(canvasAsJson);
-				}
-				stateIndex.value = canvasState.value.length - 1;
-			} else {
-				isLoadCanvas = false;
-			}
-		}
+		
 		let setImageWidth = (key)=>{
 			let imgWidth = canvasWH.value.width; //这是设置画布等宽
 			if (
@@ -405,12 +454,9 @@ export default defineComponent({
 				scaleX:
 					imgWidth / img.width,
 				scaleY:(img.width * proportion * scaleWH) / img.height,
-				cornerSize: 10, // 选中时，角的大小为20
-				// lockRotation:true,
-				// lockScalingX:true,
+				// cornerSize: 10, // 选中时，角的大小为20
+				// transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
 				lockRotation: true,
-				transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
-				// cornerColor: "#a1de93", // 选中时，角的颜色是 青色
 			});
 		}
 		
@@ -552,24 +598,19 @@ export default defineComponent({
             canvas.setWidth(canvasWH.value.width);
         };
 
-		let closeNav = ref(0)
-		let setCloseNav = (num)=>{
-			if(closeNav.value == num){
-				closeNav.value = -1
-			}else{
-				closeNav.value = num
-			}
+		let closeNav = ref({
+			nav:true,
+			tool:false,
+			move:false,
+		})
+		let setCloseNav = (key)=>{
+			closeNav.value[key] = !closeNav.value[key]
 		}
-		// let multiselect = ()=>{
-		// 	console.log(canvas);
-		// 	multiselectJS(canvas)
-		// }
 		function multiselect() {//获取整体宽高
 			canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
 			const sel = new fabric.ActiveSelection(canvas.getObjects(), {
 				canvas
 			})
-			// console.log(sel)
 			canvas.setActiveObject(sel)
 			canvas.requestRenderAll()
 			const activeObject = canvas.getActiveObject(); // 获取当前选中的整体对象
@@ -579,7 +620,6 @@ export default defineComponent({
 				console.log('Total Width:', totalWidth);
 				console.log('Total Height:', totalHeight);
 			}
-
 		}
 		let currentType = ref({
 			type:'',
@@ -591,31 +631,31 @@ export default defineComponent({
 		}
 		let canvasOnDrop = ()=>{
 			canvas.on('drop', (opt)=> {
-			// 省略部分代码......
-			let offset = {
-				left: canvas.getSelectionElement().getBoundingClientRect().left,
-				top: canvas.getSelectionElement().getBoundingClientRect().top
-			}
-			let point = {
-				x: opt.e.x - offset.left,
-				y: opt.e.y - offset.top,
-			}
-			let pointerVpt = canvas.restorePointerVpt(point)
-			switch (currentType.value.type) {
-				case 'colorBoards':
-					let rect = setGroup(currentType.value.data)
-					setCanvasColor(pointerVpt.y, pointerVpt.x,rect)
-				break
-				case 'moodboardFiles':
-				createRect(pointerVpt.y, pointerVpt.x,currentType.value.type)
-				break
-				default :
-				createRect(pointerVpt.y, pointerVpt.x,currentType.value.type)
-				break
-			}
-			// 创建完元素，把当前操作的元素类型设置回 null
+				let offset = {
+					left: canvas.getSelectionElement().getBoundingClientRect().left,
+					top: canvas.getSelectionElement().getBoundingClientRect().top
+				}
+				let point = {
+					x: opt.e.x - offset.left,
+					y: opt.e.y - offset.top,
+				}
+				let pointerVpt = canvas.restorePointerVpt(point)
+				switch (currentType.value.type) {
+					case 'colorBoards':
+						let rect = setGroup(currentType.value.data)
+						setCanvasColor(pointerVpt.y, pointerVpt.x,rect)
+					break
+					case 'moodboardFiles':
+					createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
+					break
+					default :
+					createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
+					break
+				}
+				// 创建完元素，把当前操作的元素类型设置回 null
 				currentType.value.type = null
 				currentType.value.data = null
+
 			})
 		}
 		let setGroup = (data)=>{
@@ -651,43 +691,274 @@ export default defineComponent({
 				top,
 				width: rect.width,
 				fill: "rgb(255,255,255)",
-				cornerSize: 10, // 选中时，角的大小为20
-				transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
 				stroke: "#212121",
 				strokeWidth: 1,
 			});
-			// 将矩形对象添加到 canvas 中
-
 			canvas.add(group);
 			return group
 		}
 		// 创建矩形
-		let createRect = (top, left,key)=> {
+		let createImage = async (top, left,key)=> {
 			let itemCanvasImg = currentType.value.data.imgUrl
 			if(key == 'likeDesignCollectionList'){
 				itemCanvasImg = currentType.value.data.designOutfitUrl;
 			}
-			fabric.Image.fromURL(itemCanvasImg,(img) => {
-				setCanvasImage(img,key,left,top)//设置图片
-				canvas.add(img);
-			},{ crossOrigin: "Anonymous" });
+			await new Promise((resolve,reject)=>{
+				fabric.Image.fromURL(itemCanvasImg,(img) => {
+					setCanvasImage(img,key,left,top)//设置图片
+					canvas.add(img);
+					resolve()
+				},{ crossOrigin: "Anonymous" });
+			})
+			updateCanvasState()
+		}
+		//设置画布监听修改添加事件，用来做撤回功能
+		let updateCanvasState = (str) =>{
+				const canvasAsJson = JSON.stringify(canvas.toJSON());
+				if(str == 'loadingCompleted'){
+					// reverseCanvasState.value.push(canvasAsJson);
+				}
+				normalCanvasState.value.push(canvasAsJson);
+			if (isLoadCanvas) {
+				reverseCanvasState.value = []
+				isLoadCanvas = false;
+				canvasState.value = canvasAsJson
+			}
 		}
 		//撤回
-		let historyState = (index)=> {
-			if(index<=0){
-				index = 0
-			}else if (index >canvasState.value.length){
-				index = canvasState.value.length-1
+		let historyState = (str)=> {
+			if(str == 'reverse' && reverseCanvasState.value.length > 0){
+				canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
+				let obj = reverseCanvasState.value.pop()
+				normalCanvasState.value.push(obj);
+			}else if(str == '' && normalCanvasState.value.length > 1){
+				let obj = normalCanvasState.value.pop()
+				reverseCanvasState.value.push(obj);
+				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
+				isLoadCanvas = true;
+			}else{
+				return
+			}
+			canvas.loadFromJSON(canvasState.value, () => {});
+		}
+		
+		//在画布进行画画
+		let operation = ref('move')
+		let operationMode = ref('fill')
+		//铅笔颜色 大小
+		let canvasPencilColor = ref('#000000')
+		let canvasPencilWidth = ref(20)
+		let setOperation = (str)=>{
+			operation.value = str
+			canvas.discardActiveObject();//取消所有选中边框
+			clearPatterning()//临时图形置为空并且添加撤回对象里面
+			if(str == 'pencil'){
+				setPencil()
+			}else if(str == 'move'){
+				setMove()
+				canvas.forEachObject((obj) =>obj.selectable = true);
+				JSchangeType(canvas,'init')
+			}else if(str == 'eraser'){
+				setEraser()
+			}else{
+				canvas.forEachObject((obj) =>obj.selectable = false);
+				canvas.isDrawingMode = false
+			}
+		}
+		let setOperationMode = (str) =>{
+			operationMode.value = str
+		}
+		let brushIndicator = new fabric.Circle({
+			radius:canvasPencilWidth.value/2,
+            fill: '#fff',
+			stroke: '#000',
+			strokeWidth: 0,
+            originX: 'center',
+            originY: 'center',
+			visible :true,
+			erasable: false,
+        });
+		let setPencil =()=>{
+            let pencil = new fabric.PencilBrush(canvas); //笔
+			canvas.preserveObjectStacking = true;
+			canvas.isDrawingMode = true//开启绘画模式
+            canvas.freeDrawingBrush = pencil
+            canvas.freeDrawingBrush.color = canvasPencilColor.value;
+			brushIndicator.set('fill',canvasPencilColor.value)
+			canvas.freeDrawingBrush.isEraser = false
+			canvas.freeDrawingBrush.width = canvasPencilWidth.value;
+		}
+		
+		let setMove = () =>{
+			canvas.isDrawingMode = false
+			canvas.forEachObject((obj) =>obj.selectable = true);
+		}
+		let setEraser = ()=>{
+			canvas.isDrawingMode = true
+			let eraser = new fabric.EraserBrush(canvas)
+            canvas.freeDrawingBrush = eraser
+			brushIndicator.set({fill: '#FFF'});
+			canvas.requestRenderAll();
+			canvas.freeDrawingBrush.isEraser = true
+			canvas.freeDrawingBrush.width = canvasPencilWidth.value;
+		}
+		let setTimeOut = {
+			color:null,
+			width:null,
+		}//给切换颜色设置防抖
+		let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
+			clearTimeout(setTimeOut.color)
+			setTimeOut.color = setTimeout(()=>{
+				// brushIndicator.fill = canvasPencilColor.value;
+				if(canvas.freeDrawingBrush.isEraser){
+
+				}else{
+					brushIndicator.set({fill: canvasPencilColor.value});
+				}
+				canvas.freeDrawingBrush.color = canvasPencilColor.value;
+
+			},300)
+		}
+		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
+			clearTimeout(setTimeOut.width)
+			canvasPencilWidth.value = Number(canvasPencilWidth.value)
+			setTimeOut.width = setTimeout(()=>{
+				canvas.freeDrawingBrush.width = canvasPencilWidth.value;
+				// setPencil()
+			},300)
+		}
+		let downPoint = null;//鼠标按下位置
+		let upPoint = null;//鼠标抬起位置
+		let currentPatterning = null//临时图形
+		let polyLineBtn = null
+		let createPatterningIs = false
+		let clearPatterning = () =>{
+			if(createPatterningIs){
+				canvas.remove(currentPatterning)
+			}
+			currentPatterning = null
+			canvas.remove(polyLineBtn)
+			updateCanvasState()
+		}
+		//设置再画布上移动 
+		let setCanvasMove = (event)=>{
+			var pointer = canvas.getPointer(event.e);
+			if(canvas.isDrawingMode){
+				canvas.setCursor('none');
+				if(!canvas.contains(brushIndicator)){
+					canvas.add(brushIndicator)
+					canvas.bringToFront(brushIndicator);//设置优先级最高
+				}
+				// brushIndicator.fill = canvasPencilColor.value
+				brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:canvasPencilWidth.value/2 });
+				
+			}else{
+				if(createPatterningIs){
+					JScanvasMouseMove(operation.value,event,currentPatterning,downPoint)
+				}
+			}
+			canvas.requestRenderAll()
+		}
+		let setCanvasOut = (event)=>{
+			canvas.remove(brushIndicator)//鼠标移出删除绘画范围的圆形
+		}
+		//设置再画布上按下
+		let setCanvasDown = (event)=>{
+
+			downPoint = event.absolutePointer
+			let arr = ['rect','line','circle','triangle','ellipse','fold']
+			if(arr.indexOf(operation.value) > -1){
+				JSchangeType(canvas,operation.value)
+				createPatterningIs = true
+				if(currentPatterning && operation.value == 'fold'){
+					canvas.skipTargetFind = false
+					currentPatterning.points.push({
+						x: downPoint.x,
+						y: downPoint.y
+					})
+					// currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
+				}else{
+					if(operation.value == 'fold'){
+						polyLineBtn = JScreateCheck(event)
+						polyLineBtn.on('mousedown',()=>{
+							canvas.skipTargetFind = true
+							let points = currentPatterning.points
+							currentPatterning.points.pop()
+							currentPatterning.points.pop()
+							// canvas.remove(currentPatterning)
+							// let polyline = new fabric.Polyline(points, {
+							// 	fill: 'transparent',
+							// 	stroke: canvasPencilColor.value,
+							// 	strokeWidth:canvasPencilWidth.value,
+							// 	selection:false,
+							// })
+							// canvas.add(polyline)
+							currentPatterning.set({stroke: canvasPencilColor.value})
+							createPatterningIs = false
+							clearPatterning()//临时图形置为空并且添加撤回对象里面
+						})
+						canvas.add(polyLineBtn)
+					}
+					currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
+					canvas.add(currentPatterning)
+					canvas.bringToFront(currentPatterning);//设置优先级最高
+				}
+			}else{
+				createPatterningIs = false
+			}
+		}
+		//设置再画布上抬起
+		let setCanvasUp = (event)=>{
+			upPoint = event.absolutePointer
+			if(canvas.isDrawingMode){
+				canvas.remove(brushIndicator)
+				updateCanvasState()
+			}else{
+				// event.target && (event.target.bringToFront())//设置优先级
+			}
+			if(createPatterningIs){
+				switch (operation.value) {
+					case 'line':
+						currentPatterning.set({stroke: canvasPencilColor.value})
+					break
+					case 'fold':
+						// currentPatterning.set({stroke: canvasPencilColor.value})
+					break
+					default :
+						if(operationMode.value == 'fill'){
+							currentPatterning.set({fill: canvasPencilColor.value})
+						}else if (operationMode.value == 'border'){
+							currentPatterning.set({fill: 'transparent',stroke: canvasPencilColor.value,strokeWidth: canvasPencilWidth.value})
+						}
+						if(JSON.stringify(downPoint) == JSON.stringify(upPoint)){
+							canvas.remove(currentPatterning)
+						}
+					break
+				}
+				if(operation.value == 'fold'){
+					canvas.forEachObject((obj) =>obj.selectable = false);
+					canvas.bringToFront(polyLineBtn);//设置优先级最高
+				}else{
+					createPatterningIs = false
+					clearPatterning()//临时图形置为空并且添加撤回对象里面
+				}
+			}
+		}
+		let setHDExport = ()=>{
+			let selectedObject = canvas.getActiveObject();
+			if (selectedObject && selectedObject.type === 'image') {
+				// 如果是图片对象，则可以对其进行操作
+				let selectedImage = selectedObject;
+				let img = new Image
+				img.src = selectedImage.getSrc()
+				img.onload = ()=>{
+					console.log(img.width,img.height);
+				}
+				// 输出图片对象的 URL
+				console.log('Selected image URL:', selectedImage.getSrc());
+			} else {
+				console.log('No image selected.');
 			}
-			isLoadCanvas = true;
-			canvas.loadFromJSON(canvasState.value[index], () => {
-				canvas.forEachObject(function(obj) {
-					obj.cornerSize = 10
-					obj.transparentCorners=false
-				});
-				canvas.renderAll();
-				stateIndex.value = index;
-			});
 		}
         onMounted(() => {});
 
@@ -705,7 +976,15 @@ export default defineComponent({
 			multiselect,
 			onDragstart,
 			historyState,
-			stateIndex,
+			operation,
+			operationMode,
+			setOperation,
+			setOperationMode,
+			canvasPencilColor,
+			canvasPencilWidth,
+			setPencilColor,
+			setPencilWidth,
+			setHDExport,
         };
     },
     data(prop) {
@@ -780,8 +1059,11 @@ export default defineComponent({
 			margin-top: 2rem;
 			display: flex;
 			justify-content: space-between;
-			padding-right: 2rem;
 			cursor: pointer;
+			position: sticky;
+			top: 1rem;
+			background: #f9fafb;
+			z-index: 2;
 			.icon{
 				transition: all .3s;
 			}
@@ -812,20 +1094,27 @@ export default defineComponent({
                     width: 10em;
                 }
             }
-			.exportCanvasBox_img.closeNav{
-				max-height: 1000rem;
+			.exportCanvasBox_left_item.closeNav{
+				// max-height: 1000rem;
+				height: auto;
 			}
         }
 		.exportCanvasBox_left::-webkit-scrollbar,
 		.exportCanvasBox_right::-webkit-scrollbar{display: none;}
         .exportCanvasBox_left {
-            
-            .exportCanvasBox_img {
-				transition: all .3s;
+				padding-right: 1rem;
+			.exportCanvasBox_title {
+				padding-right: 2rem;
+			}
+            .exportCanvasBox_left_item{
 				overflow: hidden;
-				// height: auto;
-				max-height: 0;
+				transition: all .3s;
+				// max-height: 0;
+				height: 0;
 				transform: translate3d(0, 0, 0);
+			}
+            .exportCanvasBox_img {
+				// height: auto;
 				
                 .exportCanvasBox_allItem {
                     display: flex;
@@ -862,10 +1151,35 @@ export default defineComponent({
 					}
                 }
             }
+			.exportCanvasBox_left_tool{
+				.exportCanvasBox_left_tool_item{
+					display: flex;
+					flex-wrap: wrap;
+					justify-content: space-between;
+					margin-bottom: 1rem;
+					&.leftAlign{
+						justify-content: flex-start;
+					}
+					i{
+						font-size: 2.5rem;
+						cursor: pointer;
+						width: 4rem;
+						height: 4rem;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						&.active{
+							border: 1px solid;
+							border-radius: .4rem;
+						}
+					}
+				}
+			}
         }
 		.exportCanvasBox_right{
 			display: flex;
 			flex-direction: column;
+			padding-left: 1rem;
 			position: relative;
 			.exportCanvasBox_right_definition{
 				// display: flex;