Skip to content

E
electron-printer
Commit 1afb0bd1 by linjinhong
Options

优化图片在网格中展示情况，超过网格图片进行遮蔽，目前不支持旋转

parent 9eb1e532
Showing with 184 additions and 261 deletions
package.json
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
"electron-updater": "^6.2.1", "electron-updater": "^6.2.1",
"element-ui": "^2.13.0", "element-ui": "^2.13.0",
"express": "^4.17.1", "express": "^4.17.1",
"fabric": "^5.2.4",
"html2canvas": "^1.4.1", "html2canvas": "^1.4.1",
"lodash-id": "^0.14.0", "lodash-id": "^0.14.0",
"log4js": "^6.9.1", "log4js": "^6.9.1",
......
src/components/vueDrag.vue
...@@ -87,7 +87,7 @@ export default { ...@@ -87,7 +87,7 @@ export default {
}, },
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);
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
}, },
}, },
......
src/store/index.js
...@@ -14,6 +14,7 @@ export default new Vuex.Store({ ...@@ -14,6 +14,7 @@ export default new Vuex.Store({
actionList: [], actionList: [],
imgList: [], imgList: [],
productDetail: {}, productDetail: {},
windowWH: { width: 0, height: 0 },
desktopDevice: 1, //1是兄弟，2是其他 desktopDevice: 1, //1是兄弟，2是其他
WHproportion: 1, //宽高比例 WHproportion: 1, //宽高比例
defaultProportion: 1, defaultProportion: 1,
...@@ -90,6 +91,9 @@ export default new Vuex.Store({ ...@@ -90,6 +91,9 @@ export default new Vuex.Store({
} }
}); });
}, },
setWindows(state, { width, height }) {
state.windowWH = { width, height };
},
}, },
getters: { getters: {
systemSetting(state) { systemSetting(state) {
......
src/views/design/head/printDialog.vue
...@@ -292,9 +292,9 @@ export default { ...@@ -292,9 +292,9 @@ export default {
}); });
}, },
return_data() { return_data() {
let dom_id = `${this.imgList[0].fileName}_0`; // let dom_id = `${this.imgList[0].fileName}_0`;
// const image = document.getElementById(dom_id);
const image = document.getElementById(dom_id); const image = document.getElementById("imgBox");
const line = document.getElementById("line"); const line = document.getElementById("line");
// 使用getBoundingClientRect获取更精确的位置信息 // 使用getBoundingClientRect获取更精确的位置信息
......
src/views/design/main/imgSetting.vue
...@@ -51,7 +51,7 @@ export default { ...@@ -51,7 +51,7 @@ export default {
"position_before_px", "position_before_px",
JSON.parse(JSON.stringify(this.item)) JSON.parse(JSON.stringify(this.item))
); );
console.log("setting", setting); // console.log("setting", setting);
let x_mm, w_mm, h_mm, y_mm; let x_mm, w_mm, h_mm, y_mm;
x_mm = this.pxToUnit(this.item.x); x_mm = this.pxToUnit(this.item.x);
...@@ -219,8 +219,7 @@ export default { ...@@ -219,8 +219,7 @@ export default {
<el-col :span="8"> <el-col :span="8">
<el-form-item label="z："> <el-form-item label="z：">
<div class="form-content"> <div class="form-content">
<el-input @blur="formChange" v-model="form.zIndex"> <el-input @blur="formChange" v-model="form.zIndex"> </el-input>
</el-input>
<div class="set-value"> <div class="set-value">
<i @click="addValue('zIndex')" class="el-icon-arrow-up"></i> <i @click="addValue('zIndex')" class="el-icon-arrow-up"></i>
<i <i
......
src/views/design/main/index.vue
...@@ -2,11 +2,12 @@ ...@@ -2,11 +2,12 @@
import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate"; import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
import PicScrollbarBox from "../../../components/PicScrollbarBox.vue"; import PicScrollbarBox from "../../../components/PicScrollbarBox.vue";
const { ipcRenderer } = require("electron"); const { ipcRenderer } = require("electron");
// import { grid } from "../data"; // import { fabric } from "fabric";
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, initCrop } from "@/utils"; import { mmToPx } from "@/utils";
const path = require("path"); const path = require("path");
const fs = require("fs"); const fs = require("fs");
...@@ -40,13 +41,11 @@ export default { ...@@ -40,13 +41,11 @@ 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("setWindows", { width, height });
this.$store.commit("setDefaultproportion", proportion); this.$store.commit("setDefaultproportion", proportion);
// this.$store.commit("setWHproportion", proportion);
this.$store.commit("setGrid"); this.$store.commit("setGrid");
// initCrop();
}); });
}, },
computed: { computed: {
...@@ -129,7 +128,13 @@ export default { ...@@ -129,7 +128,13 @@ export default {
return null; return null;
}, },
...mapState(["desktopDevice", "productDetail", "WHproportion", "grid"]), ...mapState([
"desktopDevice",
"productDetail",
"WHproportion",
"grid",
"windowWH",
]),
}, },
data() { data() {
return { return {
...@@ -185,6 +190,9 @@ export default { ...@@ -185,6 +190,9 @@ export default {
row: 8, row: 8,
img, img,
col: 7, col: 7,
oldImgStyle: "",
drrDom: null,
imgDom: null,
}; };
}, },
watch: { watch: {
...@@ -195,7 +203,7 @@ export default { ...@@ -195,7 +203,7 @@ export default {
if (this.imgList.length > 0) { if (this.imgList.length > 0) {
this.$nextTick(() => { this.$nextTick(() => {
let dom = document.getElementsByClassName("drr"); let dom = document.getElementsByClassName("drr");
// console.log("dom", dom); console.log("dom", dom);
this.imgList.forEach((el, i) => { this.imgList.forEach((el, i) => {
let dom_i = document.getElementsByClassName("drr")[i]; let dom_i = document.getElementsByClassName("drr")[i];
...@@ -241,23 +249,23 @@ export default { ...@@ -241,23 +249,23 @@ export default {
changeCheckFn(value) { changeCheckFn(value) {
console.log("check", value); console.log("check", value);
}, },
// systemSetting: { isView: {
// handler(newValue, oldValue) { handler(newValue) {
// if (this.selectImgList && this.selectImgList.length) { if (!newValue) {
// console.log("1", this.imgList); this.$nextTick(() => {
// this.getBackFile( this.drrDom = document.getElementsByClassName("drr")[0];
// { files: [this.selectImgList[this.currentImgIndex]], size: null }, this.imgDom = document.getElementById("imgBox");
// (file) => { console.log(257, this.imgDom);
// this.imgHistoryList.push( if (this.imgDom)
// JSON.parse(JSON.stringify(this.imgList)) this.imgDom.style.webkitClipPath = this.oldImgStyle;
// ); });
// } } else {
// ); this.drrDom = "";
// } this.imgDom = "";
// }, }
// deep: true, },
// immediate: true, immediate: true,
// }, },
}, },
methods: { methods: {
changePrintDialogShow() { changePrintDialogShow() {
...@@ -398,26 +406,28 @@ export default { ...@@ -398,26 +406,28 @@ export default {
if (this.isView) { if (this.isView) {
this.isView = false; this.isView = false;
} }
this.$nextTick(() => {
// 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; this.currentImgIndex = index;
console.log(this.detail.designImageSize); console.log(this.detail.designImageSize);
let size = null; let size = null;
if ( if (
this.detail.mssWidth && this.detail.mssWidth &&
this.detail.adjustable && this.detail.adjustable &&
this.detail.mssHeight this.detail.mssHeight
) { ) {
size = { size = {
width: this.detail.mssWidth, width: this.detail.mssWidth,
height: this.detail.mssHeight, height: this.detail.mssHeight,
}; };
} }
this.getBackFile({ files: [it], size }, (file) => { this.getBackFile({ files: [it], size }, (file) => {
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
});
}); });
// this.selectImgIndexList = Array.from(new Set(this.selectImgIndexList)) // this.selectImgIndexList = Array.from(new Set(this.selectImgIndexList))
// this.getBackFile({ files: [it], size }); // this.getBackFile({ files: [it], size });
}, },
...@@ -498,6 +508,7 @@ export default { ...@@ -498,6 +508,7 @@ export default {
this.$set(item, "y", data.y); this.$set(item, "y", data.y);
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.getCutArea();
}, },
resizeStop(data, item) { resizeStop(data, item) {
if (this.selectIndex < 0 && this.imgList.length) this.selectIndex = 0; if (this.selectIndex < 0 && this.imgList.length) this.selectIndex = 0;
...@@ -506,12 +517,15 @@ export default { ...@@ -506,12 +517,15 @@ 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(); if (!this.drrDom && !this.imgDom) {
this.drrDom = document.getElementsByClassName("drr")[0];
this.imgDom = document.getElementById("imgBox");
}
this.getCutArea();
}, },
resizing(index) {}, resizing(index) {},
rotating(data, item) { rotating(data, item) {
// console.log(data); this.$set(item, "r", data.angle);
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)));
}, },
outsideClick(e) { outsideClick(e) {
...@@ -527,7 +541,7 @@ export default { ...@@ -527,7 +541,7 @@ export default {
}, },
selectItem(index) { selectItem(index) {
let dom = document.getElementsByClassName("drr"); let dom = document.getElementsByClassName("drr");
console.log("dom", dom); // console.log("dom", dom);
for (let i = 0; i < dom.length; i++) { for (let i = 0; i < dom.length; i++) {
if (index !== i) { if (index !== i) {
...@@ -538,7 +552,6 @@ export default { ...@@ -538,7 +552,6 @@ export default {
this.selectIndex = index; this.selectIndex = index;
}, },
deSelect(index) { deSelect(index) {
console.log(index, 222222222);
this.close(); this.close();
this.selectIndex = -1; this.selectIndex = -1;
}, },
...@@ -639,9 +652,9 @@ export default { ...@@ -639,9 +652,9 @@ export default {
that.$nextTick(() => { that.$nextTick(() => {
that.ev("center"); that.ev("center");
}); });
setTimeout(() => { // setTimeout(() => {
that.ev("center"); // that.ev("center");
}, 1000); // }, 1000);
if (i === files.length - 1) { if (i === files.length - 1) {
callback && callback(); callback && callback();
} }
...@@ -819,18 +832,17 @@ export default { ...@@ -819,18 +832,17 @@ export default {
handleClick(event) { handleClick(event) {
// 获取点击的元素 // 获取点击的元素
let currentElement = event.target; let currentElement = event.target;
if (!this.isView && this.imgDom) {
this.oldImgStyle = this.imgDom.style.webkitClipPath || "none";
}
// 确保点击的元素在包含 container 类名的元素内 // 确保点击的元素在包含 container 类名的元素内
if (currentElement.closest(".container")) { if (currentElement.closest(".container")) {
// 如果点击的元素不是 boxShaow，执行方法 // 如果点击的元素不是 boxShaow，执行方法
if (!currentElement.closest(".boxShaow")) { if (!currentElement.closest(".boxShaow")) {
this.isView = !this.isView; this.isView = !this.isView;
console.log(723, this.isView);
} }
} }
if (currentElement.closest(".scrollbarDrawer")) {
this.isView = false;
}
this.$store.commit("setIsPreView", this.isView); this.$store.commit("setIsPreView", this.isView);
}, },
async downloadImg() { async downloadImg() {
...@@ -860,49 +872,100 @@ export default { ...@@ -860,49 +872,100 @@ export default {
this.selectImgIndex = 0; this.selectImgIndex = 0;
this.getBackFile({ files: [this.selectImgList[0]] }); this.getBackFile({ files: [this.selectImgList[0]] });
}, },
initMaskCanvas() { getStyleValue(value, defaultValue = 0) {
const canvas = this.$refs.maskCanvas; return value
const { w, h } = this.gridWH; ? parseFloat(value.replace("px", "")) || defaultValue
: defaultValue;
// 设置 Canvas 分辨率 },
canvas.width = w; getInset(top = 100, right = 0, bottom = 0, left = 100) {
canvas.height = h; return `inset(${100 - top}% ${right}% ${bottom}% ${100 - left}%)`;
// 初始绘制
this.drawCropMask();
}, },
// 绘制遮罩 getDrag(e) {
drawCropMask() { this.drrDom = document.getElementsByClassName("drr")[0];
const canvas = this.$refs.maskCanvas; this.imgDom = document.getElementById("imgBox");
const ctx = canvas.getContext("2d");
// 清空画布 this.getCutArea();
ctx.clearRect(0, 0, canvas.width, canvas.height); },
getCutArea() {
// 语法：inset(<top> <right> <bottom> <left>)
if (!this.drrDom) return;
// 绘制半透明遮罩 let gradient = "none";
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 清除网格区域（显示下方内容） const style = this.drrDom.style;
ctx.clearRect(0, 0, this.gridWH.w, this.gridWH.h);
// 绘制网格边界线 if (style.transform) {
ctx.strokeStyle = "#3d47bf"; const result = style.transform.split("(")[1].split(")")[0];
ctx.lineWidth = 2;
ctx.strokeRect(0, 0, this.gridWH.w, this.gridWH.h);
console.log(888, canvas);
console.log("Mask Drawn"); if (result !== "0deg") {
}, return;
}
}
const newLeft = this.getStyleValue(style.left);
const newTop = this.getStyleValue(style.top);
const newWidth = this.getStyleValue(style.width, 100); // 默认宽度防止除零错误
const newHeight = this.getStyleValue(style.height, 100);
const { w, h } = this.gridWH;
// 响应式调整 const isOverRight = w < newWidth + newLeft;
resizeCanvas() { const isOverLeft = newLeft < 0;
this.$nextTick(() => { const isOverBottom = h < newTop + newHeight;
const canvas = this.$refs.maskCanvas; const isOverTop = newTop < 0;
canvas.width = this.gridWH.w;
canvas.height = this.gridWH.h; let top = ((newTop + newHeight) / newHeight) * 100;
this.drawCropMask(); let right = ((newWidth + newLeft - w) / newWidth) * 100;
}); let bottom = ((newTop + newHeight - h) / newHeight) * 100;
let left = ((newLeft + newWidth) / newWidth) * 100;
if (isOverRight && isOverTop && isOverLeft && isOverBottom) {
console.log("四面");
gradient = this.getInset(top, right, bottom, left);
} else if (isOverRight && isOverTop && isOverLeft) {
console.log("左右上");
gradient = this.getInset(top, right, 0, left);
} else if (isOverRight && isOverBottom && isOverLeft) {
console.log("左右下");
gradient = this.getInset(100, right, bottom, left);
} else if (isOverTop && isOverBottom && isOverLeft) {
console.log("左上下");
gradient = this.getInset(top, 0, bottom, left);
} else if (isOverTop && isOverBottom && isOverRight) {
console.log("右上下");
gradient = this.getInset(top, right, bottom, 100);
} else if (isOverRight && isOverTop) {
console.log("右上");
gradient = this.getInset(top, right);
} else if (isOverRight && isOverBottom) {
console.log("右下");
gradient = this.getInset(100, right, bottom);
} else if (isOverTop && isOverLeft) {
console.log("左上");
gradient = this.getInset(top, 0, 0, left);
} else if (isOverLeft && isOverBottom) {
console.log("左下");
gradient = this.getInset(100, 0, bottom, left);
} else if (isOverLeft && isOverRight) {
console.log("左右");
gradient = this.getInset(100, right, 0, left);
} else if (isOverTop && isOverBottom) {
console.log("上下");
gradient = this.getInset(100, right, 0, left);
} else if (isOverRight) {
console.log("右");
gradient = this.getInset(100, right);
} else if (isOverBottom) {
console.log("下");
gradient = this.getInset(100, 0, bottom);
} else if (isOverTop) {
console.log("上");
gradient = this.getInset(top);
} else if (isOverLeft) {
console.log("左");
gradient = this.getInset(100, 0, 0, left);
} else {
console.log("中间");
}
this.imgDom.style.webkitClipPath = gradient;
}, },
}, },
mounted() { mounted() {
...@@ -974,13 +1037,10 @@ export default { ...@@ -974,13 +1037,10 @@ export default {
// window.addEventListener("load", () => { // window.addEventListener("load", () => {
// initCrop(); // 初始化裁剪功能 // 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>
...@@ -995,114 +1055,6 @@ export default { ...@@ -995,114 +1055,6 @@ export default {
> >
<template #content> <template #content>
<div class="information-content"> <div class="information-content">
<!-- <div
style="display: flex;justify-content: space-between;flex-wrap: nowrap;"
>
<div class="title" style="flex: 1;">
效果图
</div>
</div> -->
<!-- <el-row class="main">
<el-col :span="6">
<div class="text-center">打印区域</div>
</el-col>
<el-col :span="9" class="effectPic border-col">
<div class="pic-title">效果图</div>
</el-col>
<el-col :span="9">
<div class="pic-title">素材图</div>
</el-col>
<el-row
class="border-row"
v-for="(item, index) in detail.imageAry"
:key="index"
>
<el-col :span="6" class="text-center"
><div>{{ item.title }}</div></el-col
>
<el-col :span="9" class="border-col text-center">
<el-carousel
v-if="item.viewImgList?.length"
height="170px"
:autoplay="false"
indicator-position="none"
style="width: 100%;"
>
<el-carousel-item
v-for="(img, i) in item.viewImgList"
:key="i"
>
<img class="full-width" :src="img.url" alt="" />
</el-carousel-item>
</el-carousel>
<div v-else>&nbsp;</div>
</el-col>
<el-col
:span="9"
style="overflow: hidden;align-items: stretch;flex-grow: 1"
>
<el-carousel
v-if="selectImgList?.length"
height="220px"
:autoplay="false"
indicator-position="none"
style="width: 100%;"
>
<el-carousel-item v-for="(img, i) in selectImgList" :key="i">
<el-checkbox-group v-model="checkList">
<el-checkbox
:class="{
imgchecked: checkList.includes(img),
}"
:label="img"
>
<div
class="img-item"
@click.stop.prevent="selectImg(img, 0)"
>
<img style="width: 140px" :src="img.productionFile" />
<span>{{ img.designId }}</span>
</div>
</el-checkbox></el-checkbox-group
>
</el-carousel-item>
</el-carousel>
</el-col>
</el-row>
</el-row> -->
<!-- <el-table
style="margin: 5px;width: auto;"
border
:data="detail.imageAry"
:header-cell-style="{ 'text-align': 'center' }">
<el-table-column align="center" label="打印区域"
prop="title"
align="center"
width="100px"
></el-table-column>
<el-table-column align="center" label="效果图" prop="title">
<template slot-scope="{row}">
<img class="full-width" :src="row.url" alt="" />
</template>
</el-table-column>
<el-table-column align="center" label="素材图" prop="title">
<template slot-scope="{ row }">
<img
style="cursor: pointer"
@click="setDesignImg(row.title)"
v-if="getComputedTitle(row.title)"
class="full-width"
:src="getComputedTitle(row.title)"
alt=""
/>
<span>{{ getComputedName(row.title) }}</span>
</template>
</el-table-column>
</el-table> -->
<PicScrollbarBox <PicScrollbarBox
boxTitle="效果图" boxTitle="效果图"
emptyTitle="效果图为空" emptyTitle="效果图为空"
...@@ -1154,42 +1106,6 @@ export default { ...@@ -1154,42 +1106,6 @@ export default {
</div> </div>
</template> </template>
</PicScrollbarBox> </PicScrollbarBox>
<!-- <div>
<div style="display: flex;justify-content: space-between;">
<div class="title">
素材图
</div>
<el-button
type="primary"
size="small"
style="margin: 10px;"
@click="cutImgFn"
>裁切</el-button
>
</div>
<el-scrollbar class="scrollbarBox">
<el-checkbox-group
v-if="selectImgList.length"
v-model="checkList"
style="display: flex;flex-wrap:nowrap"
>
<el-checkbox
v-for="img in selectImgList"
:key="img.designId"
:class="{
imgchecked: checkList.includes(img),
}"
:label="img"
>
<div class="img-item" @click.stop.prevent="selectImg(img)">
<img style="width: 140px" :src="img.productionFile" />
<span>{{ img.designId }}</span>
</div>
</el-checkbox></el-checkbox-group
>
<el-empty v-else description="没有素材"></el-empty>
</el-scrollbar>
</div> -->
</div> </div>
<div class="product-information"> <div class="product-information">
<div class="title"> <div class="title">
...@@ -1290,7 +1206,7 @@ export default { ...@@ -1290,7 +1206,7 @@ export default {
:style="{ 'background-color': !isView ? '#77797a' : '#fff' }" :style="{ 'background-color': !isView ? '#77797a' : '#fff' }"
> >
<div class="container"> <div class="container">
<div style="width: 100%;height: 100%; "> <div style="width: 100%;height: 100%; " id="content">
<div v-if="isView" id="img"> <div v-if="isView" id="img">
<div <div
id="line" id="line"
...@@ -1315,7 +1231,7 @@ export default { ...@@ -1315,7 +1231,7 @@ export default {
:draggable="false" :draggable="false"
:resizable="false" :resizable="false"
:rotatable="false" :rotatable="false"
:angle="item.r / WHproportion" :angle="item.r"
style="pointer-events: auto;cursor: default" style="pointer-events: auto;cursor: default"
> >
<div <div
...@@ -1350,7 +1266,7 @@ export default { ...@@ -1350,7 +1266,7 @@ export default {
</div> </div>
<div <div
v-else v-else
style="width: 100%;height: 100%;background-color:#77797a " style="width: 100%;height: 100%;background-color:#77797a ;position: relative;"
> >
<div :style="{ background: gridBg }" id="line" class="boxShaow"> <div :style="{ background: gridBg }" id="line" class="boxShaow">
<!-- <div <!-- <div
...@@ -1389,6 +1305,7 @@ export default { ...@@ -1389,6 +1305,7 @@ export default {
@dragstop="(a) => dragStop(a, item)" @dragstop="(a) => dragStop(a, item)"
@resizestop="(a) => resizeStop(a, item)" @resizestop="(a) => resizeStop(a, item)"
@rotatestop="(a) => rotating(a, item)" @rotatestop="(a) => rotating(a, item)"
@drag="getDrag"
:angle="item.r" :angle="item.r"
> >
<div <div
...@@ -1400,11 +1317,12 @@ export default { ...@@ -1400,11 +1317,12 @@ export default {
<img <img
crossOrigin="anonymous" crossOrigin="anonymous"
:src="item.url" :src="item.url"
:id="item.fileName + '_' + index" id="imgBox"
alt="" alt=""
style="width: 100%;height: 100%" style="width: 100%;height: 100%"
class="sucaitu-img" class="sucaitu-img"
/> />
<i <i
@click="delImg(index)" @click="delImg(index)"
v-if="index === selectIndex" v-if="index === selectIndex"
...@@ -1417,15 +1335,7 @@ export default { ...@@ -1417,15 +1335,7 @@ 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="{
...@@ -1453,6 +1363,7 @@ export default { ...@@ -1453,6 +1363,7 @@ export default {
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="imgBox" style=""></div> -->
</div> </div>
<div <div
class="print-tip" class="print-tip"
...@@ -1522,6 +1433,7 @@ export default { ...@@ -1522,6 +1433,7 @@ export default {
#line { #line {
position: absolute; position: absolute;
// z-index: 2; // z-index: 2;
left: 5%; left: 5%;
top: 50%; top: 50%;
transform: translate(0, -50%); transform: translate(0, -50%);
...@@ -1611,7 +1523,14 @@ export default { ...@@ -1611,7 +1523,14 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.element {
// position: relative;
}
// #imgBox {
// img {
// transition: clip-path 0.1s ease-in;
// }
// }
.close { .close {
position: absolute; position: absolute;
top: -11px; top: -11px;
......
src/views/login/index.vue
...@@ -40,7 +40,7 @@ export default { ...@@ -40,7 +40,7 @@ export default {
} else { } else {
proportion = 1; proportion = 1;
} }
this.$store.commit("setWindows", { width, height });
this.$store.commit("setWHproportion", proportion); this.$store.commit("setWHproportion", proportion);
this.$store.commit("setGrid"); this.$store.commit("setGrid");
}); });
......
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