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 @@
"electron-updater": "^6.2.1",
"element-ui": "^2.13.0",
"express": "^4.17.1",
"fabric": "^5.2.4",
"html2canvas": "^1.4.1",
"lodash-id": "^0.14.0",
"log4js": "^6.9.1",
......
src/components/vueDrag.vue
......@@ -87,7 +87,7 @@ export default {
},
rotating(data, item) {
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)));
},
},
......
src/store/index.js
......@@ -14,6 +14,7 @@ export default new Vuex.Store({
actionList: [],
imgList: [],
productDetail: {},
windowWH: { width: 0, height: 0 },
desktopDevice: 1, //1是兄弟，2是其他
WHproportion: 1, //宽高比例
defaultProportion: 1,
......@@ -90,6 +91,9 @@ export default new Vuex.Store({
}
});
},
setWindows(state, { width, height }) {
state.windowWH = { width, height };
},
},
getters: {
systemSetting(state) {
......
src/views/design/head/printDialog.vue
......@@ -292,9 +292,9 @@ export default {
});
},
return_data() {
let dom_id = `${this.imgList[0].fileName}_0`;
const image = document.getElementById(dom_id);
// let dom_id = `${this.imgList[0].fileName}_0`;
// const image = document.getElementById(dom_id);
const image = document.getElementById("imgBox");
const line = document.getElementById("line");
// 使用getBoundingClientRect获取更精确的位置信息
......
src/views/design/main/imgSetting.vue
......@@ -51,7 +51,7 @@ export default {
"position_before_px",
JSON.parse(JSON.stringify(this.item))
);
console.log("setting", setting);
// console.log("setting", setting);
let x_mm, w_mm, h_mm, y_mm;
x_mm = this.pxToUnit(this.item.x);
......@@ -219,8 +219,7 @@ export default {
<el-col :span="8">
<el-form-item label="z：">
<div class="form-content">
<el-input @blur="formChange" v-model="form.zIndex">
</el-input>
<el-input @blur="formChange" v-model="form.zIndex"> </el-input>
<div class="set-value">
<i @click="addValue('zIndex')" class="el-icon-arrow-up"></i>
<i
......
src/views/design/main/index.vue
......@@ -2,11 +2,12 @@
import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
import PicScrollbarBox from "../../../components/PicScrollbarBox.vue";
const { ipcRenderer } = require("electron");
// import { grid } from "../data";
// import { fabric } from "fabric";
import ImgSetting from "./imgSetting.vue";
import bus from "@/bus";
import PrintDialog from "@/views/design/head/printDialog.vue";
import { mmToPx, initCrop } from "@/utils";
import { mmToPx } from "@/utils";
const path = require("path");
const fs = require("fs");
......@@ -40,13 +41,11 @@ export default {
} else {
proportion = 1;
}
console.log(43, proportion);
this.$store.commit("setWHproportion", proportion);
this.$store.commit("setWindows", { width, height });
this.$store.commit("setDefaultproportion", proportion);
// this.$store.commit("setWHproportion", proportion);
this.$store.commit("setGrid");
// initCrop();
});
},
computed: {
......@@ -129,7 +128,13 @@ export default {
return null;
},
...mapState(["desktopDevice", "productDetail", "WHproportion", "grid"]),
...mapState([
"desktopDevice",
"productDetail",
"WHproportion",
"grid",
"windowWH",
]),
},
data() {
return {
......@@ -185,6 +190,9 @@ export default {
row: 8,
img,
col: 7,
oldImgStyle: "",
drrDom: null,
imgDom: null,
};
},
watch: {
......@@ -195,7 +203,7 @@ export default {
if (this.imgList.length > 0) {
this.$nextTick(() => {
let dom = document.getElementsByClassName("drr");
// console.log("dom", dom);
console.log("dom", dom);
this.imgList.forEach((el, i) => {
let dom_i = document.getElementsByClassName("drr")[i];
......@@ -241,23 +249,23 @@ export default {
changeCheckFn(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,
// },
isView: {
handler(newValue) {
if (!newValue) {
this.$nextTick(() => {
this.drrDom = document.getElementsByClassName("drr")[0];
this.imgDom = document.getElementById("imgBox");
console.log(257, this.imgDom);
if (this.imgDom)
this.imgDom.style.webkitClipPath = this.oldImgStyle;
});
} else {
this.drrDom = "";
this.imgDom = "";
}
},
immediate: true,
},
},
methods: {
changePrintDialogShow() {
......@@ -398,26 +406,28 @@ export default {
if (this.isView) {
this.isView = false;
}
// this.selectImgIndexList.push(i)
let item = this.imgList.find((img) => img.fileName === it.fileName);
if (item) return;
this.currentImgIndex = index;
console.log(this.detail.designImageSize);
let size = null;
if (
this.detail.mssWidth &&
this.detail.adjustable &&
this.detail.mssHeight
) {
size = {
width: this.detail.mssWidth,
height: this.detail.mssHeight,
};
}
this.getBackFile({ files: [it], size }, (file) => {
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
this.$nextTick(() => {
// this.selectImgIndexList.push(i)
let item = this.imgList.find((img) => img.fileName === it.fileName);
if (item) return;
this.currentImgIndex = index;
console.log(this.detail.designImageSize);
let size = null;
if (
this.detail.mssWidth &&
this.detail.adjustable &&
this.detail.mssHeight
) {
size = {
width: this.detail.mssWidth,
height: this.detail.mssHeight,
};
}
this.getBackFile({ files: [it], size }, (file) => {
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
});
});
// this.selectImgIndexList = Array.from(new Set(this.selectImgIndexList))
// this.getBackFile({ files: [it], size });
},
......@@ -498,6 +508,7 @@ export default {
this.$set(item, "y", data.y);
this.$set(item, "x", data.x);
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
this.getCutArea();
},
resizeStop(data, item) {
if (this.selectIndex < 0 && this.imgList.length) this.selectIndex = 0;
......@@ -506,12 +517,15 @@ export default {
this.$set(item, "h", data.h);
this.$set(item, "x", data.x);
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) {},
rotating(data, item) {
// 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)));
},
outsideClick(e) {
......@@ -527,7 +541,7 @@ export default {
},
selectItem(index) {
let dom = document.getElementsByClassName("drr");
console.log("dom", dom);
// console.log("dom", dom);
for (let i = 0; i < dom.length; i++) {
if (index !== i) {
......@@ -538,7 +552,6 @@ export default {
this.selectIndex = index;
},
deSelect(index) {
console.log(index, 222222222);
this.close();
this.selectIndex = -1;
},
......@@ -639,9 +652,9 @@ export default {
that.$nextTick(() => {
that.ev("center");
});
setTimeout(() => {
that.ev("center");
}, 1000);
// setTimeout(() => {
// that.ev("center");
// }, 1000);
if (i === files.length - 1) {
callback && callback();
}
......@@ -819,18 +832,17 @@ export default {
handleClick(event) {
// 获取点击的元素
let currentElement = event.target;
if (!this.isView && this.imgDom) {
this.oldImgStyle = this.imgDom.style.webkitClipPath || "none";
}
// 确保点击的元素在包含 container 类名的元素内
if (currentElement.closest(".container")) {
// 如果点击的元素不是 boxShaow，执行方法
if (!currentElement.closest(".boxShaow")) {
this.isView = !this.isView;
console.log(723, this.isView);
}
}
if (currentElement.closest(".scrollbarDrawer")) {
this.isView = false;
}
this.$store.commit("setIsPreView", this.isView);
},
async downloadImg() {
......@@ -860,49 +872,100 @@ export default {
this.selectImgIndex = 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();
getStyleValue(value, defaultValue = 0) {
return value
? parseFloat(value.replace("px", "")) || defaultValue
: defaultValue;
},
getInset(top = 100, right = 0, bottom = 0, left = 100) {
return `inset(${100 - top}% ${right}% ${bottom}% ${100 - left}%)`;
},
// 绘制遮罩
drawCropMask() {
const canvas = this.$refs.maskCanvas;
const ctx = canvas.getContext("2d");
getDrag(e) {
this.drrDom = document.getElementsByClassName("drr")[0];
this.imgDom = document.getElementById("imgBox");
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
this.getCutArea();
},
getCutArea() {
// 语法：inset(<top> <right> <bottom> <left>)
if (!this.drrDom) return;
// 绘制半透明遮罩
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
let gradient = "none";
// 清除网格区域（显示下方内容）
ctx.clearRect(0, 0, this.gridWH.w, this.gridWH.h);
const style = this.drrDom.style;
// 绘制网格边界线
ctx.strokeStyle = "#3d47bf";
ctx.lineWidth = 2;
ctx.strokeRect(0, 0, this.gridWH.w, this.gridWH.h);
console.log(888, canvas);
if (style.transform) {
const result = style.transform.split("(")[1].split(")")[0];
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;
// 响应式调整
resizeCanvas() {
this.$nextTick(() => {
const canvas = this.$refs.maskCanvas;
canvas.width = this.gridWH.w;
canvas.height = this.gridWH.h;
this.drawCropMask();
});
const isOverRight = w < newWidth + newLeft;
const isOverLeft = newLeft < 0;
const isOverBottom = h < newTop + newHeight;
const isOverTop = newTop < 0;
let top = ((newTop + newHeight) / newHeight) * 100;
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() {
......@@ -974,13 +1037,10 @@ export default {
// window.addEventListener("load", () => {
// initCrop(); // 初始化裁剪功能
// }); // 初始化裁剪功能
this.initMaskCanvas();
window.addEventListener("resize", this.resizeCanvas);
},
beforeDestroy() {
// 销毁组件时移除事件监听器
document.removeEventListener("click", this.handleClick);
window.removeEventListener("resize", this.resizeCanvas);
},
};
</script>
......@@ -995,114 +1055,6 @@ export default {
>
<template #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
boxTitle="效果图"
emptyTitle="效果图为空"
......@@ -1154,42 +1106,6 @@ export default {
</div>
</template>
</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 class="product-information">
<div class="title">
......@@ -1290,7 +1206,7 @@ export default {
:style="{ 'background-color': !isView ? '#77797a' : '#fff' }"
>
<div class="container">
<div style="width: 100%;height: 100%; ">
<div style="width: 100%;height: 100%; " id="content">
<div v-if="isView" id="img">
<div
id="line"
......@@ -1315,7 +1231,7 @@ export default {
:draggable="false"
:resizable="false"
:rotatable="false"
:angle="item.r / WHproportion"
:angle="item.r"
style="pointer-events: auto;cursor: default"
>
<div
......@@ -1350,7 +1266,7 @@ export default {
</div>
<div
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
......@@ -1389,6 +1305,7 @@ export default {
@dragstop="(a) => dragStop(a, item)"
@resizestop="(a) => resizeStop(a, item)"
@rotatestop="(a) => rotating(a, item)"
@drag="getDrag"
:angle="item.r"
>
<div
......@@ -1400,11 +1317,12 @@ export default {
<img
crossOrigin="anonymous"
:src="item.url"
:id="item.fileName + '_' + index"
id="imgBox"
alt=""
style="width: 100%;height: 100%"
class="sucaitu-img"
/>
<i
@click="delImg(index)"
v-if="index === selectIndex"
......@@ -1417,15 +1335,7 @@ export default {
</div>
</vue-drag-resize-rotate>
</div>
<!-- 新增 Canvas 遮罩层 -->
<canvas
ref="maskCanvas"
class="crop-canvas"
:style="{
width: gridWH.w + 'px',
height: gridWH.h + 'px',
}"
></canvas>
<div
:class="{ 'no-border-grid': systemSetting.gridShow !== 1 }"
:style="{
......@@ -1453,6 +1363,7 @@ export default {
</div>
</div>
</div>
<!-- <div class="imgBox" style=""></div> -->
</div>
<div
class="print-tip"
......@@ -1522,6 +1433,7 @@ export default {
#line {
position: absolute;
// z-index: 2;
left: 5%;
top: 50%;
transform: translate(0, -50%);
......@@ -1611,7 +1523,14 @@ export default {
width: 100%;
height: 100%;
}
.element {
// position: relative;
}
// #imgBox {
// img {
// transition: clip-path 0.1s ease-in;
// }
// }
.close {
position: absolute;
top: -11px;
......
src/views/login/index.vue
......@@ -40,7 +40,7 @@ export default {
} else {
proportion = 1;
}
this.$store.commit("setWindows", { width, height });
this.$store.commit("setWHproportion", proportion);
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