Skip to content

E
electron-printer
Commit 9eb1e532 by linjinhong
Options

测试提交网格canvas添加

parent a236d1a8
Showing with 375 additions and 38 deletions
config/env.json
{
"apiApiHost":"https://factory.jomalls.com/api",
"fileApiUrl":"https://factory.jomalls.com/upload/factory",
"apiApiHost":"http://10.168.31.142:8060/api",
"fileApiUrl":"http://10.168.31.142:80/upload/factory",
"visionUrl":"https://console.jomalls.com"
}
src/store/index.js
......@@ -5,7 +5,7 @@ Vue.use(Vuex);
const defaultSetting = {
gridShow: 1,
language: "cn",
gridValue: 1,
gridValue: 0,
autoPrint: false,
gridSpacing: "10mm",
};
......@@ -16,11 +16,12 @@ export default new Vuex.Store({
productDetail: {},
desktopDevice: 1, //1是兄弟，2是其他
WHproportion: 1, //宽高比例
isPreView: false, //宽高比例
defaultProportion: 1,
isPreView: false,
actionIndex: -1,
systemSetting: {
gridShow: 1,
gridValue: 1,
gridValue: 0,
unit: "mm",
language: "cn",
autoPrint: false,
......@@ -35,6 +36,14 @@ export default new Vuex.Store({
h: 0,
w: 0,
},
{
label: "18×22",
value: 1,
row: 18,
col: 22,
h: 0,
w: 0,
},
],
},
mutations: {
......@@ -62,12 +71,24 @@ export default new Vuex.Store({
setWHproportion(state, value) {
state.WHproportion = value;
},
setDefaultproportion(state, value) {
state.defaultProportion = value;
},
setIsPreView(state, value) {
state.isPreView = value;
},
setGrid(state, { h, w }) {
state.grid[0].h = h;
state.grid[0].w = w;
setGrid(state) {
// state.grid[0].h = h;
// 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: {
......
src/utils/index.js
import store from "@/store";
import Vue from "vue";
export function pxToUnit(px, unit) {
const setting = this.$dataStore.get("setting");
if (!unit) {
......@@ -30,3 +32,204 @@ export function unitToPx(px, unit) {
}
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 @@
import bus from "@/bus";
import PrintDialog from "./printDialog.vue";
import { ipcRenderer } from "electron";
import { grid } from "../data";
// import { grid } from "../data";
import pkg from "../../../../package.json";
import UpdateDialog from "@/views/design/updateDialog.vue";
import path from "path"; // 引入 path 模块
......@@ -10,6 +10,7 @@ import store from "@/store/index.js";
import axios from "axios";
const uuid = require("uuid");
const fs = require("fs");
import { mapState } from "vuex";
export default {
components: { PrintDialog, UpdateDialog },
......@@ -80,18 +81,20 @@ export default {
"hsla(209, 100%, 56%, 0.73)",
"#c7158577",
],
grid,
};
},
computed: {
actionList() {
return this.$store.getters.getActionList;
},
...mapState(["grid", "defaultProportion"]),
},
mounted() {
// console.log(pkg, "pkg");
this.$nextTick(() => {
this.$refs.searchRef.focus();
this.selectGridIndex = 0;
this.setting.gridValue = 0;
});
},
created() {
......@@ -483,8 +486,18 @@ export default {
return false;
},
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.setting.gridValue = i;
this.$store.commit("updateSystemSetting", {
field: "gridValue",
value: this.grid[i],
......@@ -591,7 +604,12 @@ export default {
</el-select>
</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"
>{{ grid[selectGridIndex].label }}
</el-button>
......
src/views/design/main/index.vue
......@@ -6,8 +6,8 @@ const { ipcRenderer } = require("electron");
import ImgSetting from "./imgSetting.vue";
import bus from "@/bus";
import PrintDialog from "@/views/design/head/printDialog.vue";
import { mmToPx } from "@/utils";
// import { raw } from "express";
import { mmToPx, initCrop } from "@/utils";
const path = require("path");
const fs = require("fs");
const uuid = require("uuid");
......@@ -40,11 +40,13 @@ export default {
} else {
proportion = 1;
}
console.log(43, proportion);
this.$store.commit("setWHproportion", proportion);
this.$store.commit("setGrid", {
h: 540 * proportion,
w: 480 * proportion,
});
this.$store.commit("setDefaultproportion", proportion);
// this.$store.commit("setWHproportion", proportion);
this.$store.commit("setGrid");
// initCrop();
});
},
computed: {
......@@ -55,6 +57,7 @@ export default {
!this.grid[this.systemSetting.gridValue]
)
return { w: 0, h: 0, v: 1 };
return {
w: this.grid[this.systemSetting.gridValue].w,
v: this.grid[this.systemSetting.gridValue].value,
......@@ -156,17 +159,14 @@ export default {
systemSetting: {},
detail: {},
imgHeight: 0,
selectImgList: [],
selectImgList: [
{
productionFile: "D:\\work\\electron-printer\\print\\Input\\111.png",
designId: 1,
},
],
bus: 0,
PreViewGrid: {
label: "16×18",
value: 1,
row: 16,
col: 18,
h: 540,
w: 480,
},
showImgSetting: true,
printDialogShow: true,
parentHeight: 0,
......@@ -178,6 +178,7 @@ export default {
imgList: [],
viewImgList: [],
selectImgIndexList: [],
currentImgIndex: 0,
isView: false,
imgHistoryList: [[]],
imgHistoryIndex: 0,
......@@ -240,6 +241,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,
// },
},
methods: {
changePrintDialogShow() {
......@@ -376,7 +394,7 @@ export default {
);
}
},
selectImg(it) {
selectImg(it, index) {
if (this.isView) {
this.isView = false;
}
......@@ -384,6 +402,7 @@ export default {
// 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 (
......@@ -487,10 +506,11 @@ 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();
},
resizing(index) {},
rotating(data, item) {
console.log(data);
// console.log(data);
this.$set(item, "r", data.angle.toFixed(2));
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
},
......@@ -840,6 +860,50 @@ 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();
},
// 绘制遮罩
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() {
this.imgHeight = window.screen.height + "px";
......@@ -906,10 +970,17 @@ export default {
this.listenUpload();
});
document.addEventListener("click", this.handleClick);
// 在页面加载完成后自动初始化
// window.addEventListener("load", () => {
// initCrop(); // 初始化裁剪功能
// }); // 初始化裁剪功能
this.initMaskCanvas();
window.addEventListener("resize", this.resizeCanvas);
},
beforeDestroy() {
// 销毁组件时移除事件监听器
document.removeEventListener("click", this.handleClick);
window.removeEventListener("resize", this.resizeCanvas);
},
};
</script>
......@@ -1076,7 +1147,7 @@ export default {
v-for="(img, i) in selectImgList"
:key="i"
class="img-item"
@click.stop.prevent="selectImg(img)"
@click.stop.prevent="selectImg(img, i)"
>
<img :key="i" style="width:100%" :src="img.productionFile" />
<!-- <span>{{ img.designId }}</span> -->
......@@ -1250,7 +1321,7 @@ export default {
<div
ref="sucaitu-img"
:style="{ zIndex: item.zIndex }"
class="sucaitu-img img element"
class="sucaitu-img img"
style="cursor: default"
>
<img
......@@ -1286,6 +1357,7 @@ export default {
class="sucaitu"
:style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }"
> -->
<div class="left-bg-color">
<el-color-picker
color-format="hex"
......@@ -1294,7 +1366,11 @@ export default {
v-model="gridBg"
></el-color-picker>
</div>
<div class="sucaitu" :style="{ width: '100%', height: '100%' }">
<div
class="sucaitu"
id="editView"
:style="{ width: '100%', height: '100%' }"
>
<vue-drag-resize-rotate
:w="item.w"
class-name="my-drag-resize-rotate"
......@@ -1316,7 +1392,7 @@ export default {
:angle="item.r"
>
<div
ref="sucaitu-img"
ref="sucaituImg"
:class="{ active: index === selectIndex }"
:style="{ zIndex: item.zIndex }"
class="sucaitu-img img element"
......@@ -1341,6 +1417,15 @@ 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="{
......@@ -1348,9 +1433,13 @@ export default {
height: gridWH.h + 'px',
}"
class="grid"
id="grid"
>
<div
:style="{ height: gridSpacing.h, lineHeight: gridSpacing.h }"
:style="{
height: gridSpacing.h,
lineHeight: gridSpacing.h,
}"
class="grid-row"
v-for="it in 100"
:key="it"
......@@ -1756,4 +1845,12 @@ img {
position: fixed;
z-index: 69;
}
.crop-canvas {
position: absolute;
top: 1px;
left: 1px;
pointer-events: none; /* 允许穿透操作 */
z-index: 2; /* 确保在元素上方 */
}
</style>
src/views/login/index.vue
......@@ -40,12 +40,9 @@ export default {
} else {
proportion = 1;
}
this.$store.commit("setWHproportion", proportion);
this.$store.commit("setGrid", {
h: 540 * proportion,
w: 480 * proportion,
});
console.log(this.grid);
this.$store.commit("setGrid");
});
},
mounted() {
......@@ -90,6 +87,7 @@ export default {
}
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