平铺画布更改

This commit is contained in:
李志鹏
2026-01-19 14:44:18 +08:00
parent af5f178476
commit 31c2ca4e8b
2 changed files with 20 additions and 65 deletions

View File

@@ -35,10 +35,11 @@
};
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);
@@ -46,7 +47,7 @@
onMounted(async () => {
initCanvas();
// taskQueue.addTask(async () => await setCanvasData());
emit("init-canvas", props.list);
emit("init-canvas", list.value);
let throttleDelay = 100;
let trailingTimeout = null;
observer.value = new ResizeObserver((entries) => {
@@ -168,9 +169,9 @@
};
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];
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();
@@ -225,12 +226,12 @@
});
return pattern;
};
const updataList = async (list) => {
const cd = async (list) => {
console.log("OverallCanvas: updataList", list);
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];
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;
@@ -277,7 +278,7 @@
case KEYS.FILL_GAPX:
case KEYS.FILL_GAPY:
let pattern = await setFill(
props.list.find((v) => v.token === item.token)
list.value.find((v) => v.token === item.token)
);
object.set("fill", pattern);
break;
@@ -287,20 +288,26 @@
} 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);
}
}
canvas.renderAll();
};
taskQueue.addTask(async () => await cd(list));
taskQueue.addTask(async () => await cd(list_));
};
defineExpose({
updataList,