Skip to content

E
electron-printer
Commit 9eb1e532 by linjinhong
Options

测试提交网格canvas添加

parent a236d1a8
Showing with 376 additions and 39 deletions
config/env.json
{ {
"apiApiHost":"https://factory.jomalls.com/api", "apiApiHost":"http://10.168.31.142:8060/api",
"fileApiUrl":"https://factory.jomalls.com/upload/factory", "fileApiUrl":"http://10.168.31.142:80/upload/factory",
"visionUrl":"https://console.jomalls.com" "visionUrl":"https://console.jomalls.com"
} }
src/store/index.js
...@@ -5,7 +5,7 @@ Vue.use(Vuex); ...@@ -5,7 +5,7 @@ Vue.use(Vuex);
const defaultSetting = { const defaultSetting = {
gridShow: 1, gridShow: 1,
language: "cn", language: "cn",
gridValue: 1, gridValue: 0,
autoPrint: false, autoPrint: false,
gridSpacing: "10mm", gridSpacing: "10mm",
}; };
...@@ -16,11 +16,12 @@ export default new Vuex.Store({ ...@@ -16,11 +16,12 @@ export default new Vuex.Store({
productDetail: {}, productDetail: {},
desktopDevice: 1, //1是兄弟，2是其他 desktopDevice: 1, //1是兄弟，2是其他
WHproportion: 1, //宽高比例 WHproportion: 1, //宽高比例
isPreView: false, //宽高比例 defaultProportion: 1,
isPreView: false,
actionIndex: -1, actionIndex: -1,
systemSetting: { systemSetting: {
gridShow: 1, gridShow: 1,
gridValue: 1, gridValue: 0,
unit: "mm", unit: "mm",
language: "cn", language: "cn",
autoPrint: false, autoPrint: false,
...@@ -35,6 +36,14 @@ export default new Vuex.Store({ ...@@ -35,6 +36,14 @@ export default new Vuex.Store({
h: 0, h: 0,
w: 0, w: 0,
}, },
{
label: "18×22",
value: 1,
row: 18,
col: 22,
h: 0,
w: 0,
},
], ],
}, },
mutations: { mutations: {
...@@ -62,12 +71,24 @@ export default new Vuex.Store({ ...@@ -62,12 +71,24 @@ export default new Vuex.Store({
setWHproportion(state, value) { setWHproportion(state, value) {
state.WHproportion = value; state.WHproportion = value;
}, },
setDefaultproportion(state, value) {
state.defaultProportion = value;
},
setIsPreView(state, value) { setIsPreView(state, value) {
state.isPreView = value; state.isPreView = value;
}, },
setGrid(state, { h, w }) { setGrid(state) {
state.grid[0].h = h; // state.grid[0].h = h;
state.grid[0].w = w; // state.grid[0].w = w;
state.grid.forEach((el) => {
if (el.value == 1) {
el.h = 540 * state.WHproportion;
el.w = 480 * state.WHproportion;
} else {
el.h = 660 * state.WHproportion;
el.w = 540 * state.WHproportion;
}
});
}, },
}, },
getters: { getters: {
......
src/utils/index.js
import store from "@/store";
import Vue from "vue";
export function pxToUnit(px, unit) { export function pxToUnit(px, unit) {
const setting = this.$dataStore.get("setting"); const setting = this.$dataStore.get("setting");
if (!unit) { if (!unit) {
...@@ -30,3 +32,204 @@ export function unitToPx(px, unit) { ...@@ -30,3 +32,204 @@ export function unitToPx(px, unit) {
} }
return px; return px;
} }
/**
* @description: 计算出当前裁切区域的位置坐标
* @param {* fabric.canvas 实例化} canvas
* @param {* 是否是滚轮} mousewheel
*/
export const cutArea = (canvasEl, mousewheel) => {
if (!canvasEl.cutCanvas) {
canvasEl.cutCanvas = document.createElement("canvas");
canvasEl.cutCanvas.id = `${canvasEl.id}_cut`;
}
canvasEl.cutCanvas.width = canvasEl.width;
canvasEl.cutCanvas.height = canvasEl.height;
canvasEl.cutCanvas.cssText = `position:absolute;top:0;left:0;width:${canvasEl.width}px;height:${canvasEl.height}px`;
let cutCtx = canvasEl.cutCanvas.getContext("2d");
cutCtx.fillStyle = "#f0f2f5";
cutCtx.fillRect(0, 0, canvasEl.width, canvasEl.height);
let {
left,
top,
width,
height,
boundaryLeft,
boundaryTop,
boundaryWidth,
boundaryHeight,
} = getRealBoundary(canvasEl, mousewheel);
//存储正方形边界
canvasEl.set({
boundaryLeft,
boundaryTop,
boundaryWidth,
boundaryHeight,
});
cutCtx.clearRect(boundaryLeft, boundaryTop, boundaryWidth, boundaryHeight);
//设置阴影
cutCtx.save();
cutCtx.strokeStyle = "#3d47bf";
cutCtx.shadowColor = "rgba(0,0,0,1)";
cutCtx.shadowOffsetX = 0;
cutCtx.shadowOffsetY = 0;
cutCtx.shadowBlur = 10;
cutCtx.strokeRect(boundaryLeft, boundaryTop, boundaryWidth, boundaryHeight);
cutCtx.restore();
cutCtx.strokeStyle = "#f44";
cutCtx.strokeRect(left, top, width, height);
var diy = document.getElementById(canvasEl.id);
insertAfter(canvasEl.cutCanvas, diy);
canvasEl.set({
cutWidth: width,
cutHeight: height,
});
//设置蒙版图片
if (canvasEl.mask_url) {
if (!canvasEl.maskDiv) {
canvasEl.maskDiv = document.createElement("div");
canvasEl.maskDiv.className = "foxpsd_mask"; //网格图片位置
// canvasEl.maskDiv.id = canvasEl.id +'_img' //网格图片位置
canvasEl.maskDiv.style.pointerEvents = "none";
canvasEl.maskDiv.style.position = "absolute";
canvasEl.maskDiv.style.textAlign = "center";
let mask_img = document.createElement("img");
mask_img.id = canvasEl.id + "_img";
mask_img.src = canvasEl.mask_url;
mask_img.style.position = "absolute";
mask_img.style.left = "50%";
mask_img.style.top = "50%";
mask_img.style.transform = "translate(-50%,-50%)";
mask_img.style.maxWidth = "100%";
mask_img.style.maxHeight = "100%";
mask_img.style.display = "inline-block";
canvasEl.maskDiv.appendChild(mask_img);
insertAfter(
canvasEl.maskDiv,
document.getElementById(canvasEl.cutCanvas.id)
);
}
canvasEl.maskDiv.style.width = `${boundaryWidth}px`;
canvasEl.maskDiv.style.height = `${boundaryHeight}px`;
canvasEl.maskDiv.style.top = `${boundaryTop}px`;
canvasEl.maskDiv.style.left = `${boundaryLeft}px`;
}
};
//
export function initCrop() {
var canvas = document.createElement("canvas");
const grid = store.state.grid[store.state.systemSetting.gridValue];
canvas.width = grid.w;
canvas.height = grid.h;
canvas.style.width = grid.w + "px";
canvas.style.height = grid.h + "px";
canvas.style.background = "transparent";
canvas.style.position = "absolute";
canvas.style.left = "5%";
canvas.style.top = "50%";
canvas.style.transform = "translate(0, -50%)";
console.log(115, canvas);
cutArea(canvas);
}
// 获得裁切区域边界
const getRealBoundary = function(canvasEl, mousewheel) {
//剪切区域的最大高度 和宽度
let maxBili = 0.75;
let maxWidth = canvasEl.width * maxBili;
let maxHeight = canvasEl.height * maxBili;
if (maxWidth > maxHeight) {
maxWidth = maxHeight;
} else {
maxHeight = maxWidth;
}
let cutWidth, cutHeight;
let plateRATIO = canvasEl.origWidth / canvasEl.origHeight;
if (!mousewheel) {
if (maxHeight * plateRATIO < maxWidth) {
cutWidth = maxHeight * plateRATIO;
cutHeight = maxHeight;
} else {
cutWidth = maxWidth;
cutHeight = maxWidth / plateRATIO;
}
//oldCutWidth 第一次的剪切宽度
if (!canvasEl.oldCutWidth) {
canvasEl.set({
oldCutWidth: cutWidth,
oldCutHeight: cutHeight,
});
}
}
let zoom = canvasEl.getZoom();
let x = canvasEl.viewportTransform[4];
let y = canvasEl.viewportTransform[5];
let left, top, width, height;
if (mousewheel) {
//根据原始的尺寸进行处理，zoom 是根据原始比例进行的缩放
left = (canvasEl.width * zoom - canvasEl.oldCutWidth * zoom) / 2 + x;
top = (canvasEl.height * zoom - canvasEl.oldCutHeight * zoom) / 2 + y;
width = canvasEl.oldCutWidth * zoom;
height = canvasEl.oldCutHeight * zoom;
} else {
//第一次
left = (canvasEl.width - cutWidth) / 2;
top = (canvasEl.height - cutHeight) / 2;
width = cutWidth;
height = cutHeight;
}
let boundaryLeft, boundaryTop, boundaryWidth, boundaryHeight;
boundaryWidth = width > height ? width : height;
boundaryHeight = boundaryWidth;
boundaryLeft = left - (boundaryWidth - width) / 2;
boundaryTop = top - (boundaryHeight - height) / 2;
return {
plateRATIO,
left,
top,
width,
height,
boundaryLeft,
boundaryTop,
boundaryWidth,
boundaryHeight,
};
};
//插入元素
function insertAfter(newElement, targetElement) {
// newElement是要追加的元素 targetElement 是指定元素的位置
if (!targetElement) return;
var parent = targetElement.parentNode; // 找到指定元素的父节点
if (parent.lastChild == targetElement) {
// 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
parent.appendChild(newElement, targetElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
src/views/design/head/index.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import bus from "@/bus"; import bus from "@/bus";
import PrintDialog from "./printDialog.vue"; import PrintDialog from "./printDialog.vue";
import { ipcRenderer } from "electron"; import { ipcRenderer } from "electron";
import { grid } from "../data"; // import { grid } from "../data";
import pkg from "../../../../package.json"; import pkg from "../../../../package.json";
import UpdateDialog from "@/views/design/updateDialog.vue"; import UpdateDialog from "@/views/design/updateDialog.vue";
import path from "path"; // 引入 path 模块 import path from "path"; // 引入 path 模块
...@@ -10,6 +10,7 @@ import store from "@/store/index.js"; ...@@ -10,6 +10,7 @@ import store from "@/store/index.js";
import axios from "axios"; import axios from "axios";
const uuid = require("uuid"); const uuid = require("uuid");
const fs = require("fs"); const fs = require("fs");
import { mapState } from "vuex";
export default { export default {
components: { PrintDialog, UpdateDialog }, components: { PrintDialog, UpdateDialog },
...@@ -80,18 +81,20 @@ export default { ...@@ -80,18 +81,20 @@ export default {
"hsla(209, 100%, 56%, 0.73)", "hsla(209, 100%, 56%, 0.73)",
"#c7158577", "#c7158577",
], ],
grid,
}; };
}, },
computed: { computed: {
actionList() { actionList() {
return this.$store.getters.getActionList; return this.$store.getters.getActionList;
}, },
...mapState(["grid", "defaultProportion"]),
}, },
mounted() { mounted() {
// console.log(pkg, "pkg"); // console.log(pkg, "pkg");
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.searchRef.focus(); this.$refs.searchRef.focus();
this.selectGridIndex = 0;
this.setting.gridValue = 0;
}); });
}, },
created() { created() {
...@@ -483,8 +486,18 @@ export default { ...@@ -483,8 +486,18 @@ export default {
return false; return false;
}, },
command(i) { command(i) {
if (this.setting.gridValue == i) return;
if (i === 1) {
this.$store.commit("setWHproportion", this.defaultProportion - 0.3);
this.$store.commit("setGrid");
} else {
this.$store.commit("setWHproportion", this.defaultProportion);
this.$store.commit("setGrid");
}
this.selectGridIndex = i; this.selectGridIndex = i;
this.setting.gridValue = i; this.setting.gridValue = i;
this.$store.commit("updateSystemSetting", { this.$store.commit("updateSystemSetting", {
field: "gridValue", field: "gridValue",
value: this.grid[i], value: this.grid[i],
...@@ -591,7 +604,12 @@ export default { ...@@ -591,7 +604,12 @@ export default {
</el-select> </el-select>
</div> </div>
<el-dropdown trigger="click" @command="command" :hide-on-click="false"> <el-dropdown
trigger="click"
@command="command"
:hide-on-click="false"
:disabled="true"
>
<el-button style="height: 100%;margin-right: 0" size="small" <el-button style="height: 100%;margin-right: 0" size="small"
>{{ grid[selectGridIndex].label }} >{{ grid[selectGridIndex].label }}
</el-button> </el-button>
......
src/views/design/main/index.vue
...@@ -6,8 +6,8 @@ const { ipcRenderer } = require("electron"); ...@@ -6,8 +6,8 @@ const { ipcRenderer } = require("electron");
import ImgSetting from "./imgSetting.vue"; import ImgSetting from "./imgSetting.vue";
import bus from "@/bus"; import bus from "@/bus";
import PrintDialog from "@/views/design/head/printDialog.vue"; import PrintDialog from "@/views/design/head/printDialog.vue";
import { mmToPx } from "@/utils"; import { mmToPx, initCrop } from "@/utils";
// import { raw } from "express";
const path = require("path"); const path = require("path");
const fs = require("fs"); const fs = require("fs");
const uuid = require("uuid"); const uuid = require("uuid");
...@@ -40,11 +40,13 @@ export default { ...@@ -40,11 +40,13 @@ export default {
} else { } else {
proportion = 1; proportion = 1;
} }
console.log(43, proportion);
this.$store.commit("setWHproportion", proportion); this.$store.commit("setWHproportion", proportion);
this.$store.commit("setGrid", { this.$store.commit("setDefaultproportion", proportion);
h: 540 * proportion, // this.$store.commit("setWHproportion", proportion);
w: 480 * proportion, this.$store.commit("setGrid");
}); // initCrop();
}); });
}, },
computed: { computed: {
...@@ -55,6 +57,7 @@ export default { ...@@ -55,6 +57,7 @@ export default {
!this.grid[this.systemSetting.gridValue] !this.grid[this.systemSetting.gridValue]
) )
return { w: 0, h: 0, v: 1 }; return { w: 0, h: 0, v: 1 };
return { return {
w: this.grid[this.systemSetting.gridValue].w, w: this.grid[this.systemSetting.gridValue].w,
v: this.grid[this.systemSetting.gridValue].value, v: this.grid[this.systemSetting.gridValue].value,
...@@ -156,17 +159,14 @@ export default { ...@@ -156,17 +159,14 @@ export default {
systemSetting: {}, systemSetting: {},
detail: {}, detail: {},
imgHeight: 0, imgHeight: 0,
selectImgList: [], selectImgList: [
{
productionFile: "D:\\work\\electron-printer\\print\\Input\\111.png",
designId: 1,
},
],
bus: 0, bus: 0,
PreViewGrid: {
label: "16×18",
value: 1,
row: 16,
col: 18,
h: 540,
w: 480,
},
showImgSetting: true, showImgSetting: true,
printDialogShow: true, printDialogShow: true,
parentHeight: 0, parentHeight: 0,
...@@ -178,6 +178,7 @@ export default { ...@@ -178,6 +178,7 @@ export default {
imgList: [], imgList: [],
viewImgList: [], viewImgList: [],
selectImgIndexList: [], selectImgIndexList: [],
currentImgIndex: 0,
isView: false, isView: false,
imgHistoryList: [[]], imgHistoryList: [[]],
imgHistoryIndex: 0, imgHistoryIndex: 0,
...@@ -240,6 +241,23 @@ export default { ...@@ -240,6 +241,23 @@ export default {
changeCheckFn(value) { changeCheckFn(value) {
console.log("check", value); console.log("check", value);
}, },
// systemSetting: {
// handler(newValue, oldValue) {
// if (this.selectImgList && this.selectImgList.length) {
// console.log("1", this.imgList);
// this.getBackFile(
// { files: [this.selectImgList[this.currentImgIndex]], size: null },
// (file) => {
// this.imgHistoryList.push(
// JSON.parse(JSON.stringify(this.imgList))
// );
// }
// );
// }
// },
// deep: true,
// immediate: true,
// },
}, },
methods: { methods: {
changePrintDialogShow() { changePrintDialogShow() {
...@@ -376,7 +394,7 @@ export default { ...@@ -376,7 +394,7 @@ export default {
); );
} }
}, },
selectImg(it) { selectImg(it, index) {
if (this.isView) { if (this.isView) {
this.isView = false; this.isView = false;
} }
...@@ -384,6 +402,7 @@ export default { ...@@ -384,6 +402,7 @@ export default {
// this.selectImgIndexList.push(i) // this.selectImgIndexList.push(i)
let item = this.imgList.find((img) => img.fileName === it.fileName); let item = this.imgList.find((img) => img.fileName === it.fileName);
if (item) return; if (item) return;
this.currentImgIndex = index;
console.log(this.detail.designImageSize); console.log(this.detail.designImageSize);
let size = null; let size = null;
if ( if (
...@@ -487,10 +506,11 @@ export default { ...@@ -487,10 +506,11 @@ export default {
this.$set(item, "h", data.h); this.$set(item, "h", data.h);
this.$set(item, "x", data.x); this.$set(item, "x", data.x);
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
this.drawCropMask();
}, },
resizing(index) {}, resizing(index) {},
rotating(data, item) { rotating(data, item) {
console.log(data); // console.log(data);
this.$set(item, "r", data.angle.toFixed(2)); this.$set(item, "r", data.angle.toFixed(2));
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
}, },
...@@ -840,6 +860,50 @@ export default { ...@@ -840,6 +860,50 @@ export default {
this.selectImgIndex = 0; this.selectImgIndex = 0;
this.getBackFile({ files: [this.selectImgList[0]] }); this.getBackFile({ files: [this.selectImgList[0]] });
}, },
initMaskCanvas() {
const canvas = this.$refs.maskCanvas;
const { w, h } = this.gridWH;
// 设置 Canvas 分辨率
canvas.width = w;
canvas.height = h;
// 初始绘制
this.drawCropMask();
},
// 绘制遮罩
drawCropMask() {
const canvas = this.$refs.maskCanvas;
const ctx = canvas.getContext("2d");
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制半透明遮罩
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 清除网格区域（显示下方内容）
ctx.clearRect(0, 0, this.gridWH.w, this.gridWH.h);
// 绘制网格边界线
ctx.strokeStyle = "#3d47bf";
ctx.lineWidth = 2;
ctx.strokeRect(0, 0, this.gridWH.w, this.gridWH.h);
console.log(888, canvas);
console.log("Mask Drawn");
},
// 响应式调整
resizeCanvas() {
this.$nextTick(() => {
const canvas = this.$refs.maskCanvas;
canvas.width = this.gridWH.w;
canvas.height = this.gridWH.h;
this.drawCropMask();
});
},
}, },
mounted() { mounted() {
this.imgHeight = window.screen.height + "px"; this.imgHeight = window.screen.height + "px";
...@@ -906,10 +970,17 @@ export default { ...@@ -906,10 +970,17 @@ export default {
this.listenUpload(); this.listenUpload();
}); });
document.addEventListener("click", this.handleClick); document.addEventListener("click", this.handleClick);
// 在页面加载完成后自动初始化
// window.addEventListener("load", () => {
// initCrop(); // 初始化裁剪功能
// }); // 初始化裁剪功能
this.initMaskCanvas();
window.addEventListener("resize", this.resizeCanvas);
}, },
beforeDestroy() { beforeDestroy() {
// 销毁组件时移除事件监听器 // 销毁组件时移除事件监听器
document.removeEventListener("click", this.handleClick); document.removeEventListener("click", this.handleClick);
window.removeEventListener("resize", this.resizeCanvas);
}, },
}; };
</script> </script>
...@@ -1076,7 +1147,7 @@ export default { ...@@ -1076,7 +1147,7 @@ export default {
v-for="(img, i) in selectImgList" v-for="(img, i) in selectImgList"
:key="i" :key="i"
class="img-item" class="img-item"
@click.stop.prevent="selectImg(img)" @click.stop.prevent="selectImg(img, i)"
> >
<img :key="i" style="width:100%" :src="img.productionFile" /> <img :key="i" style="width:100%" :src="img.productionFile" />
<!-- <span>{{ img.designId }}</span> --> <!-- <span>{{ img.designId }}</span> -->
...@@ -1250,7 +1321,7 @@ export default { ...@@ -1250,7 +1321,7 @@ export default {
<div <div
ref="sucaitu-img" ref="sucaitu-img"
:style="{ zIndex: item.zIndex }" :style="{ zIndex: item.zIndex }"
class="sucaitu-img img element" class="sucaitu-img img"
style="cursor: default" style="cursor: default"
> >
<img <img
...@@ -1286,6 +1357,7 @@ export default { ...@@ -1286,6 +1357,7 @@ export default {
class="sucaitu" class="sucaitu"
:style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }" :style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }"
> --> > -->
<div class="left-bg-color"> <div class="left-bg-color">
<el-color-picker <el-color-picker
color-format="hex" color-format="hex"
...@@ -1294,7 +1366,11 @@ export default { ...@@ -1294,7 +1366,11 @@ export default {
v-model="gridBg" v-model="gridBg"
></el-color-picker> ></el-color-picker>
</div> </div>
<div class="sucaitu" :style="{ width: '100%', height: '100%' }"> <div
class="sucaitu"
id="editView"
:style="{ width: '100%', height: '100%' }"
>
<vue-drag-resize-rotate <vue-drag-resize-rotate
:w="item.w" :w="item.w"
class-name="my-drag-resize-rotate" class-name="my-drag-resize-rotate"
...@@ -1316,7 +1392,7 @@ export default { ...@@ -1316,7 +1392,7 @@ export default {
:angle="item.r" :angle="item.r"
> >
<div <div
ref="sucaitu-img" ref="sucaituImg"
:class="{ active: index === selectIndex }" :class="{ active: index === selectIndex }"
:style="{ zIndex: item.zIndex }" :style="{ zIndex: item.zIndex }"
class="sucaitu-img img element" class="sucaitu-img img element"
...@@ -1341,6 +1417,15 @@ export default { ...@@ -1341,6 +1417,15 @@ export default {
</div> </div>
</vue-drag-resize-rotate> </vue-drag-resize-rotate>
</div> </div>
<!-- 新增 Canvas 遮罩层 -->
<canvas
ref="maskCanvas"
class="crop-canvas"
:style="{
width: gridWH.w + 'px',
height: gridWH.h + 'px',
}"
></canvas>
<div <div
:class="{ 'no-border-grid': systemSetting.gridShow !== 1 }" :class="{ 'no-border-grid': systemSetting.gridShow !== 1 }"
:style="{ :style="{
...@@ -1348,9 +1433,13 @@ export default { ...@@ -1348,9 +1433,13 @@ export default {
height: gridWH.h + 'px', height: gridWH.h + 'px',
}" }"
class="grid" class="grid"
id="grid"
> >
<div <div
:style="{ height: gridSpacing.h, lineHeight: gridSpacing.h }" :style="{
height: gridSpacing.h,
lineHeight: gridSpacing.h,
}"
class="grid-row" class="grid-row"
v-for="it in 100" v-for="it in 100"
:key="it" :key="it"
...@@ -1756,4 +1845,12 @@ img { ...@@ -1756,4 +1845,12 @@ img {
position: fixed; position: fixed;
z-index: 69; z-index: 69;
} }
.crop-canvas {
position: absolute;
top: 1px;
left: 1px;
pointer-events: none; /* 允许穿透操作 */
z-index: 2; /* 确保在元素上方 */
}
</style> </style>
src/views/login/index.vue
...@@ -40,12 +40,9 @@ export default { ...@@ -40,12 +40,9 @@ export default {
} else { } else {
proportion = 1; proportion = 1;
} }
this.$store.commit("setWHproportion", proportion); this.$store.commit("setWHproportion", proportion);
this.$store.commit("setGrid", { this.$store.commit("setGrid");
h: 540 * proportion,
w: 480 * proportion,
});
console.log(this.grid);
}); });
}, },
mounted() { mounted() {
...@@ -90,6 +87,7 @@ export default { ...@@ -90,6 +87,7 @@ export default {
} }
await this.$router.push("/design"); await this.$router.push("/design");
this.$store.commit("setDefaultSetting");
} }
}); });
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment