部分页面调整
This commit is contained in:
X1627315083
@@ -467,109 +467,113 @@ export default defineComponent({
|
||||
canvas.loadFromJSON(oldExportCanvas, () => {});
|
||||
isShowMark.value = false
|
||||
}else{
|
||||
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(!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;
|
||||
nextTick(async ()=>{
|
||||
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(!allItem){
|
||||
resolve()
|
||||
}
|
||||
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(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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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];
|
||||
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(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;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
|
||||
}else{
|
||||
position.x += img.width * scaleWH + margin;
|
||||
}
|
||||
img.lock_rotation = true;
|
||||
canvas.add(img);
|
||||
oldKey = key;
|
||||
// setTimeout(() => {
|
||||
resolve()
|
||||
// }, 1000);
|
||||
},{ crossOrigin: "Anonymous" });
|
||||
}
|
||||
});
|
||||
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;
|
||||
canvas.add(img);
|
||||
oldKey = key;
|
||||
// setTimeout(() => {
|
||||
resolve()
|
||||
// }, 1000);
|
||||
},{ crossOrigin: "Anonymous" });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if(position.y+position.height>canvasWH.value.height){
|
||||
canvasWH.value.height = Math.floor(position.y+position.height)
|
||||
canvas.setHeight(canvasWH.value.height);
|
||||
}
|
||||
}
|
||||
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('')//加载完成后记录一下
|
||||
@@ -689,7 +693,6 @@ export default defineComponent({
|
||||
objects.forEach(function(obj) {
|
||||
var objBottom = obj.top + obj.height*obj.scaleY;
|
||||
if (objBottom > maxHeight) {
|
||||
console.log(obj);
|
||||
maxHeight = objBottom;
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user