diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index 63f4717b..626b996f 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -714,20 +714,23 @@ li {
 .design_detail_modal_component .ant-upload-list-picture-card-container,
 .designOpenrtion_modal .ant-upload-list-picture-card-container,
 .UpgradePlan_modal .ant-upload-list-picture-card-container,
-.refund_reason .ant-upload-list-picture-card-container {
+.refund_reason .ant-upload-list-picture-card-container,
+.Export .ant-upload-list-picture-card-container {
   display: none !important;
 }
 .design_detail_modal_component .ant-upload-picture-card-wrapper,
 .designOpenrtion_modal .ant-upload-picture-card-wrapper,
 .UpgradePlan_modal .ant-upload-picture-card-wrapper,
-.refund_reason .ant-upload-picture-card-wrapper {
+.refund_reason .ant-upload-picture-card-wrapper,
+.Export .ant-upload-picture-card-wrapper {
   width: auto;
   vertical-align: top;
 }
 .design_detail_modal_component .subitOkPreviewBtn,
 .designOpenrtion_modal .subitOkPreviewBtn,
 .UpgradePlan_modal .subitOkPreviewBtn,
-.refund_reason .subitOkPreviewBtn {
+.refund_reason .subitOkPreviewBtn,
+.Export .subitOkPreviewBtn {
   background-color: #38205b;
   color: #fff;
   cursor: pointer;
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index 50a21c2e..82dc3192 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -798,7 +798,7 @@ input:focus{
 		}
 	}
 }
-.design_detail_modal_component,.designOpenrtion_modal,.UpgradePlan_modal,.refund_reason{
+.design_detail_modal_component,.designOpenrtion_modal,.UpgradePlan_modal,.refund_reason,.Export{
 	.ant-upload-list-picture-card-container{
 		display: none !important;
 	}
diff --git a/src/component/HomePage/ExportModel.vue b/src/component/HomePage/ExportModel.vue
index 01876934..272f3605 100644
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -20,43 +20,35 @@
 		</div> -->
         <div class="exportCanvasBox">
             <div class="exportCanvasBox_left">
-                <div class="exportCanvasBox_title">Canvas Title</div>
+                <div class="exportCanvasBox_title">Canvas Size</div>
                 <label>
                     <div>Width:</div>
-                    <input
-                        type="number"
-                        @input="setMaxInput('width', 500)"
-                        v-model="canvasWH.width"
-                    />
+                    <input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
                 </label>
                 <label>
                     <div>Height:</div>
-                    <input
-                        type="number"
-                        @input="setMaxInput('height', 1000)"
-                        v-model="canvasWH.height"
-                    />
+                    <input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height"/>
                 </label>
-                <div class="exportCanvasBox_title" @click.stop="setCloseNav()">
+                <div class="exportCanvasBox_title" @click.stop="setCloseNav(0)">
 					Canvas Nav
 					<div
                         :class="[
                             'icon',
                             'iconfont',
                             'icon-xiala',
-							closeNav?'icon-rotate':''
+							closeNav==0?'icon-rotate':''
                         ]"
                     >
 					</div>
 				</div>
-                <div class="exportCanvasBox_img" :class="{closeNav:'closeNav'}">
+                <div class="exportCanvasBox_img" :class="{'closeNav' :closeNav==0}">
                     <div
                         class="exportCanvasBox_allItem"
                         v-for="(item,key) in allBoardData"
                     >
                         <div v-if="item[0]" class="exportCanvasBox_intro">{{ key }}</div>
-
-						<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'"  v-for="colorItem in item">
+						<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'"  v-for="colorItem in item" draggable="true" @dragstart="onDragstart(key,colorItem)">
+							<img src="" alt="">
 							<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
 							<div>{{colorItem.tcx}}</div>
 							<div>{{colorItem.name}}</div>
@@ -67,20 +59,50 @@
 							:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'']"
                             v-for="imgItem in item"
 							draggable
-							@dragstart="onDragstart(key)"
+							@dragstart="onDragstart(key,imgItem)"
                         >
                             <img :src="key == 'likeDesignCollectionList'?imgItem.designOutfitUrl:imgItem.imgUrl" alt="" />
                         </div>
                     </div>
                 </div>
+				<div class="exportCanvasBox_title" @click.stop="setCloseNav(1)">
+					Canvas Tool
+					<div
+                        :class="[
+                            'icon',
+                            'iconfont',
+                            'icon-xiala',
+							closeNav==1?'icon-rotate':''
+                        ]"
+                    >
+					</div>
+				</div>
             </div>
             <div class="exportCanvasBox_center">
                 <!-- <canvas ref="canvasDom" id="exportCanvas"></canvas> -->
             </div>
             <!-- <ExportNewCoolection ref="ExportNewCoolection"></ExportNewCoolection> -->
             <div class="exportCanvasBox_right">
-                <div class="" @click="setExport">export</div>
-                <div class="" @click="multiselect">all</div>
+                <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>
+						<input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
+					</label>
+					<label>
+                    <div>Height:</div>
+						<input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height" />
+					</label>
+				</div>
+				<div class="" @click="multiselect">all</div>
+				<div class="exportCanvasBox_right_btn">
+					<div class="subitOkPreviewBtn" @click="setExport">HD Export</div>
+					<div class="subitOkPreviewBtn" @click="setExport">Export</div>
+				</div>
             </div>
             <div class="mark_loading" v-show="isShowMark">
                 <a-spin size="large" />
@@ -89,17 +111,10 @@
     </a-modal>
 </template>
 <script>
-import {
-    defineComponent,
-    computed,
-    h,
-    ref,
-    nextTick,
-    inject,
-    reactive,
-    onMounted,
+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";
@@ -124,7 +139,6 @@ export default defineComponent({
         });
 		canvasWH.value.width = [window.innerWidth/2.4]
 		canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
-		console.log(canvasWH.value.width);
         let sketch = computed(() => {
             return store.state.HomeStoreModule.showSketchList;
         });
@@ -145,9 +159,16 @@ export default defineComponent({
 			y: 0,
 			height: 0,
 		};
+		let sketchGrouping = 3; //sketch分组
+		let likeDesign = 4; //整体图分组
+		let disposeMoodboardShow = true;
+
+
+		let canvasState = ref([])//存放canvas操作
+		let stateIndex = ref(-1)//表示撤回数量
+		let isLoadCanvas = false//撤回或者反撤回false为撤回
         let init = () => {
             showUpgradePlan.value = true;
-			console.log(position);
             nextTick().then(async () => {
                 allBoardData.value.likeDesignCollectionList =
                     likeDesignCollectionList;
@@ -164,9 +185,18 @@ export default defineComponent({
                     width: canvasWH.value.width,
                     height: canvasWH.value.height,
                     isDrawingMode: false, // 开启绘图模式
+					// preserveObjectStacking: true,
                 });
-				canvasOnDrop()
-                let disposeMoodboardShow = true;
+				canvasOnDrop()//开启鼠标到画布事件
+				setRemoveImage()//设置元素删除
+				canvas.on("object:modified", ()=>{
+					updateCanvasState()
+				});
+				canvas.on('selection:created', ()=>{
+					updateCanvasState('created')
+				});
+				// canvas.on("object:added", updateCanvasState);
+				// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
                 let arr = [
                     "disposeMoodboard",
                     "moodboardFiles",
@@ -176,8 +206,7 @@ export default defineComponent({
                     "likeDesignCollectionList",
                 ];
                 
-                let sketchGrouping = 3; //sketch分组
-                let likeDesign = 4; //整体图分组
+                
                 let oldKey = "";
                 let margin = 20; //每个图形边距
                 // arr.forEach((item,index)=>{
@@ -185,98 +214,25 @@ export default defineComponent({
                     for (const key in allBoardData.value) {
                         if (item == key) {
                             //循环渲染顺序
-                            let setImgWidth = canvasWH.value.width; //这是设置画布等宽
+							let imgWidth = setImageWidth(key); //这是设置画布等宽
                             let sketchGroupingItem = [];
-                            if (
-                                disposeMoodboardShow &&
-                                item == "disposeMoodboard" &&
-                                allBoardData.value[key].length != 0 &&
-                                allBoardData.value[key][0] != null
-                            ) {
-                                //如果是mood 需要判断用户是否点击layout
-                                disposeMoodboardShow = false;
-                            }
-                            if (
+							if (
                                 item == "moodboardFiles" &&
                                 !disposeMoodboardShow
                             ) {
                                 continue;
                             }
-                            if (item == "printboardFiles") {
-                                setImgWidth = canvasWH.value.width / 8;
-                            }
-                            if (item == "sketchboardFiles") {
-                                setImgWidth =
-                                    (canvasWH.value.width -
-                                        (sketchGrouping - 1) * 20) /
-                                    sketchGrouping;
-                            }
-                            if (item == "likeDesignCollectionList") {
-                                setImgWidth =
-                                    (canvasWH.value.width -
-                                        (likeDesign - 1) * 20) /
-                                    likeDesign;
-                            }
                             for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
                                 await new Promise((resolve, reject) => {
                                     if (key == "colorBoards") {
-                                        var text = new fabric.Text(
-                                            allItem.tcx,
-                                            {
-                                                left: 0,
-                                                top: 60,
-                                                fontSize: 14,
-                                                fontFamily: "Arial",
-                                                textAlign: "left",
-                                                fill: "black",
-                                            }
-                                        );
-                                        let text1 = new fabric.Text(
-                                            allItem.name,
-                                            {
-                                                left: 0,
-                                                top: 80,
-                                                width: 20,
-                                                fontSize: 14,
-                                                fontFamily: "Arial",
-                                                textAlign: "left",
-                                            }
-                                        );
-                                        let width =
-                                            110 > text1.width
-                                                ? 110
-                                                : text1.width;
-                                        var color = new fabric.Rect({
-                                            width: width,
-                                            height: 60,
-                                            textAlign: "left",
-                                            fill: `rgb(${allItem.rgbValue.r},${allItem.rgbValue.g},${allItem.rgbValue.b})`,
-                                        });
-                                        if (
-                                            position.x + width >
-                                                canvasWH.value.width ||
-                                            oldKey != key
-                                        ) {
-                                            position.x = 0;
-                                            position.y += position.height;
-                                        }
-                                        var group = new fabric.Group(
-                                            [color, text, text1],
-                                            {
-                                                left: position.x,
-                                                top: position.y,
-                                                width: width,
-                                                fill: "rgb(255,255,255)",
-                                                cornerSize: 10, // 选中时，角的大小为20
-                                                transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
-                                                stroke: "#212121",
-                                                strokeWidth: 1,
-                                            }
-                                        );
-                                        // 将矩形对象添加到 canvas 中
-                                        canvas.add(group);
+										let rect = setGroup(allItem)
+										if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
+											position.x = 0;
+											position.y += position.height;
+										}
+										let group = setCanvasColor(position.y,position.x,rect)
                                         oldKey = key;
-                                        position.x += width + margin;
+                                        position.x += rect.width + margin;
                                         position.height = group.height + margin;
                                         resolve();
                                     } else {
@@ -285,176 +241,179 @@ export default defineComponent({
                                             itemCanvasImg =
                                                 allItem.designOutfitUrl;
                                         }
-                                        fabric.Image.fromURL(
-                                            itemCanvasImg,
-                                            (img) => {
-                                                let proportion = img.height / img.width; //计算图形宽高比例
-                                                let scaleWH = setImgWidth / img.width; //计算放到画布上缩小倍率
-                                                if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
-                                                    position.x = 0;
-                                                    position.y += position.height;
-                                                }
-                                                img.set({
-                                                    // width: setImgWidth/img.width,
-                                                    // height: canvasWH.value.height/img.height,
-                                                    left: position.x,
-                                                    top: position.y,
-                                                    scaleX:
-                                                        setImgWidth / img.width,
-                                                    scaleY:(img.width * proportion * scaleWH) / img.height,
-                                                    cornerSize: 10, // 选中时，角的大小为20
-                                                    // lockRotation:true,
-                                                    // lockScalingX:true,
-                                                    lockRotation: true,
-                                                    crossOrigin: "anonymous",
-                                                    transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
-                                                    // cornerColor: "#a1de93", // 选中时，角的颜色是 青色
-                                                });
-                                                position.height = img.height * scaleWH + margin;
-                                                if (key == "sketchboardFiles") {
-                                                    position.x +=
-                                                        img.width * scaleWH +
-                                                        margin;
-                                                    if (
-                                                        sketchGroupingItem.length >=
-                                                        3
-                                                    ) {
-                                                    } else {
-                                                        sketchGroupingItem.push(
-                                                            JSON.parse(
-                                                                JSON.stringify(
-                                                                    position
-                                                                )
-                                                            )
-                                                        );
-                                                    }
-                                                    if (sketchGroupingItem.length >=3) {
-                                                        let sketchXyIndex = {
-                                                            maxIndex: 0,
-                                                            maxNum: 9999999999,
-                                                            minNum: 0,
-                                                            minIndex: 0,
-                                                        };
-                                                        sketchGroupingItem.forEach(
-                                                            (sketchItem,sketchIndex) => {
-                                                                if (sketchItem.height <sketchXyIndex.maxNum) {
-                                                                    sketchXyIndex.maxNum = sketchItem.height;
-                                                                    sketchXyIndex.maxIndex = sketchIndex;
-                                                                }
-                                                                if (sketchItem.height > sketchXyIndex.minNum) {
-                                                                    sketchXyIndex.minNum = sketchItem.height;
-                                                                    sketchXyIndex.minIndex = sketchIndex;
-                                                                }
-                                                            }
-                                                        );
-                                                        if (allBoardData.value[key].length == allItemIndex + 1) {
-                                                            position = sketchGroupingItem[sketchXyIndex.minIndex];
-                                                        } else {
-                                                            position = sketchGroupingItem[ sketchXyIndex.maxIndex];
-                                                            position.y += position.height;
-                                                            position.x -= img.width * scaleWH + margin;
-                                                        }
-                                                    }
-                                                } else {
-                                                    position.x += img.width * scaleWH;
-                                                }
-                                                img.lock_rotation = true;
-                                                canvas.add(img);
-                                                oldKey = key;
-                                                resolve();
-                                            },
-                                            { crossOrigin: "Anonymous" }
-                                        );
+                                        fabric.Image.fromURL(itemCanvasImg,(img) => {
+											let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
+											if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
+												position.x = 0;
+												position.y += position.height;
+											}
+											setCanvasImage(img,key,position.x,position.y)//设置图片
+												
+											position.height = img.height * scaleWH + margin;
+											if (key == "sketchboardFiles") {
+												position.x +=
+													img.width * scaleWH +
+													margin;
+												if (sketchGroupingItem.length >= 3) {
+												} else {
+													sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
+												}
+												if (sketchGroupingItem.length >=3) {
+													let sketchXyIndex = {
+														maxIndex: 0,
+														maxNum: 9999999999,
+														minNum: 0,
+														minIndex: 0,
+													};
+													sketchGroupingItem.forEach(
+														(sketchItem,sketchIndex) => {
+															if (sketchItem.height <sketchXyIndex.maxNum) {
+																sketchXyIndex.maxNum = sketchItem.height;
+																sketchXyIndex.maxIndex = sketchIndex;
+															}
+															if (sketchItem.height > sketchXyIndex.minNum) {
+																sketchXyIndex.minNum = sketchItem.height;
+																sketchXyIndex.minIndex = sketchIndex;
+															}
+														}
+													);
+													if (allBoardData.value[key].length == allItemIndex + 1) {
+														position = sketchGroupingItem[sketchXyIndex.minIndex];
+													} else {
+														position = sketchGroupingItem[ sketchXyIndex.maxIndex];
+														position.y += position.height;
+														position.x -= img.width * scaleWH + margin;
+													}
+												}
+											} else {
+												position.x += img.width * scaleWH;
+											}
+											img.lock_rotation = true;
+											canvas.add(img);
+											oldKey = key;
+											resolve();
+										},{ crossOrigin: "Anonymous" });
                                     }
                                 });
                             }
                         }
                     }
+					if(position.y+position.height>canvasWH.value.height){
+						canvasWH.value.height =  Math.floor(position.y+position.height)
+						canvas.setHeight(canvasWH.value.height);
+					}
                 }
             });
         };
-		let setCanvasImage = (itemCanvasImg)=>{
-			fabric.Image.fromURL(
-				itemCanvasImg,
-				(img) => {
-					let proportion = img.height / img.width; //计算图形宽高比例
-					let scaleWH = setImgWidth / img.width; //计算放到画布上缩小倍率
-					if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
-						position.x = 0;
-						position.y += position.height;
-					}
-					img.set({
-						// width: setImgWidth/img.width,
-						// height: canvasWH.value.height/img.height,
-						left: position.x,
-						top: position.y,
-						scaleX:
-							setImgWidth / img.width,
-						scaleY:(img.width * proportion * scaleWH) / img.height,
-						cornerSize: 10, // 选中时，角的大小为20
-						// lockRotation:true,
-						// lockScalingX:true,
-						lockRotation: true,
-						crossOrigin: "anonymous",
-						transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
-						// cornerColor: "#a1de93", // 选中时，角的颜色是 青色
-					});
-					position.height = img.height * scaleWH + margin;
-					if (key == "sketchboardFiles") {
-						position.x +=
-							img.width * scaleWH +
-							margin;
-						if (
-							sketchGroupingItem.length >=
-							3
-						) {
-						} else {
-							sketchGroupingItem.push(
-								JSON.parse(
-									JSON.stringify(
-										position
-									)
-								)
-							);
-						}
-						if (sketchGroupingItem.length >=3) {
-							let sketchXyIndex = {
-								maxIndex: 0,
-								maxNum: 9999999999,
-								minNum: 0,
-								minIndex: 0,
-							};
-							sketchGroupingItem.forEach(
-								(sketchItem,sketchIndex) => {
-									if (sketchItem.height <sketchXyIndex.maxNum) {
-										sketchXyIndex.maxNum = sketchItem.height;
-										sketchXyIndex.maxIndex = sketchIndex;
-									}
-									if (sketchItem.height > sketchXyIndex.minNum) {
-										sketchXyIndex.minNum = sketchItem.height;
-										sketchXyIndex.minIndex = sketchIndex;
-									}
-								}
-							);
-							if (allBoardData.value[key].length == allItemIndex + 1) {
-								position = sketchGroupingItem[sketchXyIndex.minIndex];
-							} else {
-								position = sketchGroupingItem[ sketchXyIndex.maxIndex];
-								position.y += position.height;
-								position.x -= img.width * scaleWH + margin;
-							}
-						}
-					} else {
-						position.x += img.width * scaleWH;
-					}
-					img.lock_rotation = true;
-					canvas.add(img);
-					oldKey = key;
-					resolve();
-				},
-				{ crossOrigin: "Anonymous" }
-			);
+		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
+			// })
+				target.forEach((item)=>{
+					var canvas = item.canvas;
+					canvas.remove(item);
+				})
+				canvas.requestRenderAll();
+				canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
+			}
+			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"
+			// 创建删除图片元素
+			let deleteImg = document.createElement('img')
+			deleteImg.src = deleteIcon
+			function renderIcon(icon) {
+				return function (ctx, left, top, styleOverride, fabricObject) {
+					var size = this.cornerSize;
+					ctx.save();
+					ctx.translate(left, top);
+					ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
+					ctx.drawImage(icon, -size/3, -size/3, size/1.5, size/1.5);
+					ctx.restore();
+				}
+			}
+			// 删除按钮控件
+			fabric.Object.prototype.controls.deleteControl = new fabric.Control({
+				x: 0.5,
+				y: -0.5,
+				offsetY: -16,
+				offsetX: 16,
+				cursorStyle: 'pointer',
+				mouseUpHandler: deleteObject,
+				render: renderIcon(deleteImg),
+				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 (
+				disposeMoodboardShow &&
+				key == "disposeMoodboard" &&
+				allBoardData.value[key].length != 0 &&
+				allBoardData.value[key][0] != null
+			) {
+				//如果是mood 需要判断用户是否点击layout
+				disposeMoodboardShow = false;
+			}
+			
+			if (key == "printboardFiles") {
+				imgWidth = canvasWH.value.width / 8;
+			}
+			if (key == "sketchboardFiles"||key == 'moodboardFiles') {
+				imgWidth =
+					(canvasWH.value.width -
+						(sketchGrouping - 1) * 20) /
+					sketchGrouping;
+			}
+			if (key == "likeDesignCollectionList") {
+				imgWidth =
+					(canvasWH.value.width -
+						(likeDesign - 1) * 20) /
+					likeDesign;
+			}
+			return imgWidth
+		}
+		let setCanvasImage = (img,key,left,top)=>{
+			let proportion = img.height / img.width; //计算图形宽高比例
+			let imgWidth = setImageWidth(key)
+			let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
+			img.set({
+				// width: imgWidth/img.width,
+				// height: canvasWH.value.height/img.height,
+				left,
+				top,
+				scaleX:
+					imgWidth / img.width,
+				scaleY:(img.width * proportion * scaleWH) / img.height,
+				cornerSize: 10, // 选中时，角的大小为20
+				// lockRotation:true,
+				// lockScalingX:true,
+				lockRotation: true,
+				transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
+				// cornerColor: "#a1de93", // 选中时，角的颜色是 青色
+			});
+		}
+		
         //设置导出
         let setExport = async () => {
             var imageDataURL = canvas.toDataURL({
@@ -501,17 +460,7 @@ export default defineComponent({
             }
             let dataList = [];
             likeDesignCollectionList.value.forEach((item) => {
-                // let nameTail = item?.designOutfitUrl
-                //     ?.split(".")
-                //     .pop()
-                //     .split("?")
-                //     .shift();
-                // let data = {
-                //     imgUrl: item.designOutfitUrl,
-                //     name: "result" + index + "." + nameTail,
-                // };
                 dataList.push(item.designItemId);
-                // img.push(data);
                 index++;
             });
             let mannequinList = [];
@@ -589,7 +538,11 @@ export default defineComponent({
                 // maxNum = window.innerWidth < 1100 ? 400 : maxNum;
 				maxNum = [window.innerWidth/2.4]
 				maxNum = maxNum.map(num => Math.round(num / 10) * 10)[0];
-            }
+            }else if(str == 'height'){
+				if(position.y+position.height>maxNum){
+					maxNum = Math.floor(position.y+position.height)
+				}
+			}
             if (str == "width" && canvasWH.value.width >= maxNum) {
                 canvasWH.value.width = maxNum;
             } else if (str == "height" && canvasWH.value.height >= maxNum) {
@@ -599,12 +552,19 @@ export default defineComponent({
             canvas.setWidth(canvasWH.value.width);
         };
 
-		let closeNav = ref(false)
-		let setCloseNav = ()=>{
-			closeNav.value = !closeNav.value
+		let closeNav = ref(0)
+		let setCloseNav = (num)=>{
+			if(closeNav.value == num){
+				closeNav.value = -1
+			}else{
+				closeNav.value = num
+			}
 		}
-		
-		function multiselect() {
+		// let multiselect = ()=>{
+		// 	console.log(canvas);
+		// 	multiselectJS(canvas)
+		// }
+		function multiselect() {//获取整体宽高
 			canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
 			const sel = new fabric.ActiveSelection(canvas.getObjects(), {
 				canvas
@@ -621,50 +581,110 @@ export default defineComponent({
 			}
 
 		}
-		let currentType = ref()
-		let onDragstart = (type)=>{
-			console.log(type);
-			currentType.value = type
+		let currentType = ref({
+			type:'',
+			data:'',
+		})
+		let onDragstart = (type,imgItem)=>{
+			currentType.value.type = type
+			currentType.value.data = imgItem
 		}
 		let canvasOnDrop = ()=>{
-			canvas.on('drop', function(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) {
-					case 'disposeMoodboard':
-					createRect(pointerVpt.y, pointerVpt.x)
-					break
-					case 'circle':
-					createCircle(pointerVpt.y, pointerVpt.x)
-					break
-					case 'img':
-					createImg(pointerVpt.y, pointerVpt.x)
-					break
-				}
-				// 创建完元素，把当前操作的元素类型设置回 null
-				currentType.value = null
-				})
-
-				// 创建矩形
-				function createRect(top, left) {
-				canvas.add(new fabric.Rect({
-					top,
-					left,
-					width: 60,
-					height: 60,
-					fill: 'pink'
-				}))
+			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
+				currentType.value.type = null
+				currentType.value.data = null
+			})
+		}
+		let setGroup = (data)=>{
+			var text = new fabric.Text(data.tcx,{
+				left: 0,
+				top: 60,
+				fontSize: 14,
+				fontFamily: "Arial",
+				textAlign: "left",
+				fill: "black",
+			});
+			let text1 = new fabric.Text(data.name,{
+				left: 0,
+				top: 80,
+				width: 20,
+				fontSize: 14,
+				fontFamily: "Arial",
+				textAlign: "left",
+			});
+			let width = 110 > text1.width ? 110 : text1.width;
+			var color = new fabric.Rect({
+				width: width,
+				height: 60,
+				textAlign: "left",
+				fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
+			});
+			let rect = {text,text1,color,width}
+			return rect
+		}
+		let setCanvasColor = (top,left,rect)=>{
+			var group = new fabric.Group([rect.color, rect.text, rect.text1],{
+				left,
+				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 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" });
+		}
+		//撤回
+		let historyState = (index)=> {
+			if(index<=0){
+				index = 0
+			}else if (index >canvasState.value.length){
+				index = canvasState.value.length-1
+			}
+			isLoadCanvas = true;
+			canvas.loadFromJSON(canvasState.value[index], () => {
+				canvas.renderAll();
+				stateIndex.value = index;
+			});
 		}
-		
         onMounted(() => {});
 
         return {
@@ -680,6 +700,8 @@ export default defineComponent({
 			setCloseNav,
 			multiselect,
 			onDragstart,
+			historyState,
+			stateIndex,
         };
     },
     data(prop) {
@@ -700,7 +722,9 @@ export default defineComponent({
         // 	}
         // },
     },
-    methods: {},
+    methods: {
+		
+	},
 });
 </script>
 <style lang="less" scoped>
@@ -757,8 +781,8 @@ export default defineComponent({
 			.icon{
 				transition: all .3s;
 			}
-			&.icon-rotate{
-				transform: rotate(90deg);
+			.icon-rotate{
+				transform: rotate(-180deg);
 			}
         }
 		.exportCanvasBox_intro{
@@ -772,11 +796,11 @@ export default defineComponent({
 			width: 25rem;
 			height: 100%;
 			overflow-x: hidden;
-        }
-        .exportCanvasBox_left {
-            label {
+			label {
                 cursor: pointer;
                 display: flex;
+				align-items: center;
+				margin-bottom: 1rem;
                 div {
                     width: 5rem;
                 }
@@ -784,13 +808,21 @@ export default defineComponent({
                     width: 10em;
                 }
             }
+			.exportCanvasBox_img.closeNav{
+				max-height: 1000rem;
+			}
+        }
+		.exportCanvasBox_left::-webkit-scrollbar,
+		.exportCanvasBox_right::-webkit-scrollbar{display: none;}
+        .exportCanvasBox_left {
+            
             .exportCanvasBox_img {
-				transition: .3s all;
+				transition: all .3s;
 				overflow: hidden;
-				height: auto;
-				&.closeNav{
-					// height: 0;
-				}
+				// height: auto;
+				max-height: 0;
+				transform: translate3d(0, 0, 0);
+				
                 .exportCanvasBox_allItem {
                     display: flex;
                     flex-wrap: wrap;
@@ -811,6 +843,12 @@ export default defineComponent({
 						.exportCanvasBox_item_BGcolor{
 							height: 5rem;
 						}
+						div{
+							// -webkit-user-select:none; /* Safari */
+							// -moz-user-select:none; /* Firefox */
+							// -ms-user-select:none; /* IE10+/Edge */
+							// user-select:none; /* Standard syntax */
+						}
 					}
 					.exportCanvasBox_item_dispose{
 						img{
@@ -821,6 +859,23 @@ export default defineComponent({
                 }
             }
         }
+		.exportCanvasBox_right{
+			display: flex;
+			flex-direction: column;
+			position: relative;
+			.exportCanvasBox_right_definition{
+				// display: flex;
+				flex: 1;
+			}
+			.exportCanvasBox_right_btn{
+				display: flex;
+				justify-content: space-between;
+				.subitOkPreviewBtn{
+					position: initial;
+					transform: none;
+				}
+			}
+		}
         .exportCanvasBox_center {
             height: 100%;
             overflow-x: hidden;
diff --git a/src/component/HomePage/Header.vue b/src/component/HomePage/Header.vue
index 3664db87..23e14fc3 100644
--- a/src/component/HomePage/Header.vue
+++ b/src/component/HomePage/Header.vue
@@ -36,7 +36,7 @@
 				<div
 					class="trialApproval button_second credits hideChecked"
                 >
-					Credits : 
+					Credits:&nbsp;
 					<span :title="credits">
 						<!-- <div>{{ String(credits.value[credits.value.legnth-1]) }}</div> -->
 						<div class="credits_item" v-for="item in String(credits)" :style="{'transform': 'translateY('+item*-100+'%)'}">
diff --git a/src/tool/canvasDrawing.js b/src/tool/canvasDrawing.js
index e69de29b..9d59db82 100644
--- a/src/tool/canvasDrawing.js
+++ b/src/tool/canvasDrawing.js
@@ -0,0 +1,19 @@
+function multiselectJS(canvas) {//获取整体宽高
+	canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
+	const sel = new fabric.ActiveSelection(canvas.getObjects(), {
+		canvas
+	})
+	// console.log(sel)
+	canvas.setActiveObject(sel)
+	canvas.requestRenderAll()
+	const activeObject = canvas.getActiveObject(); // 获取当前选中的整体对象
+	if (activeObject && activeObject.type === 'activeSelection') {
+		const totalWidth = activeObject.width * activeObject.scaleX;
+		const totalHeight = activeObject.height * activeObject.scaleY;
+		return {totalWidth,totalHeight}
+		console.log('Total Width:', totalWidth);
+		console.log('Total Height:', totalHeight);
+	}
+
+}
+export default {multiselectJS,}
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 729c5873..67beba15 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1011,125 +1011,125 @@ export default defineComponent({
 			exportModel.init()
 		},
 		//导出合成图
-		async exportCanvas() {
-			let collectionReview: any = document.querySelector(
-				"#exportNewCoolection"
-			);
-			let rightContentImgBlock: any = document.querySelector(
-				"#right_content_img_block"
-			);
-			if(this.driver__.driver){
-				nextTick().then(()=>{
-					driverObj__.moveNext();
-				})
-			}
+		// async exportCanvas() {
+		// 	let collectionReview: any = document.querySelector(
+		// 		"#exportNewCoolection"
+		// 	);
+		// 	let rightContentImgBlock: any = document.querySelector(
+		// 		"#right_content_img_block"
+		// 	);
+		// 	if(this.driver__.driver){
+		// 		nextTick().then(()=>{
+		// 			driverObj__.moveNext();
+		// 		})
+		// 	}
 			
-			let a = document.createElement("a");
-			// this.isShowMark = true;
-			let img:any = []
-			await html2canvas(collectionReview, { useCORS: true, scale: 3 }).then(
-				async (canvas) => {
-					let blob: any = dataURLtoBlob(
-						canvas.toDataURL("image/png")
-					);
-					let allBoardData: any =
-						this.store.state.UploadFilesModule.allBoardData;
-					let index = 0;
-					img.push({
-							imgUrl: URL.createObjectURL(blob),
-							name: "collection.png",
-						})
-					let num = 0
-					for (let key in allBoardData) {
-						if (key !== "colorBoards" && key !== "moodTemplateId") {
-							if(this.exportNav[num]?.change || key == 'disposeMoodboard'){
-								for (let item of allBoardData[key]) {
-									if(key == 'disposeMoodboard' && allBoardData[key][0]==undefined){
-										break
-									}
-									let nameTail = item?.imgUrl?.split(".").pop().split("?").shift();
-									let data = {
-										imgUrl: item.imgUrl,
-										name:
-											item?.resData?.name +
-											index +
-											"." +
-											nameTail,
-									};
-									img.push(data);
-									index++;
-								}
-							}else{
-							}
-							num++
-						}
-					}
-					let dataList:any = []
-					this.likeDesignCollectionList.forEach((item:any)=>{
-						let nameTail = item?.designOutfitUrl?.split(".").pop().split("?").shift();
-						let data = {
-							imgUrl: item.designOutfitUrl,
-							name:
-								'result' +
-								index +
-								"." +
-								nameTail,
-						};
-						dataList.push(item.designItemId)
-						img.push(data);
-						index++;
-					})
-					let mannequinList:any = []
-					await Https.axiosPost(Https.httpUrls.designGetModel, dataList)
-						.then((rv: any) => {
-							mannequinList = rv
-							})
-						.catch((rv) => {
-						});
+		// 	let a = document.createElement("a");
+		// 	// this.isShowMark = true;
+		// 	let img:any = []
+		// 	await html2canvas(collectionReview, { useCORS: true, scale: 3 }).then(
+		// 		async (canvas) => {
+		// 			let blob: any = dataURLtoBlob(
+		// 				canvas.toDataURL("image/png")
+		// 			);
+		// 			let allBoardData: any =
+		// 				this.store.state.UploadFilesModule.allBoardData;
+		// 			let index = 0;
+		// 			img.push({
+		// 					imgUrl: URL.createObjectURL(blob),
+		// 					name: "collection.png",
+		// 				})
+		// 			let num = 0
+		// 			for (let key in allBoardData) {
+		// 				if (key !== "colorBoards" && key !== "moodTemplateId") {
+		// 					if(this.exportNav[num]?.change || key == 'disposeMoodboard'){
+		// 						for (let item of allBoardData[key]) {
+		// 							if(key == 'disposeMoodboard' && allBoardData[key][0]==undefined){
+		// 								break
+		// 							}
+		// 							let nameTail = item?.imgUrl?.split(".").pop().split("?").shift();
+		// 							let data = {
+		// 								imgUrl: item.imgUrl,
+		// 								name:
+		// 									item?.resData?.name +
+		// 									index +
+		// 									"." +
+		// 									nameTail,
+		// 							};
+		// 							img.push(data);
+		// 							index++;
+		// 						}
+		// 					}else{
+		// 					}
+		// 					num++
+		// 				}
+		// 			}
+		// 			let dataList:any = []
+		// 			this.likeDesignCollectionList.forEach((item:any)=>{
+		// 				let nameTail = item?.designOutfitUrl?.split(".").pop().split("?").shift();
+		// 				let data = {
+		// 					imgUrl: item.designOutfitUrl,
+		// 					name:
+		// 						'result' +
+		// 						index +
+		// 						"." +
+		// 						nameTail,
+		// 				};
+		// 				dataList.push(item.designItemId)
+		// 				img.push(data);
+		// 				index++;
+		// 			})
+		// 			let mannequinList:any = []
+		// 			await Https.axiosPost(Https.httpUrls.designGetModel, dataList)
+		// 				.then((rv: any) => {
+		// 					mannequinList = rv
+		// 					})
+		// 				.catch((rv) => {
+		// 				});
 						
-					mannequinList.forEach((item:any) => {
-						let nameTail = item?.split(".").pop().split("?").shift();
-						let data = {
-							imgUrl: item,
-							name:
-								'mannequin' +
-								index +
-								"." +
-								nameTail,
-						};
-						img.push(data);
-						index++;	
-					});
-					// a.setAttribute('href', URL.createObjectURL(blob));
-					// a.setAttribute('download', `collection.png`);
-					// a.click();
-				}
-			);
-			//单独导出模特图
-			// await html2canvas(rightContentImgBlock, { useCORS: true, scale: 3 }).then(
-			// 	(canvas) => {
-			// 		let blob: any = dataURLtoBlob(
-			// 			canvas.toDataURL("image/png")
-			// 		);
-			// 		let allBoardData: any =
-			// 			this.store.state.UploadFilesModule.allBoardData;
-			// 		let index = 0;
-			// 		img.push({
-			// 				imgUrl: URL.createObjectURL(blob),
-			// 				name: "achievement.png",
-			// 			},)
-			// 		this.likeDesignCollectionList.forEach((item:any) => {
-			// 			let data = {
-			// 				imgUrl:item.designItemUrl,
-			// 				name:item.pictureName
-			// 			}
-			// 			img.push(data)
-			// 		});
-			// 	}
-			// );
-			// return
-			this.downImg(img);
-		},
+		// 			mannequinList.forEach((item:any) => {
+		// 				let nameTail = item?.split(".").pop().split("?").shift();
+		// 				let data = {
+		// 					imgUrl: item,
+		// 					name:
+		// 						'mannequin' +
+		// 						index +
+		// 						"." +
+		// 						nameTail,
+		// 				};
+		// 				img.push(data);
+		// 				index++;	
+		// 			});
+		// 			// a.setAttribute('href', URL.createObjectURL(blob));
+		// 			// a.setAttribute('download', `collection.png`);
+		// 			// a.click();
+		// 		}
+		// 	);
+		// 	//单独导出模特图
+		// 	// await html2canvas(rightContentImgBlock, { useCORS: true, scale: 3 }).then(
+		// 	// 	(canvas) => {
+		// 	// 		let blob: any = dataURLtoBlob(
+		// 	// 			canvas.toDataURL("image/png")
+		// 	// 		);
+		// 	// 		let allBoardData: any =
+		// 	// 			this.store.state.UploadFilesModule.allBoardData;
+		// 	// 		let index = 0;
+		// 	// 		img.push({
+		// 	// 				imgUrl: URL.createObjectURL(blob),
+		// 	// 				name: "achievement.png",
+		// 	// 			},)
+		// 	// 		this.likeDesignCollectionList.forEach((item:any) => {
+		// 	// 			let data = {
+		// 	// 				imgUrl:item.designItemUrl,
+		// 	// 				name:item.pictureName
+		// 	// 			}
+		// 	// 			img.push(data)
+		// 	// 		});
+		// 	// 	}
+		// 	// );
+		// 	// return
+		// 	this.downImg(img);
+		// },
 
 		//打开图片详情
 		designDetail(
@@ -1186,34 +1186,34 @@ export default defineComponent({
 			});
 		},
 		// imgDataUrl 数据的url数组
-		downImg(imagesParams: any) {
-			let _this: any = this;
-			let zip = new JSZip();
-			let cache: any = {};
-			let promises = [];
-			for (let item of imagesParams) {
-				const promise = _this
-					.getImgArrayBuffer(item.imgUrl)
-					.then((data: any) => {
-						// 下载文件, 并存成ArrayBuffer对象(blob)
-						zip.file(item.name, data, { binary: true }); // 逐个添加文件
-						cache[item.title] = data;
-					});
-				promises.push(promise);
-			}
-			Promise.all(promises)
-				.then(() => {
-					zip.generateAsync({ type: "blob" }).then((content: any) => {
-						// 生成二进制流
-						FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
-						this.isShowMark = false;
-					});
-				})
-				.catch((res) => {
-					message.warning(this.t('HomeView.jsContent3'));
-					this.isShowMark = false;
-				});
-		},
+		// downImg(imagesParams: any) {
+		// 	let _this: any = this;
+		// 	let zip = new JSZip();
+		// 	let cache: any = {};
+		// 	let promises = [];
+		// 	for (let item of imagesParams) {
+		// 		const promise = _this
+		// 			.getImgArrayBuffer(item.imgUrl)
+		// 			.then((data: any) => {
+		// 				// 下载文件, 并存成ArrayBuffer对象(blob)
+		// 				zip.file(item.name, data, { binary: true }); // 逐个添加文件
+		// 				cache[item.title] = data;
+		// 			});
+		// 		promises.push(promise);
+		// 	}
+		// 	Promise.all(promises)
+		// 		.then(() => {
+		// 			zip.generateAsync({ type: "blob" }).then((content: any) => {
+		// 				// 生成二进制流
+		// 				FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
+		// 				this.isShowMark = false;
+		// 			});
+		// 		})
+		// 		.catch((res) => {
+		// 			message.warning(this.t('HomeView.jsContent3'));
+		// 			this.isShowMark = false;
+		// 		});
+		// },
 	},
 });
 </script>