添加任务队列
This commit is contained in:
李志鹏
@@ -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]",
|
||||
@@ -42,35 +45,25 @@
|
||||
var canvas = null;
|
||||
onMounted(async () => {
|
||||
initCanvas();
|
||||
await setCanvasData();
|
||||
let throttleTimeout = null;
|
||||
let lastRunTime = 0;
|
||||
// taskQueue.addTask(async () => await setCanvasData());
|
||||
emit("init-canvas", props.list);
|
||||
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,6 +73,7 @@
|
||||
bindEvent();
|
||||
};
|
||||
const updateCanvasSize = async () => {
|
||||
console.log("OverallCanvas: updateCanvasSize");
|
||||
canvas.setWidth(el.value.offsetWidth);
|
||||
canvas.setHeight(el.value.offsetHeight);
|
||||
await setCanvasData();
|
||||
@@ -98,7 +92,7 @@
|
||||
};
|
||||
// 处理对象修改事件
|
||||
const onObjectModified = (e) => {
|
||||
console.log(e);
|
||||
console.log("OverallCanvas: onObjectModified", e);
|
||||
const object = e.target;
|
||||
const action = e.action;
|
||||
const list = [];
|
||||
@@ -174,6 +168,7 @@
|
||||
};
|
||||
const setCanvasData = async () => {
|
||||
canvas.clear();
|
||||
console.log("OverallCanvas: setCanvasData", props.list);
|
||||
for (let i = 0; i < props.list.length; i++) {
|
||||
let item = props.list[i];
|
||||
await addObject(item);
|
||||
@@ -194,7 +189,6 @@
|
||||
left: item.object.left / (props.width / canvas.width),
|
||||
onDelete: (v) => onDeleteItem(v),
|
||||
});
|
||||
console.log("==========", props)
|
||||
canvas.add(rect);
|
||||
};
|
||||
const setFill = async (item) => {
|
||||
@@ -232,72 +226,81 @@
|
||||
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 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(
|
||||
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({
|
||||
updataList,
|
||||
|
||||
28
src/component/Canvas/utils/TaskQueue.js
Normal file
28
src/component/Canvas/utils/TaskQueue.js
Normal 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 = [];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user