aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

Browse Source
This commit is contained in:
X1627315083
2026-01-19 14:44:47 +08:00
parent 315254b6d5 31c2ca4e8b
commit 94b9977ef6
3 changed files with 129 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/component/Canvas/OverallCanvas/demo.vue
View File

@@ -137,7 +137,6 @@
<button @click="onAdd">添加</button>
<div class="box">
<pingpu
:list="list"
ref="pingpuRef"
:width="600"
:height="900"
@@ -161,58 +160,7 @@
const convertDotNotationToBracket = (str) =>
str.replace(/(?:^|\.)(\d+)(?=\.|$)/g, "[#$1]").replace(/\[#/g, "[");
const activeToken = ref("1");
const list = ref([
{
token: "1",
ifSingle: false,
level2Type: "Pattern",
designType: "Library",
path: "/src/assets/images/canvas/yinhua1.jpg",
location: [0, 0],
scale: [1, 1],
angle: 0,
name: "Print1",
priority: 1,
object: {
top: 0,
left: 0,
scaleX: 1,
scaleY: 1,
opacity: 1,
angle: 0,
flipX: false,
flipY: false,
blendMode: "multiply",
gapX: 10,
gapY: 20,
},
},
{
token: "2",
ifSingle: false,
level2Type: "Pattern",
designType: "Library",
path: "/src/assets/images/canvas/yinhua1.jpg",
location: [0, 0],
scale: [2, 2],
angle: -45,
name: "Print2",
priority: 1,
object: {
top: 450,
left: 300,
scaleX: 0.5,
scaleY: 0.5,
opacity: 1,
angle: 0,
flipX: false,
flipY: false,
blendMode: "multiply",
gapX: 0,
gapY: 0,
},
},
]);
const list = ref([]);
// 深拷贝
const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));
const oldList = ref(deepCopy(list.value));

191
src/component/Canvas/OverallCanvas/index.vue
View File

@@ -3,8 +3,11 @@
</template>
<script setup>
import TaskQueue from "../utils/TaskQueue.js";
import { fabric } from "fabric-with-all";
import { ref, watch, onMounted } from "vue";
import { ref, watch, onMounted, nextTick } from "vue";
// 任务队列
const taskQueue = new TaskQueue();
const KEYS = {
FILL_X: "location[0]",
FILL_Y: "location[1]",
@@ -32,45 +35,36 @@
};
const emit = defineEmits(["change-canvas", "init-canvas"]);
const props = defineProps({
list: { type: Array, default: () => [] },
// list: { type: Array, default: () => [] },
width: { type: Number, required: true },
height: { type: Number, required: true },
});
const list = ref([]);
const el = ref(null);
const canvasRef = ref(null);
const observer = ref(null);
var canvas = null;
onMounted(async () => {
initCanvas();
// await setCanvasData();
let throttleTimeout = null;
let lastRunTime = 0;
// taskQueue.addTask(async () => await setCanvasData());
emit("init-canvas", list.value);
let throttleDelay = 100;
let trailingTimeout = null;
observer.value = new ResizeObserver((entries) => {
const now = Date.now();
const throttleDelay = 100;
if (!throttleTimeout) {
updateCanvasSize();
lastRunTime = now;
throttleTimeout = setTimeout(() => {
throttleTimeout = null;
}, throttleDelay);
} else {
clearTimeout(trailingTimeout);
trailingTimeout = setTimeout(() => {
updateCanvasSize();
lastRunTime = Date.now();
}, throttleDelay);
}
clearTimeout(trailingTimeout);
trailingTimeout = setTimeout(() => {
console.log("OverallCanvas: resize");
taskQueue.addTask(async () => await updateCanvasSize());
}, throttleDelay);
});
observer.value.observe(el.value);
emit("init-canvas", props.list);
});
onBeforeUnmount(() => {
observer.value.disconnect();
unbindEvent();
});
const initCanvas = () => {
console.log("OverallCanvas: initCanvas");
canvas = new fabric.Canvas(canvasRef.value, {
selection: false,
preserveObjectStacking: true,
@@ -80,7 +74,7 @@
bindEvent();
};
const updateCanvasSize = async () => {
console.log('========','updataCanvasSize')
console.log("OverallCanvas: updateCanvasSize");
canvas.setWidth(el.value.offsetWidth);
canvas.setHeight(el.value.offsetHeight);
await setCanvasData();
@@ -99,7 +93,7 @@
};
// 处理对象修改事件
const onObjectModified = (e) => {
console.log(e);
console.log("OverallCanvas: onObjectModified", e);
const object = e.target;
const action = e.action;
const list = [];
@@ -175,8 +169,9 @@
};
const setCanvasData = async () => {
canvas.clear();
for (let i = 0; i < props.list.length; i++) {
let item = props.list[i];
console.log("OverallCanvas: setCanvasData", list.value);
for (let i = 0; i < list.value.length; i++) {
let item = list.value[i];
await addObject(item);
}
canvas.renderAll();
@@ -195,7 +190,6 @@
left: item.object.left / (props.width / canvas.width),
onDelete: (v) => onDeleteItem(v),
});
console.log("==========", props)
canvas.add(rect);
};
const setFill = async (item) => {
@@ -232,73 +226,88 @@
});
return pattern;
};
const updataList = async (list) => {
console.log(list);
const objects = canvas.getObjects();
for (let i = 0; i < list.length; i++) {
let item = list[i];
let object = objects.find((o) => o.token === item.token);
if (item.action === ACTIONS.UPDATE) {
if (!object) continue;
let value = item.value;
switch (item.key) {
case KEYS.O_TOP:
object.set("top", value / (props.height / canvas.height));
break;
case KEYS.O_LEFT:
object.set("left", value / (props.width / canvas.width));
break;
case KEYS.O_OPACITY:
object.set("opacity", value);
break;
case KEYS.O_SCALE_X:
object.set("scaleX", value);
break;
case KEYS.O_SCALE_Y:
object.set("scaleY", value);
break;
case KEYS.O_ANGLE:
object.set("angle", value);
break;
case KEYS.O_FLIPX:
object.set("flipX", value);
break;
case KEYS.O_FLIPY:
object.set("flipY", value);
break;
case KEYS.O_BLENDMODE:
object.set("blendMode", value);
break;
case KEYS.FILL_X:
case KEYS.FILL_Y:
case KEYS.FILL_ANGLE:
case KEYS.FILL_SCALEX:
case KEYS.FILL_SCALEY:
case KEYS.FILL_GAPX:
case KEYS.FILL_GAPY:
let pattern = await setFill(
props.list.find((v) => v.token === item.token)
);
object.set("fill", pattern);
break;
const updataList = async (list_) => {
const cd = async (list_) => {
console.log("OverallCanvas: updataList", list_);
const objects = canvas.getObjects();
for (let i = 0; i < list_.length; i++) {
let item = list_[i];
let object = objects.find((o) => o.token === item.token);
if (item.action === ACTIONS.UPDATE) {
if (!object) continue;
let value = item.value;
switch (item.key) {
case KEYS.O_TOP:
object.set(
"top",
value / (props.height / canvas.height)
);
break;
case KEYS.O_LEFT:
object.set(
"left",
value / (props.width / canvas.width)
);
break;
case KEYS.O_OPACITY:
object.set("opacity", value);
break;
case KEYS.O_SCALE_X:
object.set("scaleX", value);
break;
case KEYS.O_SCALE_Y:
object.set("scaleY", value);
break;
case KEYS.O_ANGLE:
object.set("angle", value);
break;
case KEYS.O_FLIPX:
object.set("flipX", value);
break;
case KEYS.O_FLIPY:
object.set("flipY", value);
break;
case KEYS.O_BLENDMODE:
object.set("blendMode", value);
break;
case KEYS.FILL_X:
case KEYS.FILL_Y:
case KEYS.FILL_ANGLE:
case KEYS.FILL_SCALEX:
case KEYS.FILL_SCALEY:
case KEYS.FILL_GAPX:
case KEYS.FILL_GAPY:
let pattern = await setFill(
list.value.find((v) => v.token === item.token)
);
object.set("fill", pattern);
break;
}
} else if (item.action === ACTIONS.SELECT) {
if (object) canvas.setActiveObject(object);
} else if (item.action === ACTIONS.SORT) {
let tokens = item.tokens;
canvas.clear();
const list_ = [];
for (let j = 0; j < tokens.length; j++) {
let item_ = list.value.find((v) => v.token === tokens[j]);
if (item_) list_.push(item_);
let object = objects.find((o) => o.token === tokens[j]);
if (object) canvas.add(object);
}
list.value = list_;
canvas.renderAll();
} else if (item.action === ACTIONS.DELETE) {
list.value = list.value.filter((v) => v.token !== item.token);
if (object) canvas.remove(object);
} else if (item.action === ACTIONS.ADD) {
list.value.push(item.data);
await addObject(item.data);
}
} else if (item.action === ACTIONS.SELECT) {
if (object) canvas.setActiveObject(object);
} else if (item.action === ACTIONS.SORT) {
let tokens = item.tokens;
canvas.clear();
for (let j = 0; j < tokens.length; j++) {
let object = objects.find((o) => o.token === tokens[j]);
if (object) canvas.add(object);
}
canvas.renderAll();
} else if (item.action === ACTIONS.DELETE) {
if (object) canvas.remove(object);
} else if (item.action === ACTIONS.ADD) {
await addObject(item.data);
}
}
canvas.renderAll();
canvas.renderAll();
};
taskQueue.addTask(async () => await cd(list_));
};
defineExpose({
updataList,

28
src/component/Canvas/utils/TaskQueue.js Normal file
View File

@@ -0,0 +1,28 @@
export default class TaskQueue {
constructor() {
this.tasks = [];
this.running = false;
}
// 添加任务
addTask(task) {
this.tasks.push(task);
// 执行任务
this.executeTasks();
}
// 执行任务
async executeTasks() {
if (this.running) {
return;
}
this.running = true;
for (const task of this.tasks) {
await task();
}
this.running = false;
this.clearTasks();
}
// 清空任务队列
clearTasks() {
this.tasks = [];
}
}