aida_front/src/component/HomePage/ExportModel.vue

<template>
    <a-modal
        class="modal_component Export"
        v-model:visible="showUpgradePlan"
        :footer="null"
        width="78%"
        :maskClosable="false"
        :centered="true"
        :closable="false"
        :keyboard="false"
    >
        <div class="UpgradePlan_closeIcon">
            <i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
        </div>
        <div class="UpgradePlan_content">
            <div>Export</div>
        </div>
        <!-- <div>
			<canvas ref="exportCanvas"></canvas>
		</div> -->
        <div class="exportCanvasBox">
            <div class="exportCanvasBox_left">
                <div class="exportCanvasBox_title">Canvas Size</div>
                <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 class="exportCanvasBox_title" @click.stop="setCloseNav('nav')">
					Canvas Nav
					<div
                        :class="[
                            'icon',
                            'iconfont',
                            'icon-xiala',
							closeNav.nav?'icon-rotate':''
                        ]"
                    >
					</div>
				</div>
                <div class="exportCanvasBox_img exportCanvasBox_left_item" :class="{'closeNav' :closeNav.nav}">
                    <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" 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>
						</div>

                        <div
                            class="exportCanvasBox_item"
							:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'']"
                            v-for="imgItem in item"
							draggable
							@dragstart="onDragstart(key,imgItem)"
                        >
                            <img :src="key == 'likeDesignCollectionList'?imgItem.designOutfitUrl:imgItem.imgUrl" alt="" />
                        </div>
                    </div>
                </div>
				<div class="exportCanvasBox_title" @click.stop="setCloseNav('tool')">
					Canvas Tool
					<div
                        :class="[
                            'icon',
                            'iconfont',
                            'icon-xiala',
							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 v-show="operation != 'move' && operation != 'eraser'">
							<div >Color</div>
							<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
						</label>
						<label v-show="operation != 'move'">
							<div >Size:</div>
							<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
						</label>
						<label v-show="operation == 'pencil'">
							<div >Brushwork:</div>
							<a-select
								ref="select"
								class="label_select"
								size="small"
								v-model:value="brushworkValue"
								style="flex: 1"
								@change="brushworkChange"
								>
								<!-- v-model:value="brushwork" -->
								<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-option value="Marking">Marking</a-select-option>
								<a-select-option value="InkBrush">InkBrush</a-select-option>
								<a-select-option value="CrayonBrush">CrayonBrush</a-select-option>
								<a-select-option value="RibbonBrush">RibbonBrush</a-select-option>
								<a-select-option value="MarkerBrush">MarkerBrush</a-select-option>
								<a-select-option value="WritingBrush">WritingBrush</a-select-option>
								<a-select-option value="LongfurBrush">LongfurBrush</a-select-option>
								<a-select-option value="SpraypaintBrush">SpraypaintBrush</a-select-option> -->
							</a-select>
						</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>
            <div class="exportCanvasBox_center">
                <!-- <canvas ref="canvasDom" id="exportCanvas"></canvas> -->
            </div>
            <!-- <ExportNewCoolection ref="ExportNewCoolection"></ExportNewCoolection> -->
            <div class="exportCanvasBox_right">
                <div class="exportCanvasBox_title">
					High-definition Download
				</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_credits" v-show="credits<1">
					<div><span class="icon iconfont icon-zhuyi"></span>Your points balance is insufficient, if you need to use this feature, please click the top left corner to recharge</div>
				</div>
				<div class="exportCanvasBox_right_btn">
					<div class="subitOkPreviewBtn" :class="{active:credits<1}" @click="setHDExport">HD Export</div>
					<div class="subitOkPreviewBtn" @click="setExport">Export</div>
				</div>
            </div>
            <div class="mark_loading" v-show="isShowMark">
                <a-spin size="large" />
            </div>
        </div>
    </a-modal>
</template>
<script>
import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
} from "vue";
import { Https } from "@/tool/https";
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 { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck } from "@/tool/canvasDrawing";
export default defineComponent({
    components: {
        scaleImage,
        ExportNewCoolection,
    },
    props: ["msg", "sketchCatecoryList"],
    setup() {
        const store = useStore();

        let showUpgradePlan = ref(false);
        let canvas = reactive({});
        // let canvasDom = ref()
        let canvasWH = ref({
            width: 400,
            height: 1200,
        });
		canvasWH.value.width = [window.innerWidth/2.4]
		canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
        let credits = computed(() => {
            return store.state.UserHabit.credits.value;
        });
      
        let allBoardData = computed(() => {
            return store.state.UploadFilesModule.allBoardData;
        });
        let likeDesignCollectionList = computed(() => {
            return store.state.HomeStoreModule.likeDesignCollectionList;
        });
        let isShowMark = false;
        // let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
		let position = {
			//设置每个图形位置的初始值
			x: 0,
			y: 0,
			height: 0,
		};
		let sketchGrouping = 3; //sketch分组
		let likeDesign = 4; //整体图分组
		let disposeMoodboardShow = true;

		
		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 =
                    likeDesignCollectionList;
                let canvasBox = document.querySelector(
                    ".Export .exportCanvasBox_center"
                );
                canvasBox.innerHTML = ""; // 清空原有内容
                var canvasDom = document.createElement("canvas");
                canvasBox.appendChild(canvasDom);
                canvas = new fabric.Canvas(canvasDom, {
                    backgroundColor: "rgba(255, 255, 255)",
                    // fill: '#ffde7d',
                    // selection: false, //设置多选
                    width: canvasWH.value.width,
                    height: canvasWH.value.height,
                    isDrawingMode: false, // 开启绘图模式
					// preserveObjectStacking: true,
                });
				JSchangeType(canvas,'init')
				canvasOnDrop()//开启鼠标到画布事件
				setRemoveImage()//设置元素删除
				canvas.on("object:modified", ()=>{
					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",
                    "moodboardFiles",
                    "printboardFiles",
                    "colorBoards",
                    "sketchboardFiles",
                    "likeDesignCollectionList",
                ];
                
                
                let oldKey = "";
                let margin = 20; //每个图形边距
                // arr.forEach((item,index)=>{
                for (const item of arr) {
                    for (const key in allBoardData.value) {
                        if (item == key) {
                            //循环渲染顺序
							let imgWidth = setImageWidth(key); //这是设置画布等宽
                            let sketchGroupingItem = [];
							if (
                                item == "moodboardFiles" &&
                                !disposeMoodboardShow
                            ) {
                                continue;
                            }
                            for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
                                await new Promise((resolve, reject) => {
                                    if (key == "colorBoards") {
										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 += rect.width + margin;
                                        position.height = group.height + margin;
                                        resolve();
                                    } else {
                                        let itemCanvasImg = allItem.imgUrl;
                                        if (key == "likeDesignCollectionList") {
                                            itemCanvasImg =
                                                allItem.designOutfitUrl;
                                        }
                                        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);
					}
                }
				updateCanvasState('')//加载完成后记录一下
            });
        };
		let setRemoveImage = ()=>{
			let deleteObject = (eventData, transform)=> {
				// var target = [transform.target];
				let target = canvas.getActiveObjects()
				target.forEach((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.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"
			// 创建删除图片元素
			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 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
				// transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
				lockRotation: true,
			});
		}
		
        //设置导出
        let setExport = async () => {
            var imageDataURL = canvas.toDataURL({
                format: "png", // 导出格式为 PNG
                quality: 1, // 图片质量为 1（最高质量）
            });
            let a = document.createElement("a");
            let img = [];
            let index = 0;
            img.push({
                imgUrl: imageDataURL,
                name: "collection.png",
            });
            let num = 0;
            for (let key in allBoardData.value) {
                if (key !== "colorBoards" && key !== "moodTemplateId") {
                    for (let item of allBoardData.value[key]) {
                        if (
                            key == "disposeMoodboard" &&
                            allBoardData.value[key][0] == undefined
                        ) {
                            break;
                        }

                        let nameTail = item?.imgUrl
                            ?.split(".")
                            .pop()
                            .split("?")
                            .shift();

                        let data = {
                            imgUrl: item.imgUrl,
                            name: item?.resData?.name + index + "." + nameTail,
                        };
                        if (key == "likeDesignCollectionList") {
                            data.imgUrl = item.designOutfitUrl;
                            data.name = "result" + index + "." + nameTail;
                        }
                        img.push(data);
                        index++;
                    }
                    num++;
                }
            }
            let dataList = [];
            likeDesignCollectionList.value.forEach((item) => {
                dataList.push(item.designItemId);
                index++;
            });
            let mannequinList = [];
            await Https.axiosPost(Https.httpUrls.designGetModel, dataList)
                .then((rv) => {
                    mannequinList = rv;
                })
                .catch((rv) => {});
            mannequinList.forEach((item) => {
                let nameTail = item?.split(".").pop().split("?").shift();
                let data = {
                    imgUrl: item,
                    name: "mannequin" + index + "." + nameTail,
                };
                img.push(data);
                index++;
            });
            downImg(img);
        };
        let getImgArrayBuffer = (url) => {
            return new Promise((resolve, reject) => {
                //通过请求获取文件blob格式
                let xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", url, true);
                xmlhttp.responseType = "blob";
                xmlhttp.onload = function () {
                    if (this.status == 200) {
                        resolve(this.response);
                    } else {
                        reject(this.status);
                    }
                };
                xmlhttp.send();
            });
        };
        let downImg = (imagesParams) => {
            let zip = new JSZip();
            let cache = {};
            let promises = [];
            for (let item of imagesParams) {
                const promise = getImgArrayBuffer(item.imgUrl).then((data) => {
                    // 下载文件, 并存成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) => {
                        // 生成二进制流
                        FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
                        isShowMark = false;
                    });
                })
                .catch((res) => {
                    // message.warning(t('HomeView.jsContent3'));
                    isShowMark = false;
                });
        };
        //关闭画布
        let cancelDsign = () => {
            showUpgradePlan.value = false;
			position = {
				//设置每个图形位置的初始值
				x: 0,
				y: 0,
				height: 0,
			};
			operation.value = 'move'
			operation.value = 'fill'

			
        };
        //设置画布宽高
        let setMaxInput = (str, maxNum) => {
            if (str == "width") {
                // 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) {
                canvasWH.value.height = maxNum;
            }
            canvas.setHeight(canvasWH.value.height);
            canvas.setWidth(canvasWH.value.width);
        };

		let closeNav = ref({
			nav:true,
			tool:false,
			move:false,
		})
		let setCloseNav = (key)=>{
			closeNav.value[key] = !closeNav.value[key]
		}
		function multiselect() {//获取整体宽高
			canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
			const sel = new fabric.ActiveSelection(canvas.getObjects(), {
				canvas
			})
			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;
				console.log('Total Width:', totalWidth);
				console.log('Total Height:', totalHeight);
			}
		}
		let currentType = ref({
			type:'',
			data:'',
		})
		let onDragstart = (type,imgItem)=>{
			currentType.value.type = type
			currentType.value.data = imgItem
		}
		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':
					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)=>{
			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)",
				stroke: "#212121",
				strokeWidth: 1,
			});
			canvas.add(group);
			return group
		}
		// 创建矩形
		let createImage = async (top, left,key)=> {
			let itemCanvasImg = currentType.value.data.imgUrl
			if(key == 'likeDesignCollectionList'){
				itemCanvasImg = currentType.value.data.designOutfitUrl;
			}
			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);
				console.log(normalCanvasState.value);

			if (isLoadCanvas) {
				reverseCanvasState.value = []
				isLoadCanvas = false;
				canvasState.value = canvasAsJson
			}
		}
		//撤回
		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 brushworkValue = ref('PencilBrush')
		let brushworkChange = (value)=>{
			brushworkValue.value = value
			setPencil()
		}

		// let brushwork = ref('')
		
		let canvasPencilColor = ref('#000000')
		let canvasPencilWidth = ref(20)
		let setOperation = (str)=>{
			operation.value = str
			//折线图的时候切换其他形状或者笔触需要把未完成的折线图删掉
			canvas.discardActiveObject();//取消所有选中边框
			if(createPatterningIs){
				canvas.remove(currentPatterning)
			}
			canvas.remove(polyLineBtn)

			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 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 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.preserveObjectStacking = true;
			canvas.isDrawingMode = true//开启绘画模式
			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,{}); //书写笔
			}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 = canvasPencilWidth.value;

			if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
				canvas.freeDrawingBrush.width = 1;
			}
			if(brushworkValue.value == 'Marking'){
				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
			}else if(brushworkValue.value == 'InkBrush'){
				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
			}else{
				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
			}

			brushIndicator.set('fill',canvasPencilColor.value)
			canvas.freeDrawingBrush.isEraser = false

		}
		
		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});
				}
				if(brushworkValue.value == 'Marking'){
					canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
				}else if(brushworkValue.value == 'InkBrush'){
					canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
				}else{
					canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
				}


			},100)
		}
		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
			clearTimeout(setTimeOut.width)
			canvasPencilWidth.value = Number(canvasPencilWidth.value)
			setTimeOut.width = setTimeout(()=>{
				if(brushworkValue.value == 'LongfurBrush' || brushworkValue.value == 'RibbonBrush'){
					canvas.freeDrawingBrush.width = 1;
				}else{
					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
							points.pop()
							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){
				setTimeout(() => {
					canvas.remove(brushIndicator)
					updateCanvasState()
				}, 100);
			}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 = async ()=>{//获取选中内容的位置信息
			let imgData = await exportSele(canvas,'jpg')
			console.log(imgData);
			
		}
        onMounted(() => {});

        return {
            showUpgradePlan,//当前弹窗是否打开
            canvasWH,//画布初始宽高
			credits,//积分 用来判断HD导出积分是否够用
            init,//首页点击导出后初始化
            setExport,//导出所有内容
            cancelDsign,//关闭画布
            setMaxInput,//设置画布宽高
            isShowMark,//加载遮罩
            allBoardData,//选择画布所有内容
			closeNav,//导航展开或者收起来状态
			setCloseNav,//给图片导航或者工具收起来或者展开
			multiselect,//获取整体高度
			onDragstart,//拖拽函数
			historyState,//执行撤回或者反撤回
			operation,//设置当前鼠标状态绘画或者矩形或者移动
			operationMode,//设置矩形是边框还是填充
			setOperation,//设置当前鼠标状态绘画或者矩形或者移动方法
			setOperationMode,//设置矩形是边框还是填充方法
			brushList,//笔触列表
			canvasPencilColor,//input选择颜色
			canvasPencilWidth,//input选择宽度
			setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
			setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
			setHDExport,//高清导出选择的图片
			brushworkChange,//切换笔触的回调
			brushworkValue,//当前笔触
        };
    },
    data(prop) {
        return {};
    },

    mounted() {},
    watch: {
        // driver__:{
        // 	handler(newVal,oldVal){
        // 		if(this.type_.type2 == 'Printboard'){
        // 			if(newVal.index >= 14 && newVal.index < 15){
        // 				this.setKeyword(newVal.index-14)
        // 			}else{
        // 			}
        // 		}else if(this.type_.type2 == 'Sketchboard'){
        // 		}
        // 	}
        // },
    },
    methods: {
		
	},
});
</script>
<style lang="less" scoped>
.Export {
    flex: 1;
    // height: 30rem;
    // overflow-x: hidden;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e5e5;
    position: relative;
    .UpgradePlan_content {
        font-size: var(--aida-fsize2);
        font-weight: 900;
        color: rgba(0, 0, 0, 0.65);
    }
    .UpgradePlan_closeIcon {
        top: calc(2rem * 1.2);
        right: calc(2rem * 1.2);
        cursor: pointer;
        width: calc(4rem * 1.2);
        height: calc(4rem * 1.2);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        .fi-rr-cross-small::before {
            padding: calc(0.2rem * 1.2);
            border-radius: 5px;
            border: solid 2px rgba(0, 0, 0, 0.25);
            transition: 1s all;
            color: rgba(0, 0, 0, 0.55);
        }
        &.UpgradePlan_closeIcon:hover .fi-rr-cross-small::before {
            border: solid 2px rgba(0, 0, 0, 0.55);
            color: rgba(0, 0, 0, 1);
        }
    }
    .exportCanvasBox {
        flex: 1;
        overflow-x: hidden;
        display: flex;
        margin-top: 2rem;
        justify-content: space-between;
        .exportCanvasBox_title {
            margin-bottom: .5rem;
            font-size: 1.8rem;
            font-weight: 600;
			// margin-top: 2rem;
			padding-top: 2rem;
			display: flex;
			top: -1rem;
			justify-content: space-between;
			cursor: pointer;
			position: sticky;
			background: #f9fafb;
			z-index: 2;
			.icon{
				transition: all .3s;
			}
			.icon-rotate{
				transform: rotate(-180deg);
			}
        }
		.exportCanvasBox_intro{
			margin-bottom: 1rem;
            font-size: 1.6rem;
            font-weight: 600;
			width: 100%;
		}
        .exportCanvasBox_right,
        .exportCanvasBox_left {
			width: 25rem;
			height: 100%;
			overflow-x: hidden;
			label {
                cursor: pointer;
                display: flex;
				align-items: center;
				margin-bottom: 1rem;
				width: 100%;
                div {
                    width: 8rem;
                }
                input {
                    // width: 10em;
					flex: 1;
					overflow: hidden;
                }
				.label_select{
					img{
						width: 100%;
						max-height: 100%;
						object-fit: contain;
					}
				}
            }
			.exportCanvasBox_left_item.closeNav{
				// max-height: 1000rem;
				height: auto;
			}
        }
		.exportCanvasBox_left::-webkit-scrollbar,
		.exportCanvasBox_right::-webkit-scrollbar{display: none;}
        .exportCanvasBox_left {
				padding-right: 1rem;
			.exportCanvasBox_title {
				padding-right: 2rem;
			}
            .exportCanvasBox_left_item{
				overflow: hidden;
				transition: all .3s;
				// max-height: 0;
				height: 0;
				transform: translate3d(0, 0, 0);
			}
            .exportCanvasBox_img {
				// height: auto;
				
                .exportCanvasBox_allItem {
                    display: flex;
                    flex-wrap: wrap;
                    .exportCanvasBox_item {
                        text-align: center;
                        img {
                            max-width: 7rem;
                            max-height: 7rem;
                            object-fit: contain;
							margin-right: 2rem;
							margin-bottom: 2rem;
                        }
                    }
					.exportCanvasBox_item_color{
						width: 8rem;
						margin-right: 2rem;
						margin-bottom: 2rem;
						.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{
							max-width: 100%;
							max-height: 100%;
						}
					}
                }
            }
			.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;
				flex: 1;
			}
			.exportCanvasBox_right_credits{
				margin-bottom: 2rem;
			}
			.exportCanvasBox_right_btn{
				display: flex;
				justify-content: space-between;
				.subitOkPreviewBtn{
					position: initial;
					transform: none;
					&.active{
						opacity: .7;
						cursor: not-allowed;
					}
				}
				
			}
		}
        .exportCanvasBox_center {
            height: 100%;
            overflow-x: hidden;
        }
        .export_new_collection_review {
            position: initial;
            margin: 10rem auto;
            margin-bottom: 0;
        }
    }
}
</style>
<style lang="less">
.Export {
    .ant-modal-content {
        border-radius: calc(1rem * 1.2);
        overflow: hidden;
        .ant-modal-header {
            background-color: #fff;
            border-bottom: none;
        }
        .ant-modal-body {
            display: flex;
            flex-direction: column;
            padding: calc(5rem * 1.2) calc(5rem * 1.2) !important;
            // height: calc(65vh - 6.4rem);
            height: calc(65rem * 1.2);
            background: #f9fafb;
        }
        //进度完成字体颜色
        .ant-progress-circle.ant-progress-status-success .ant-progress-text {
            color: #000;
        }
        .ant-progress-circle .ant-progress-text {
            color: rgba(0, 0, 0, 0.55);
            font-size: calc(1.6rem * 1.2);
        }
    }
	.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{
		border-color: #d9d9d9;
		box-shadow: none;
	}
	.ant-select:hover .ant-select-selector{
		border-color: #d9d9d9;
	}
}
.label_select_item{
	img{
		width: 100%;
		max-height: 100%;
		object-fit: contain;
	}
}
</style>