1247 lines
43 KiB
Vue
1247 lines
43 KiB
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>
|
||
<div >Color</div>
|
||
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
|
||
</label>
|
||
<label>
|
||
<div >Size:</div>
|
||
<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
|
||
More
|
||
<div
|
||
:class="[
|
||
'icon',
|
||
'iconfont',
|
||
'icon-xiala',
|
||
closeNav.move?'icon-rotate':''
|
||
]"
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.move}">
|
||
<div class="exportCanvasBox_left_tool_item">
|
||
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
|
||
<i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i>
|
||
<i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i>
|
||
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
|
||
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
|
||
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
|
||
</div>
|
||
<div class="exportCanvasBox_left_tool_item leftAlign">
|
||
<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
|
||
<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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 { multiselectJS,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,
|
||
};
|
||
|
||
};
|
||
//设置画布宽高
|
||
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);
|
||
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 canvasPencilColor = ref('#000000')
|
||
let canvasPencilWidth = ref(20)
|
||
let setOperation = (str)=>{
|
||
operation.value = str
|
||
canvas.discardActiveObject();//取消所有选中边框
|
||
clearPatterning()//临时图形置为空并且添加撤回对象里面
|
||
if(str == 'pencil'){
|
||
setPencil()
|
||
}else if(str == 'move'){
|
||
setMove()
|
||
canvas.forEachObject((obj) =>obj.selectable = true);
|
||
JSchangeType(canvas,'init')
|
||
}else if(str == 'eraser'){
|
||
setEraser()
|
||
}else{
|
||
canvas.forEachObject((obj) =>obj.selectable = false);
|
||
canvas.isDrawingMode = false
|
||
}
|
||
}
|
||
let setOperationMode = (str) =>{
|
||
operationMode.value = str
|
||
}
|
||
let brushIndicator = new fabric.Circle({
|
||
radius:canvasPencilWidth.value/2,
|
||
fill: '#fff',
|
||
stroke: '#000',
|
||
strokeWidth: 0,
|
||
originX: 'center',
|
||
originY: 'center',
|
||
visible :true,
|
||
erasable: false,
|
||
});
|
||
let setPencil =()=>{
|
||
let pencil = new fabric.PencilBrush(canvas); //笔
|
||
canvas.preserveObjectStacking = true;
|
||
canvas.isDrawingMode = true//开启绘画模式
|
||
canvas.freeDrawingBrush = pencil
|
||
canvas.freeDrawingBrush.color = canvasPencilColor.value;
|
||
brushIndicator.set('fill',canvasPencilColor.value)
|
||
canvas.freeDrawingBrush.isEraser = false
|
||
canvas.freeDrawingBrush.width = canvasPencilWidth.value;
|
||
}
|
||
|
||
let setMove = () =>{
|
||
canvas.isDrawingMode = false
|
||
canvas.forEachObject((obj) =>obj.selectable = true);
|
||
}
|
||
let setEraser = ()=>{
|
||
canvas.isDrawingMode = true
|
||
let eraser = new fabric.EraserBrush(canvas)
|
||
canvas.freeDrawingBrush = eraser
|
||
brushIndicator.set({fill: '#FFF'});
|
||
canvas.requestRenderAll();
|
||
canvas.freeDrawingBrush.isEraser = true
|
||
canvas.freeDrawingBrush.width = canvasPencilWidth.value;
|
||
}
|
||
let setTimeOut = {
|
||
color:null,
|
||
width:null,
|
||
}//给切换颜色设置防抖
|
||
let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
|
||
clearTimeout(setTimeOut.color)
|
||
setTimeOut.color = setTimeout(()=>{
|
||
// brushIndicator.fill = canvasPencilColor.value;
|
||
if(canvas.freeDrawingBrush.isEraser){
|
||
|
||
}else{
|
||
brushIndicator.set({fill: canvasPencilColor.value});
|
||
}
|
||
canvas.freeDrawingBrush.color = canvasPencilColor.value;
|
||
|
||
},300)
|
||
}
|
||
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
|
||
clearTimeout(setTimeOut.width)
|
||
canvasPencilWidth.value = Number(canvasPencilWidth.value)
|
||
setTimeOut.width = setTimeout(()=>{
|
||
canvas.freeDrawingBrush.width = canvasPencilWidth.value;
|
||
// setPencil()
|
||
},300)
|
||
}
|
||
let downPoint = null;//鼠标按下位置
|
||
let upPoint = null;//鼠标抬起位置
|
||
let currentPatterning = null//临时图形
|
||
let polyLineBtn = null
|
||
let createPatterningIs = false
|
||
let clearPatterning = () =>{
|
||
if(createPatterningIs){
|
||
canvas.remove(currentPatterning)
|
||
}
|
||
currentPatterning = null
|
||
canvas.remove(polyLineBtn)
|
||
updateCanvasState()
|
||
}
|
||
//设置再画布上移动
|
||
let setCanvasMove = (event)=>{
|
||
var pointer = canvas.getPointer(event.e);
|
||
if(canvas.isDrawingMode){
|
||
canvas.setCursor('none');
|
||
if(!canvas.contains(brushIndicator)){
|
||
canvas.add(brushIndicator)
|
||
canvas.bringToFront(brushIndicator);//设置优先级最高
|
||
}
|
||
// brushIndicator.fill = canvasPencilColor.value
|
||
brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:canvasPencilWidth.value/2 });
|
||
|
||
}else{
|
||
if(createPatterningIs){
|
||
JScanvasMouseMove(operation.value,event,currentPatterning,downPoint)
|
||
}
|
||
}
|
||
canvas.requestRenderAll()
|
||
}
|
||
let setCanvasOut = (event)=>{
|
||
canvas.remove(brushIndicator)//鼠标移出删除绘画范围的圆形
|
||
}
|
||
//设置再画布上按下
|
||
let setCanvasDown = (event)=>{
|
||
|
||
downPoint = event.absolutePointer
|
||
let arr = ['rect','line','circle','triangle','ellipse','fold']
|
||
if(arr.indexOf(operation.value) > -1){
|
||
JSchangeType(canvas,operation.value)
|
||
createPatterningIs = true
|
||
if(currentPatterning && operation.value == 'fold'){
|
||
canvas.skipTargetFind = false
|
||
currentPatterning.points.push({
|
||
x: downPoint.x,
|
||
y: downPoint.y
|
||
})
|
||
// currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
|
||
}else{
|
||
if(operation.value == 'fold'){
|
||
polyLineBtn = JScreateCheck(event)
|
||
polyLineBtn.on('mousedown',()=>{
|
||
canvas.skipTargetFind = true
|
||
let points = currentPatterning.points
|
||
currentPatterning.points.pop()
|
||
currentPatterning.points.pop()
|
||
// canvas.remove(currentPatterning)
|
||
// let polyline = new fabric.Polyline(points, {
|
||
// fill: 'transparent',
|
||
// stroke: canvasPencilColor.value,
|
||
// strokeWidth:canvasPencilWidth.value,
|
||
// selection:false,
|
||
// })
|
||
// canvas.add(polyline)
|
||
currentPatterning.set({stroke: canvasPencilColor.value})
|
||
createPatterningIs = false
|
||
clearPatterning()//临时图形置为空并且添加撤回对象里面
|
||
})
|
||
canvas.add(polyLineBtn)
|
||
}
|
||
currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
|
||
canvas.add(currentPatterning)
|
||
canvas.bringToFront(currentPatterning);//设置优先级最高
|
||
}
|
||
}else{
|
||
createPatterningIs = false
|
||
}
|
||
}
|
||
//设置再画布上抬起
|
||
let setCanvasUp = (event)=>{
|
||
upPoint = event.absolutePointer
|
||
if(canvas.isDrawingMode){
|
||
canvas.remove(brushIndicator)
|
||
updateCanvasState()
|
||
}else{
|
||
// event.target && (event.target.bringToFront())//设置优先级
|
||
}
|
||
if(createPatterningIs){
|
||
switch (operation.value) {
|
||
case 'line':
|
||
currentPatterning.set({stroke: canvasPencilColor.value})
|
||
break
|
||
case 'fold':
|
||
// currentPatterning.set({stroke: canvasPencilColor.value})
|
||
break
|
||
default :
|
||
if(operationMode.value == 'fill'){
|
||
currentPatterning.set({fill: canvasPencilColor.value})
|
||
}else if (operationMode.value == 'border'){
|
||
currentPatterning.set({fill: 'transparent',stroke: canvasPencilColor.value,strokeWidth: canvasPencilWidth.value})
|
||
}
|
||
if(JSON.stringify(downPoint) == JSON.stringify(upPoint)){
|
||
canvas.remove(currentPatterning)
|
||
}
|
||
break
|
||
}
|
||
if(operation.value == 'fold'){
|
||
canvas.forEachObject((obj) =>obj.selectable = false);
|
||
canvas.bringToFront(polyLineBtn);//设置优先级最高
|
||
}else{
|
||
createPatterningIs = false
|
||
clearPatterning()//临时图形置为空并且添加撤回对象里面
|
||
}
|
||
}
|
||
}
|
||
let setHDExport = ()=>{
|
||
let selectedObject = canvas.getActiveObject();
|
||
if (selectedObject && selectedObject.type === 'image') {
|
||
// 如果是图片对象，则可以对其进行操作
|
||
let selectedImage = selectedObject;
|
||
let img = new Image
|
||
img.src = selectedImage.getSrc()
|
||
img.onload = ()=>{
|
||
console.log(img.width,img.height);
|
||
}
|
||
// 输出图片对象的 URL
|
||
console.log('Selected image URL:', selectedImage.getSrc());
|
||
} else {
|
||
console.log('No image selected.');
|
||
}
|
||
}
|
||
onMounted(() => {});
|
||
|
||
return {
|
||
showUpgradePlan,
|
||
canvasWH,
|
||
credits,
|
||
init,
|
||
setExport,
|
||
cancelDsign,
|
||
setMaxInput,
|
||
isShowMark,
|
||
allBoardData,
|
||
closeNav,
|
||
setCloseNav,
|
||
multiselect,
|
||
onDragstart,
|
||
historyState,
|
||
operation,
|
||
operationMode,
|
||
setOperation,
|
||
setOperationMode,
|
||
canvasPencilColor,
|
||
canvasPencilWidth,
|
||
setPencilColor,
|
||
setPencilWidth,
|
||
setHDExport,
|
||
};
|
||
},
|
||
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;
|
||
div {
|
||
width: 5rem;
|
||
}
|
||
input {
|
||
width: 10em;
|
||
}
|
||
}
|
||
.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);
|
||
}
|
||
}
|
||
}
|
||
</style> |