37 lines
1.6 KiB
TypeScript
37 lines
1.6 KiB
TypeScript
import type { FabricObject } from "fabric";
|
||
import type { BackgroundAsset } from "@/types";
|
||
|
||
/**
|
||
* 【T13 待实现】专用背景图层。
|
||
*
|
||
* **背景不是「再加一张图片图层」**，这是这条线的全部要点：全画布最多一个背景图层，
|
||
* 它永远在最底（`sendObjectToBack`），换背景是**替换**它而不是往上堆。
|
||
* 对象上用 `obj.isBackground = true` 标记（已登记进 customProperties，能存进模板）。
|
||
*
|
||
* 契约：
|
||
* - `current()` 返回当前背景对象，没有返回 null。找法是遍历 `canvas.getObjects()`
|
||
* 找 `isBackground` 为真的那个，**不要另存一份引用**——`loadFromJSON` 之后
|
||
* 画布上的是新对象，缓存的引用会指向一个已经不在画布上的旧对象。
|
||
* - `setBackground(asset)` 装一份素材当背景：有旧的就换掉，按 `fit` 铺，置底，
|
||
* `registerLayer()`，`bumpRevision()`，然后 `commit()` 记一步历史。
|
||
* - `setSolid(color)` 纯色背景，用一个盖满画板的 Rect。
|
||
* - `clear()` 删掉背景图层。
|
||
* - 背景默认**不可选中**（`selectable: false`），否则点画布空白处老是选中它；
|
||
* 但它要出现在图层面板里，可以在那里选中、锁定、隐藏、删除。
|
||
* - 画板尺寸变了要重新铺（listen `useEditor().size`）。
|
||
*/
|
||
export function useBackground() {
|
||
return {
|
||
current(): FabricObject | null {
|
||
return null;
|
||
},
|
||
async setBackground(_asset: BackgroundAsset): Promise<FabricObject | null> {
|
||
return null;
|
||
},
|
||
setSolid(_color: string): FabricObject | null {
|
||
return null;
|
||
},
|
||
clear(): void {},
|
||
};
|
||
}
|