@@ -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
diff --git a/src/component/modules/generalMiniCanvas.vue b/src/component/modules/generalMiniCanvas.vue
index b270f6ef..fb659c20 100644
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -1,39 +1,40 @@