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

添加任务队列

Browse Source
This commit is contained in:
李志鹏
2026-01-19 14:25:44 +08:00
parent 87fd5b9a93
commit 0aae85e94d
2 changed files with 117 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,8 +3,11 @@
</template> </template>
<script setup> <script setup>
import TaskQueue from "../utils/TaskQueue.js";
import { fabric } from "fabric-with-all"; 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 = { const KEYS = {
FILL_X: "location[0]", FILL_X: "location[0]",
FILL_Y: "location[1]", FILL_Y: "location[1]",
@@ -42,35 +45,25 @@
var canvas = null; var canvas = null;
onMounted(async () => { onMounted(async () => {
initCanvas(); initCanvas();
await setCanvasData(); // taskQueue.addTask(async () => await setCanvasData());
let throttleTimeout = null; emit("init-canvas", props.list);
let lastRunTime = 0; let throttleDelay = 100;
let trailingTimeout = null; let trailingTimeout = null;
observer.value = new ResizeObserver((entries) => { observer.value = new ResizeObserver((entries) => {
const now = Date.now(); clearTimeout(trailingTimeout);
const throttleDelay = 100; trailingTimeout = setTimeout(() => {
if (!throttleTimeout) { console.log("OverallCanvas: resize");
updateCanvasSize(); taskQueue.addTask(async () => await updateCanvasSize());
lastRunTime = now; }, throttleDelay);
throttleTimeout = setTimeout(() => {
throttleTimeout = null;
}, throttleDelay);
} else {
clearTimeout(trailingTimeout);
trailingTimeout = setTimeout(() => {
updateCanvasSize();
lastRunTime = Date.now();
}, throttleDelay);
}
}); });
observer.value.observe(el.value); observer.value.observe(el.value);
emit("init-canvas", props.list);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
observer.value.disconnect(); observer.value.disconnect();
unbindEvent(); unbindEvent();
}); });
const initCanvas = () => { const initCanvas = () => {
console.log("OverallCanvas: initCanvas");
canvas = new fabric.Canvas(canvasRef.value, { canvas = new fabric.Canvas(canvasRef.value, {
selection: false, selection: false,
preserveObjectStacking: true, preserveObjectStacking: true,
@@ -80,6 +73,7 @@
bindEvent(); bindEvent();
}; };
const updateCanvasSize = async () => { const updateCanvasSize = async () => {
console.log("OverallCanvas: updateCanvasSize");
canvas.setWidth(el.value.offsetWidth); canvas.setWidth(el.value.offsetWidth);
canvas.setHeight(el.value.offsetHeight); canvas.setHeight(el.value.offsetHeight);
await setCanvasData(); await setCanvasData();
@@ -98,7 +92,7 @@
}; };
// 处理对象修改事件 // 处理对象修改事件
const onObjectModified = (e) => { const onObjectModified = (e) => {
console.log(e); console.log("OverallCanvas: onObjectModified", e);
const object = e.target; const object = e.target;
const action = e.action; const action = e.action;
const list = []; const list = [];
@@ -174,6 +168,7 @@
}; };
const setCanvasData = async () => { const setCanvasData = async () => {
canvas.clear(); canvas.clear();
console.log("OverallCanvas: setCanvasData", props.list);
for (let i = 0; i < props.list.length; i++) { for (let i = 0; i < props.list.length; i++) {
let item = props.list[i]; let item = props.list[i];
await addObject(item); await addObject(item);
@@ -194,7 +189,6 @@
left: item.object.left / (props.width / canvas.width), left: item.object.left / (props.width / canvas.width),
onDelete: (v) => onDeleteItem(v), onDelete: (v) => onDeleteItem(v),
}); });
console.log("==========", props)
canvas.add(rect); canvas.add(rect);
}; };
const setFill = async (item) => { const setFill = async (item) => {
@@ -232,72 +226,81 @@
return pattern; return pattern;
}; };
const updataList = async (list) => { const updataList = async (list) => {
console.log(list); const cd = async (list) => {
const objects = canvas.getObjects(); console.log("OverallCanvas: updataList", list);
for (let i = 0; i < list.length; i++) { const objects = canvas.getObjects();
let item = list[i]; for (let i = 0; i < list.length; i++) {
let object = objects.find((o) => o.token === item.token); let item = list[i];
if (item.action === ACTIONS.UPDATE) { let object = objects.find((o) => o.token === item.token);
if (!object) continue; if (item.action === ACTIONS.UPDATE) {
let value = item.value; if (!object) continue;
switch (item.key) { let value = item.value;
case KEYS.O_TOP: switch (item.key) {
object.set("top", value / (props.height / canvas.height)); case KEYS.O_TOP:
break; object.set(
case KEYS.O_LEFT: "top",
object.set("left", value / (props.width / canvas.width)); value / (props.height / canvas.height)
break; );
case KEYS.O_OPACITY: break;
object.set("opacity", value); case KEYS.O_LEFT:
break; object.set(
case KEYS.O_SCALE_X: "left",
object.set("scaleX", value); value / (props.width / canvas.width)
break; );
case KEYS.O_SCALE_Y: break;
object.set("scaleY", value); case KEYS.O_OPACITY:
break; object.set("opacity", value);
case KEYS.O_ANGLE: break;
object.set("angle", value); case KEYS.O_SCALE_X:
break; object.set("scaleX", value);
case KEYS.O_FLIPX: break;
object.set("flipX", value); case KEYS.O_SCALE_Y:
break; object.set("scaleY", value);
case KEYS.O_FLIPY: break;
object.set("flipY", value); case KEYS.O_ANGLE:
break; object.set("angle", value);
case KEYS.O_BLENDMODE: break;
object.set("blendMode", value); case KEYS.O_FLIPX:
break; object.set("flipX", value);
case KEYS.FILL_X: break;
case KEYS.FILL_Y: case KEYS.O_FLIPY:
case KEYS.FILL_ANGLE: object.set("flipY", value);
case KEYS.FILL_SCALEX: break;
case KEYS.FILL_SCALEY: case KEYS.O_BLENDMODE:
case KEYS.FILL_GAPX: object.set("blendMode", value);
case KEYS.FILL_GAPY: break;
let pattern = await setFill( case KEYS.FILL_X:
props.list.find((v) => v.token === item.token) case KEYS.FILL_Y:
); case KEYS.FILL_ANGLE:
object.set("fill", pattern); case KEYS.FILL_SCALEX:
break; 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;
}
} 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);
} }
} 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({ defineExpose({
updataList, 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 = [];
}
}