@@ -310,6 +309,7 @@ import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMov
import { useI18n } from "vue-i18n";
import {isMoible,calculateGradientCoordinate,base64ToFile} from '@/tool/util'
import publish from "@/component/WorksPage/publish.vue";
+import { connect } from "echarts";
export default defineComponent({
components: {
@@ -326,7 +326,7 @@ export default defineComponent({
})
let showUpgradePlan = ref(false);
- let canvas = reactive({});
+ let canvas = ref({});
// let canvasDom = ref()
let canvasWH = ref({
width: 400,
@@ -363,11 +363,11 @@ export default defineComponent({
let isLoadCanvas = false//撤回或者反撤回false为撤回
let userlikeGroupId = 0
let init = (productData) => {
+ showUpgradePlan.value = true;
userlikeGroupId = productData.userlikeGroupId
canvasWH.value.height = 100
normalCanvasState.value = []
reverseCanvasState.value = []
- showUpgradePlan.value = true;
allBoardData.value.likeDesignCollectionList =
likeDesignCollectionList;
allBoardData.value[productData.key] = productData.imgList;
@@ -470,6 +470,7 @@ export default defineComponent({
//循环渲染顺序
let imgWidth = setImageWidth(key); //这是设置画布等宽
+ // alert(imgWidth)
let sketchGroupingItem = [];
if (
item == "moodboardFiles" &&
@@ -501,62 +502,66 @@ export default defineComponent({
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;
- }
- }
- 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];
+ img.on('added', () => {
+ img.set({ crossOrigin: 'anonymous' });
+ 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(() => {
+ 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;
+ }
+ let str = `${img.width} + ${scaleWH}`
+ img.lock_rotation = true;
+ oldKey = key;
resolve()
- // }, 1000);
+ })
+
+ canvas.add(img);
+
},{ crossOrigin: "Anonymous" });
}
});
@@ -793,6 +798,7 @@ export default defineComponent({
let xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.responseType = "blob";
+ xmlhttp.withCredentials = false;
xmlhttp.onload = function () {
if (this.status == 200) {
resolve(this.response);
@@ -812,15 +818,27 @@ export default defineComponent({
// 下载文件, 并存成ArrayBuffer对象(blob)
zip.file(item.name, data, { binary: true }); // 逐个添加文件
cache[item.title] = data;
- });
+ })
promises.push(promise);
}
- Promise.all(promises)
+ Promise.all(promises)
.then(() => {
+ function downloadBlob(blob, filename) {
+ const link = document.createElement('a');
+ const url = URL.createObjectURL(blob);
+ link.href = url;
+ link.download = filename;
+ document.body.appendChild(link);
+ link.click();
+ URL.revokeObjectURL(url);
+ document.body.removeChild(link);
+ }
zip.generateAsync({ type: "blob" }).then((content) => {
// 生成二进制流
- FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件 自定义文件名
+ downloadBlob(content,'DesignFiles')
+ // FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件 自定义文件名
isShowMark.value = false;
+
});
setSubmit()//导出的时候保存
initAligningGuidelines(canvas,true)