aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083
2024-03-04 09:57:46 +08:00
parent aa5f2e4208
commit 1dcafb8d5d
6 changed files with 571 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/style/style.css
View File

@@ -714,20 +714,23 @@ li {
.design_detail_modal_component .ant-upload-list-picture-card-container, .design_detail_modal_component .ant-upload-list-picture-card-container,
.designOpenrtion_modal .ant-upload-list-picture-card-container, .designOpenrtion_modal .ant-upload-list-picture-card-container,
.UpgradePlan_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; display: none !important;
} }
.design_detail_modal_component .ant-upload-picture-card-wrapper, .design_detail_modal_component .ant-upload-picture-card-wrapper,
.designOpenrtion_modal .ant-upload-picture-card-wrapper, .designOpenrtion_modal .ant-upload-picture-card-wrapper,
.UpgradePlan_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; width: auto;
vertical-align: top; vertical-align: top;
} }
.design_detail_modal_component .subitOkPreviewBtn, .design_detail_modal_component .subitOkPreviewBtn,
.designOpenrtion_modal .subitOkPreviewBtn, .designOpenrtion_modal .subitOkPreviewBtn,
.UpgradePlan_modal .subitOkPreviewBtn, .UpgradePlan_modal .subitOkPreviewBtn,
.refund_reason .subitOkPreviewBtn { .refund_reason .subitOkPreviewBtn,
.Export .subitOkPreviewBtn {
background-color: #38205b; background-color: #38205b;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;

2
src/assets/style/style.less
View File

@@ -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{ .ant-upload-list-picture-card-container{
display: none !important; display: none !important;
} }

743
src/component/HomePage/ExportModel.vue
View File

@@ -20,43 +20,35 @@
</div> --> </div> -->
<div class="exportCanvasBox"> <div class="exportCanvasBox">
<div class="exportCanvasBox_left"> <div class="exportCanvasBox_left">
<div class="exportCanvasBox_title">Canvas Title</div> <div class="exportCanvasBox_title">Canvas Size</div>
<label> <label>
<div>Width:</div> <div>Width:</div>
<input <input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
type="number"
@input="setMaxInput('width', 500)"
v-model="canvasWH.width"
/>
</label> </label>
<label> <label>
<div>Height:</div> <div>Height:</div>
<input <input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height"/>
type="number"
@input="setMaxInput('height', 1000)"
v-model="canvasWH.height"
/>
</label> </label>
<div class="exportCanvasBox_title" @click.stop="setCloseNav()"> <div class="exportCanvasBox_title" @click.stop="setCloseNav(0)">
Canvas Nav Canvas Nav
<div <div
:class="[ :class="[
'icon', 'icon',
'iconfont', 'iconfont',
'icon-xiala', 'icon-xiala',
closeNav?'icon-rotate':'' closeNav==0?'icon-rotate':''
]" ]"
> >
</div> </div>
</div> </div>
<div class="exportCanvasBox_img" :class="{closeNav:'closeNav'}"> <div class="exportCanvasBox_img" :class="{'closeNav' :closeNav==0}">
<div <div
class="exportCanvasBox_allItem" class="exportCanvasBox_allItem"
v-for="(item,key) in allBoardData" v-for="(item,key) in allBoardData"
> >
<div v-if="item[0]" class="exportCanvasBox_intro">{{ key }}</div> <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)">
<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'" v-for="colorItem in item"> <img src="" alt="">
<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div> <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.tcx}}</div>
<div>{{colorItem.name}}</div> <div>{{colorItem.name}}</div>
@@ -67,20 +59,50 @@
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'']" :class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'']"
v-for="imgItem in item" v-for="imgItem in item"
draggable draggable
@dragstart="onDragstart(key)" @dragstart="onDragstart(key,imgItem)"
> >
<img :src="key == 'likeDesignCollectionList'?imgItem.designOutfitUrl:imgItem.imgUrl" alt="" /> <img :src="key == 'likeDesignCollectionList'?imgItem.designOutfitUrl:imgItem.imgUrl" alt="" />
</div> </div>
</div> </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>
<div class="exportCanvasBox_center"> <div class="exportCanvasBox_center">
<!-- <canvas ref="canvasDom" id="exportCanvas"></canvas> --> <!-- <canvas ref="canvasDom" id="exportCanvas"></canvas> -->
</div> </div>
<!-- <ExportNewCoolection ref="ExportNewCoolection"></ExportNewCoolection> --> <!-- <ExportNewCoolection ref="ExportNewCoolection"></ExportNewCoolection> -->
<div class="exportCanvasBox_right"> <div class="exportCanvasBox_right">
<div class="" @click="setExport">export</div> <div class="exportCanvasBox_title">
<div class="" @click="multiselect">all</div> 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>
<div class="mark_loading" v-show="isShowMark"> <div class="mark_loading" v-show="isShowMark">
<a-spin size="large" /> <a-spin size="large" />
@@ -89,17 +111,10 @@
</a-modal> </a-modal>
</template> </template>
<script> <script>
import { import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
defineComponent,
computed,
h,
ref,
nextTick,
inject,
reactive,
onMounted,
} from "vue"; } from "vue";
import { Https } from "@/tool/https"; import { Https } from "@/tool/https";
import { multiselectJS } from "@/tool/canvasDrawing";
import scaleImage from "@/component/HomePage/scaleImage.vue"; import scaleImage from "@/component/HomePage/scaleImage.vue";
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue"; import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
import { useStore } from "vuex"; import { useStore } from "vuex";
@@ -124,7 +139,6 @@ export default defineComponent({
}); });
canvasWH.value.width = [window.innerWidth/2.4] canvasWH.value.width = [window.innerWidth/2.4]
canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0]; canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
console.log(canvasWH.value.width);
let sketch = computed(() => { let sketch = computed(() => {
return store.state.HomeStoreModule.showSketchList; return store.state.HomeStoreModule.showSketchList;
}); });
@@ -145,9 +159,16 @@ export default defineComponent({
y: 0, y: 0,
height: 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 = () => { let init = () => {
showUpgradePlan.value = true; showUpgradePlan.value = true;
console.log(position);
nextTick().then(async () => { nextTick().then(async () => {
allBoardData.value.likeDesignCollectionList = allBoardData.value.likeDesignCollectionList =
likeDesignCollectionList; likeDesignCollectionList;
@@ -164,9 +185,18 @@ export default defineComponent({
width: canvasWH.value.width, width: canvasWH.value.width,
height: canvasWH.value.height, height: canvasWH.value.height,
isDrawingMode: false, // 开启绘图模式 isDrawingMode: false, // 开启绘图模式
// preserveObjectStacking: true,
}); });
canvasOnDrop() canvasOnDrop()//开启鼠标到画布事件
let disposeMoodboardShow = true; setRemoveImage()//设置元素删除
canvas.on("object:modified", ()=>{
updateCanvasState()
});
canvas.on('selection:created', ()=>{
updateCanvasState('created')
});
// canvas.on("object:added", updateCanvasState);
// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
let arr = [ let arr = [
"disposeMoodboard", "disposeMoodboard",
"moodboardFiles", "moodboardFiles",
@@ -176,8 +206,7 @@ export default defineComponent({
"likeDesignCollectionList", "likeDesignCollectionList",
]; ];
let sketchGrouping = 3; //sketch分组
let likeDesign = 4; //整体图分组
let oldKey = ""; let oldKey = "";
let margin = 20; //每个图形边距 let margin = 20; //每个图形边距
// arr.forEach((item,index)=>{ // arr.forEach((item,index)=>{
@@ -185,98 +214,25 @@ export default defineComponent({
for (const key in allBoardData.value) { for (const key in allBoardData.value) {
if (item == key) { if (item == key) {
//循环渲染顺序 //循环渲染顺序
let setImgWidth = canvasWH.value.width; //这是设置画布等宽 let imgWidth = setImageWidth(key); //这是设置画布等宽
let sketchGroupingItem = []; let sketchGroupingItem = [];
if ( if (
disposeMoodboardShow &&
item == "disposeMoodboard" &&
allBoardData.value[key].length != 0 &&
allBoardData.value[key][0] != null
) {
//如果是mood 需要判断用户是否点击layout
disposeMoodboardShow = false;
}
if (
item == "moodboardFiles" && item == "moodboardFiles" &&
!disposeMoodboardShow !disposeMoodboardShow
) { ) {
continue; 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()) { for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
if (key == "colorBoards") { if (key == "colorBoards") {
var text = new fabric.Text( let rect = setGroup(allItem)
allItem.tcx, if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
{ position.x = 0;
left: 0, position.y += position.height;
top: 60, }
fontSize: 14, let group = setCanvasColor(position.y,position.x,rect)
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);
oldKey = key; oldKey = key;
position.x += width + margin; position.x += rect.width + margin;
position.height = group.height + margin; position.height = group.height + margin;
resolve(); resolve();
} else { } else {
@@ -285,176 +241,179 @@ export default defineComponent({
itemCanvasImg = itemCanvasImg =
allItem.designOutfitUrl; allItem.designOutfitUrl;
} }
fabric.Image.fromURL( fabric.Image.fromURL(itemCanvasImg,(img) => {
itemCanvasImg, let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
(img) => { if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
let proportion = img.height / img.width; //计算图形宽高比例 position.x = 0;
let scaleWH = setImgWidth / img.width; //计算放到画布上缩小倍率 position.y += position.height;
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) { }
position.x = 0; setCanvasImage(img,key,position.x,position.y)//设置图片
position.y += position.height;
} position.height = img.height * scaleWH + margin;
img.set({ if (key == "sketchboardFiles") {
// width: setImgWidth/img.width, position.x +=
// height: canvasWH.value.height/img.height, img.width * scaleWH +
left: position.x, margin;
top: position.y, if (sketchGroupingItem.length >= 3) {
scaleX: } else {
setImgWidth / img.width, sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
scaleY:(img.width * proportion * scaleWH) / img.height, }
cornerSize: 10, // 选中时，角的大小为20 if (sketchGroupingItem.length >=3) {
// lockRotation:true, let sketchXyIndex = {
// lockScalingX:true, maxIndex: 0,
lockRotation: true, maxNum: 9999999999,
crossOrigin: "anonymous", minNum: 0,
transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心 minIndex: 0,
// cornerColor: "#a1de93", // 选中时，角的颜色是 青色 };
}); sketchGroupingItem.forEach(
position.height = img.height * scaleWH + margin; (sketchItem,sketchIndex) => {
if (key == "sketchboardFiles") { if (sketchItem.height <sketchXyIndex.maxNum) {
position.x += sketchXyIndex.maxNum = sketchItem.height;
img.width * scaleWH + sketchXyIndex.maxIndex = sketchIndex;
margin; }
if ( if (sketchItem.height > sketchXyIndex.minNum) {
sketchGroupingItem.length >= sketchXyIndex.minNum = sketchItem.height;
3 sketchXyIndex.minIndex = sketchIndex;
) { }
} else { }
sketchGroupingItem.push( );
JSON.parse( if (allBoardData.value[key].length == allItemIndex + 1) {
JSON.stringify( position = sketchGroupingItem[sketchXyIndex.minIndex];
position } else {
) position = sketchGroupingItem[ sketchXyIndex.maxIndex];
) position.y += position.height;
); position.x -= img.width * scaleWH + margin;
} }
if (sketchGroupingItem.length >=3) { }
let sketchXyIndex = { } else {
maxIndex: 0, position.x += img.width * scaleWH;
maxNum: 9999999999, }
minNum: 0, img.lock_rotation = true;
minIndex: 0, canvas.add(img);
}; oldKey = key;
sketchGroupingItem.forEach( resolve();
(sketchItem,sketchIndex) => { },{ crossOrigin: "Anonymous" });
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)=>{ let setRemoveImage = ()=>{
fabric.Image.fromURL( let deleteObject = (eventData, transform)=> {
itemCanvasImg, var target = [transform.target];
(img) => { if(transform.target._objects){
let proportion = img.height / img.width; //计算图形宽高比例 target = transform.target._objects
let scaleWH = setImgWidth / img.width; //计算放到画布上缩小倍率 }
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) { // canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
position.x = 0; // const sel = new fabric.ActiveSelection(canvas.getObjects(), {
position.y += position.height; // canvas
} // })
img.set({ target.forEach((item)=>{
// width: setImgWidth/img.width, var canvas = item.canvas;
// height: canvasWH.value.height/img.height, canvas.remove(item);
left: position.x, })
top: position.y, canvas.requestRenderAll();
scaleX: canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
setImgWidth / img.width, }
scaleY:(img.width * proportion * scaleWH) / img.height, 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"
cornerSize: 10, // 选中时，角的大小为20 // 创建删除图片元素
// lockRotation:true, let deleteImg = document.createElement('img')
// lockScalingX:true, deleteImg.src = deleteIcon
lockRotation: true, function renderIcon(icon) {
crossOrigin: "anonymous", return function (ctx, left, top, styleOverride, fabricObject) {
transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心 var size = this.cornerSize;
// cornerColor: "#a1de93", // 选中时，角的颜色是 青色 ctx.save();
}); ctx.translate(left, top);
position.height = img.height * scaleWH + margin; ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
if (key == "sketchboardFiles") { ctx.drawImage(icon, -size/3, -size/3, size/1.5, size/1.5);
position.x += ctx.restore();
img.width * scaleWH + }
margin; }
if ( // 删除按钮控件
sketchGroupingItem.length >= fabric.Object.prototype.controls.deleteControl = new fabric.Control({
3 x: 0.5,
) { y: -0.5,
} else { offsetY: -16,
sketchGroupingItem.push( offsetX: 16,
JSON.parse( cursorStyle: 'pointer',
JSON.stringify( mouseUpHandler: deleteObject,
position render: renderIcon(deleteImg),
) cornerSize: 24
) })
);
}
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 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 () => { let setExport = async () => {
var imageDataURL = canvas.toDataURL({ var imageDataURL = canvas.toDataURL({
@@ -501,17 +460,7 @@ export default defineComponent({
} }
let dataList = []; let dataList = [];
likeDesignCollectionList.value.forEach((item) => { 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); dataList.push(item.designItemId);
// img.push(data);
index++; index++;
}); });
let mannequinList = []; let mannequinList = [];
@@ -589,7 +538,11 @@ export default defineComponent({
// maxNum = window.innerWidth < 1100 ? 400 : maxNum; // maxNum = window.innerWidth < 1100 ? 400 : maxNum;
maxNum = [window.innerWidth/2.4] maxNum = [window.innerWidth/2.4]
maxNum = maxNum.map(num => Math.round(num / 10) * 10)[0]; 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) { if (str == "width" && canvasWH.value.width >= maxNum) {
canvasWH.value.width = maxNum; canvasWH.value.width = maxNum;
} else if (str == "height" && canvasWH.value.height >= maxNum) { } else if (str == "height" && canvasWH.value.height >= maxNum) {
@@ -599,12 +552,19 @@ export default defineComponent({
canvas.setWidth(canvasWH.value.width); canvas.setWidth(canvasWH.value.width);
}; };
let closeNav = ref(false) let closeNav = ref(0)
let setCloseNav = ()=>{ let setCloseNav = (num)=>{
closeNav.value = !closeNav.value if(closeNav.value == num){
closeNav.value = -1
}else{
closeNav.value = num
}
} }
// let multiselect = ()=>{
function multiselect() { // console.log(canvas);
// multiselectJS(canvas)
// }
function multiselect() {//获取整体宽高
canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
const sel = new fabric.ActiveSelection(canvas.getObjects(), { const sel = new fabric.ActiveSelection(canvas.getObjects(), {
canvas canvas
@@ -621,50 +581,110 @@ export default defineComponent({
} }
} }
let currentType = ref() let currentType = ref({
let onDragstart = (type)=>{ type:'',
console.log(type); data:'',
currentType.value = type })
let onDragstart = (type,imgItem)=>{
currentType.value.type = type
currentType.value.data = imgItem
} }
let canvasOnDrop = ()=>{ let canvasOnDrop = ()=>{
canvas.on('drop', function(opt) { canvas.on('drop', (opt)=> {
// 省略部分代码...... // 省略部分代码......
let offset = { let offset = {
left: canvas.getSelectionElement().getBoundingClientRect().left, left: canvas.getSelectionElement().getBoundingClientRect().left,
top: canvas.getSelectionElement().getBoundingClientRect().top 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'
}))
} }
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(() => {}); onMounted(() => {});
return { return {
@@ -680,6 +700,8 @@ export default defineComponent({
setCloseNav, setCloseNav,
multiselect, multiselect,
onDragstart, onDragstart,
historyState,
stateIndex,
}; };
}, },
data(prop) { data(prop) {
@@ -700,7 +722,9 @@ export default defineComponent({
// } // }
// }, // },
}, },
methods: {}, methods: {
},
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@@ -757,8 +781,8 @@ export default defineComponent({
.icon{ .icon{
transition: all .3s; transition: all .3s;
} }
&.icon-rotate{ .icon-rotate{
transform: rotate(90deg); transform: rotate(-180deg);
} }
} }
.exportCanvasBox_intro{ .exportCanvasBox_intro{
@@ -772,11 +796,11 @@ export default defineComponent({
width: 25rem; width: 25rem;
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
} label {
.exportCanvasBox_left {
label {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center;
margin-bottom: 1rem;
div { div {
width: 5rem; width: 5rem;
} }
@@ -784,13 +808,21 @@ export default defineComponent({
width: 10em; width: 10em;
} }
} }
.exportCanvasBox_img.closeNav{
max-height: 1000rem;
}
}
.exportCanvasBox_left::-webkit-scrollbar,
.exportCanvasBox_right::-webkit-scrollbar{display: none;}
.exportCanvasBox_left {
.exportCanvasBox_img { .exportCanvasBox_img {
transition: .3s all; transition: all .3s;
overflow: hidden; overflow: hidden;
height: auto; // height: auto;
&.closeNav{ max-height: 0;
// height: 0; transform: translate3d(0, 0, 0);
}
.exportCanvasBox_allItem { .exportCanvasBox_allItem {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -811,6 +843,12 @@ export default defineComponent({
.exportCanvasBox_item_BGcolor{ .exportCanvasBox_item_BGcolor{
height: 5rem; 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{ .exportCanvasBox_item_dispose{
img{ 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 { .exportCanvasBox_center {
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;

2
src/component/HomePage/Header.vue
View File

@@ -36,7 +36,7 @@
<div <div
class="trialApproval button_second credits hideChecked" class="trialApproval button_second credits hideChecked"
> >
Credits : Credits:&nbsp;
<span :title="credits"> <span :title="credits">
<!-- <div>{{ String(credits.value[credits.value.legnth-1]) }}</div> --> <!-- <div>{{ String(credits.value[credits.value.legnth-1]) }}</div> -->
<div class="credits_item" v-for="item in String(credits)" :style="{'transform': 'translateY('+item*-100+'%)'}"> <div class="credits_item" v-for="item in String(credits)" :style="{'transform': 'translateY('+item*-100+'%)'}">

19
src/tool/canvasDrawing.js
View File

@@ -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,}

290
src/views/HomeView.vue
View File

@@ -1011,125 +1011,125 @@ export default defineComponent({
exportModel.init() exportModel.init()
}, },
//导出合成图 //导出合成图
async exportCanvas() { // async exportCanvas() {
let collectionReview: any = document.querySelector( // let collectionReview: any = document.querySelector(
"#exportNewCoolection" // "#exportNewCoolection"
); // );
let rightContentImgBlock: any = document.querySelector( // let rightContentImgBlock: any = document.querySelector(
"#right_content_img_block" // "#right_content_img_block"
); // );
if(this.driver__.driver){ // if(this.driver__.driver){
nextTick().then(()=>{ // nextTick().then(()=>{
driverObj__.moveNext(); // driverObj__.moveNext();
}) // })
} // }
let a = document.createElement("a"); // let a = document.createElement("a");
// this.isShowMark = true; // // this.isShowMark = true;
let img:any = [] // let img:any = []
await html2canvas(collectionReview, { useCORS: true, scale: 3 }).then( // await html2canvas(collectionReview, { useCORS: true, scale: 3 }).then(
async (canvas) => { // async (canvas) => {
let blob: any = dataURLtoBlob( // let blob: any = dataURLtoBlob(
canvas.toDataURL("image/png") // canvas.toDataURL("image/png")
); // );
let allBoardData: any = // let allBoardData: any =
this.store.state.UploadFilesModule.allBoardData; // this.store.state.UploadFilesModule.allBoardData;
let index = 0; // let index = 0;
img.push({ // img.push({
imgUrl: URL.createObjectURL(blob), // imgUrl: URL.createObjectURL(blob),
name: "collection.png", // name: "collection.png",
}) // })
let num = 0 // let num = 0
for (let key in allBoardData) { // for (let key in allBoardData) {
if (key !== "colorBoards" && key !== "moodTemplateId") { // if (key !== "colorBoards" && key !== "moodTemplateId") {
if(this.exportNav[num]?.change || key == 'disposeMoodboard'){ // if(this.exportNav[num]?.change || key == 'disposeMoodboard'){
for (let item of allBoardData[key]) { // for (let item of allBoardData[key]) {
if(key == 'disposeMoodboard' && allBoardData[key][0]==undefined){ // if(key == 'disposeMoodboard' && allBoardData[key][0]==undefined){
break // break
} // }
let nameTail = item?.imgUrl?.split(".").pop().split("?").shift(); // let nameTail = item?.imgUrl?.split(".").pop().split("?").shift();
let data = { // let data = {
imgUrl: item.imgUrl, // imgUrl: item.imgUrl,
name: // name:
item?.resData?.name + // item?.resData?.name +
index + // index +
"." + // "." +
nameTail, // nameTail,
}; // };
img.push(data); // img.push(data);
index++; // index++;
} // }
}else{ // }else{
} // }
num++ // num++
} // }
} // }
let dataList:any = [] // let dataList:any = []
this.likeDesignCollectionList.forEach((item:any)=>{ // this.likeDesignCollectionList.forEach((item:any)=>{
let nameTail = item?.designOutfitUrl?.split(".").pop().split("?").shift(); // let nameTail = item?.designOutfitUrl?.split(".").pop().split("?").shift();
let data = { // let data = {
imgUrl: item.designOutfitUrl, // imgUrl: item.designOutfitUrl,
name: // name:
'result' + // 'result' +
index + // index +
"." + // "." +
nameTail, // nameTail,
}; // };
dataList.push(item.designItemId) // dataList.push(item.designItemId)
img.push(data); // img.push(data);
index++; // index++;
}) // })
let mannequinList:any = [] // let mannequinList:any = []
await Https.axiosPost(Https.httpUrls.designGetModel, dataList) // await Https.axiosPost(Https.httpUrls.designGetModel, dataList)
.then((rv: any) => { // .then((rv: any) => {
mannequinList = rv // mannequinList = rv
}) // })
.catch((rv) => { // .catch((rv) => {
}); // });
mannequinList.forEach((item:any) => { // mannequinList.forEach((item:any) => {
let nameTail = item?.split(".").pop().split("?").shift(); // let nameTail = item?.split(".").pop().split("?").shift();
let data = { // let data = {
imgUrl: item, // imgUrl: item,
name: // name:
'mannequin' + // 'mannequin' +
index + // index +
"." + // "." +
nameTail, // nameTail,
}; // };
img.push(data); // img.push(data);
index++; // index++;
}); // });
// a.setAttribute('href', URL.createObjectURL(blob)); // // a.setAttribute('href', URL.createObjectURL(blob));
// a.setAttribute('download', `collection.png`); // // a.setAttribute('download', `collection.png`);
// a.click(); // // a.click();
} // }
); // );
//单独导出模特图 // //单独导出模特图
// await html2canvas(rightContentImgBlock, { useCORS: true, scale: 3 }).then( // // await html2canvas(rightContentImgBlock, { useCORS: true, scale: 3 }).then(
// (canvas) => { // // (canvas) => {
// let blob: any = dataURLtoBlob( // // let blob: any = dataURLtoBlob(
// canvas.toDataURL("image/png") // // canvas.toDataURL("image/png")
// ); // // );
// let allBoardData: any = // // let allBoardData: any =
// this.store.state.UploadFilesModule.allBoardData; // // this.store.state.UploadFilesModule.allBoardData;
// let index = 0; // // let index = 0;
// img.push({ // // img.push({
// imgUrl: URL.createObjectURL(blob), // // imgUrl: URL.createObjectURL(blob),
// name: "achievement.png", // // name: "achievement.png",
// },) // // },)
// this.likeDesignCollectionList.forEach((item:any) => { // // this.likeDesignCollectionList.forEach((item:any) => {
// let data = { // // let data = {
// imgUrl:item.designItemUrl, // // imgUrl:item.designItemUrl,
// name:item.pictureName // // name:item.pictureName
// } // // }
// img.push(data) // // img.push(data)
// }); // // });
// } // // }
// ); // // );
// return // // return
this.downImg(img); // this.downImg(img);
}, // },
//打开图片详情 //打开图片详情
designDetail( designDetail(
@@ -1186,34 +1186,34 @@ export default defineComponent({
}); });
}, },
// imgDataUrl 数据的url数组 // imgDataUrl 数据的url数组
downImg(imagesParams: any) { // downImg(imagesParams: any) {
let _this: any = this; // let _this: any = this;
let zip = new JSZip(); // let zip = new JSZip();
let cache: any = {}; // let cache: any = {};
let promises = []; // let promises = [];
for (let item of imagesParams) { // for (let item of imagesParams) {
const promise = _this // const promise = _this
.getImgArrayBuffer(item.imgUrl) // .getImgArrayBuffer(item.imgUrl)
.then((data: any) => { // .then((data: any) => {
// 下载文件, 并存成ArrayBuffer对象(blob) // // 下载文件, 并存成ArrayBuffer对象(blob)
zip.file(item.name, data, { binary: true }); // 逐个添加文件 // zip.file(item.name, data, { binary: true }); // 逐个添加文件
cache[item.title] = data; // cache[item.title] = data;
}); // });
promises.push(promise); // promises.push(promise);
} // }
Promise.all(promises) // Promise.all(promises)
.then(() => { // .then(() => {
zip.generateAsync({ type: "blob" }).then((content: any) => { // zip.generateAsync({ type: "blob" }).then((content: any) => {
// 生成二进制流 // // 生成二进制流
FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件 自定义文件名 // FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件 自定义文件名
this.isShowMark = false; // this.isShowMark = false;
}); // });
}) // })
.catch((res) => { // .catch((res) => {
message.warning(this.t('HomeView.jsContent3')); // message.warning(this.t('HomeView.jsContent3'));
this.isShowMark = false; // this.isShowMark = false;
}); // });
}, // },
}, },
}); });
</script> </script>