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

修改对图片比例缩小后使用的图片大小

Browse Source
This commit is contained in:
X1627315083
2024-10-10 17:01:15 +08:00
parent 03a85a3642
commit 223a6d8385
3 changed files with 237 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -197,6 +197,12 @@
</div>
<div class="exportCanvasBox_center">
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="pencilbtnStyle"></div>
<div>
<div>
<div></div>
<span>16:9</span>
</div>
</div>
</div>
<div class="exportCanvasBox_scroll">
<div></div>
@@ -372,22 +378,201 @@ export default defineComponent({
let userlikeGroupId = 0
let imgWidth = {} //这是设置画布等宽
let submitCanvasContent = null
let init = (productData) => {
showUpgradePlan.value = true;
let contentKeyList = []
let init = (productData)=>{
userlikeGroupId = productData.userlikeGroupId
clearTimeout(submitCanvasContent)
allBoardData.value[productData.key] = productData.imgList;
contentKeyList = [
"disposeMoodboard",
"moodboardFiles",
"printboardFiles",
"colorBoards",
"sketchboardFiles",
"likeDesignCollectionList",
productData.key,
];
isShowMark.value = true
nextTick(async ()=>{
let oldExportCanvas
let localCanvas = localStorage.getItem('canvasContent')
let localUserlikeGroupId = localStorage.getItem('userlikeGroupId')
let currentTime = localStorage.getItem('currentTime')
oldExportCanvas = await new Promise((resolve, reject) => {
if(localUserlikeGroupId == userlikeGroupId && (new Date().getTime() - currentTime < 21600000)){
Modal.confirm({
title: useI18.t('exportModel.jsContent8'),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
localCanvas = localCanvas?JSON.parse(localCanvas):null
resolve(localCanvas)
},
onCancel(){
resolve(null)
}
});
}else{
resolve(null)
}
})
if(!oldExportCanvas){
oldExportCanvas = await new Promise((resolve, reject) => {
Https.axiosPost(Https.httpUrls.exportSearch, data)
.then((rv) => {
resolve(rv)
})
.catch((rv) => {
resolve(null)
});
})
}
createCanvas(oldExportCanvas)
})
}
let setCanvasData = ()=>{
let oldKey = "";
let margin = 20; //每个图形边距
let maxHeight = 0
let sketchXy = {x:0,y:0}
let data = {
userLikeGroupId:userlikeGroupId
}
contentKeyList.forEach((item)=>{
if(item !== 'likeDesignCollectionList')imgWidth[item] = setImageWidth(item)
})
// arr.forEach((item,index)=>{
if(oldExportCanvas){
canvasWH.value.height = oldExportCanvas.canvasHeight
canvas.setHeight(canvasWH.value.height);
canvas.loadFromJSON(oldExportCanvas, () => {});
isShowMark.value = false
}else{
isShowMark.value = false
// await nextTick(async ()=>{
// for (const item of arr) {
// for (const key in allBoardData.value) {
// if (item == key) {
// //循环渲染顺序
// let sketchGroupingItem = [];
// if (
// item == "moodboardFiles" &&
// !disposeMoodboardShow
// ) {
// continue;
// }
// for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
// await new Promise(async (resolve, reject) => {
// if(!allItem){
// resolve()
// }
// maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
// if (key == "colorBoards") {
// let rect = setGroup(allItem)
// if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
// position.x = 0;
// position.y = maxHeight;
// }
// 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) => {
// if(item == 'likeDesignCollectionList')imgWidth[item] = setImageWidth(key,img);
// let scaleWH = imgWidth[item] / img.width; //计算放到画布上缩小倍率
// if(key == "sketchboardFiles"){
// if(allItemIndex == 0){
// position.x = 0;
// position.y = maxHeight;
// }
// }else{
// if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
// position.x = 0;
// position.y = maxHeight;
// }
// }
// setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
// position.height = img.height * scaleWH + margin;
// if (key == "sketchboardFiles") {
// if (sketchGroupingItem.length <3) {
// sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
// }
// if (sketchGroupingItem.length >2) {
// let sketchXyIndex = {
// maxIndex: 0,
// maxNum: 0,
// minNum: 999999,
// minIndex: 0,
// };
// sketchGroupingItem.forEach(
// (sketchItem,sketchIndex) => {
// if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
// sketchXyIndex.minNum = sketchItem.y + sketchItem.height
// sketchXyIndex.minIndex = sketchIndex;
// }
// if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
// sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
// sketchXyIndex.maxIndex = sketchIndex;
// }
// }
// );
// sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
// // sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
// if (allBoardData.value[key].length == allItemIndex + 1) {
// maxHeight = sketchXyIndex.maxNum
// } else {
// position = sketchGroupingItem[sketchXyIndex.minIndex];
// }
// }
// }
// if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
// }else{
// position.x += img.width * scaleWH + margin;
// }
// img.lock_rotation = true;
// oldKey = key;
// resolve()
// canvas.add(img);
// },{ crossOrigin: "Anonymous" });
// }
// });
// }
// }
// }
// if(position.y+position.height>canvasWH.value.height){
// canvasWH.value.height = Math.floor(position.y+position.height)
// canvas.setHeight(canvasWH.value.height);
// }
// }
// })
isShowMark.value = false
}
updateCanvasState('')//加载完成后记录一下
}
let createCanvas = (oldExportCanvas) => {
showUpgradePlan.value = true;
clearTimeout(submitCanvasContent)
canvasWH.value.height = 100
normalCanvasState.value = []
reverseCanvasState.value = []
allBoardData.value.likeDesignCollectionList =
likeDesignCollectionList;
allBoardData.value[productData.key] = productData.imgList;
nextTick().then(async () => {
let exportCanvasBoxCanvas = document.querySelector('.Export .exportCanvasBox_center')
canvasWH.value.width = exportCanvasBoxCanvas.offsetWidth - 10
let canvasBox = document.querySelector(".Export .exportCanvasBox_center");
canvasWH.value.width = canvasBox.offsetWidth - 10
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
var canvasDom = document.createElement("canvas");
@@ -446,177 +631,8 @@ export default defineComponent({
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
let arr = [
"disposeMoodboard",
"moodboardFiles",
"printboardFiles",
"colorBoards",
"sketchboardFiles",
"likeDesignCollectionList",
productData.key,
];
let oldKey = "";
let margin = 20; //每个图形边距
let maxHeight = 0
let sketchXy = {x:0,y:0}
let data = {
userLikeGroupId:userlikeGroupId
}
arr.forEach((item)=>{
if(item !== 'likeDesignCollectionList')imgWidth[item] = setImageWidth(item)
})
isShowMark.value = true
let oldExportCanvas
let localCanvas = localStorage.getItem('canvasContent')
let localUserlikeGroupId = localStorage.getItem('userlikeGroupId')
let currentTime = localStorage.getItem('currentTime')
oldExportCanvas = await new Promise((resolve, reject) => {
if(localUserlikeGroupId == userlikeGroupId && (new Date().getTime() - currentTime < 21600000)){
Modal.confirm({
title: useI18.t('exportModel.jsContent8'),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
localCanvas = localCanvas?JSON.parse(localCanvas):null
resolve(localCanvas)
},
onCancel(){
resolve(null)
}
});
}else{
resolve(null)
}
})
if(!oldExportCanvas){
oldExportCanvas = await new Promise((resolve, reject) => {
Https.axiosPost(Https.httpUrls.exportSearch, data)
.then((rv) => {
resolve(rv)
})
.catch((rv) => {
resolve(null)
});
})
}
// arr.forEach((item,index)=>{
if(oldExportCanvas){
canvasWH.value.height = oldExportCanvas.canvasHeight
canvas.setHeight(canvasWH.value.height);
canvas.loadFromJSON(oldExportCanvas, () => {});
isShowMark.value = false
}else{
await nextTick(async ()=>{
for (const item of arr) {
for (const key in allBoardData.value) {
if (item == key) {
//循环渲染顺序
let sketchGroupingItem = [];
if (
item == "moodboardFiles" &&
!disposeMoodboardShow
) {
continue;
}
for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
await new Promise(async (resolve, reject) => {
if(!allItem){
resolve()
}
maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
if (key == "colorBoards") {
let rect = setGroup(allItem)
if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
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) => {
if(item == 'likeDesignCollectionList')imgWidth[item] = setImageWidth(key,img);
let scaleWH = imgWidth[item] / img.width; //计算放到画布上缩小倍率
if(key == "sketchboardFiles"){
if(allItemIndex == 0){
position.x = 0;
position.y = maxHeight;
}
}else{
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
}
setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
position.height = img.height * scaleWH + margin;
if (key == "sketchboardFiles") {
if (sketchGroupingItem.length <3) {
sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
}
if (sketchGroupingItem.length >2) {
let sketchXyIndex = {
maxIndex: 0,
maxNum: 0,
minNum: 999999,
minIndex: 0,
};
sketchGroupingItem.forEach(
(sketchItem,sketchIndex) => {
if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
sketchXyIndex.minNum = sketchItem.y + sketchItem.height
sketchXyIndex.minIndex = sketchIndex;
}
if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
sketchXyIndex.maxIndex = sketchIndex;
}
}
);
sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
if (allBoardData.value[key].length == allItemIndex + 1) {
maxHeight = sketchXyIndex.maxNum
} else {
position = sketchGroupingItem[sketchXyIndex.minIndex];
}
}
}
if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
}else{
position.x += img.width * scaleWH + margin;
}
img.lock_rotation = true;
oldKey = key;
resolve()
canvas.add(img);
},{ crossOrigin: "Anonymous" });
}
});
}
}
}
if(position.y+position.height>canvasWH.value.height){
canvasWH.value.height = Math.floor(position.y+position.height)
canvas.setHeight(canvasWH.value.height);
}
}
})
isShowMark.value = false
}
updateCanvasState('')//加载完成后记录一下
setOperation('move')
submitCanvasContent = setInterval(()=>{
let data = setCanvasContent(true)
@@ -638,7 +654,6 @@ export default defineComponent({
let height = canvasBox.offsetHeight / (canvasWH.value.height / canvasBox.offsetHeight )
let scale = (canvasWH.value.height - canvasBoxDom.offsetHeight) / (canvasBoxDom.offsetHeight - height)
let mouseDownOperation = (event)=>{//按下
console.log(canvasWH.value.height , canvasBoxDom.offsetHeight,canvasBoxDom.offsetHeight , height);
let position = {
y:event.screenY,
top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0