302 lines
9.1 KiB
JavaScript
302 lines
9.1 KiB
JavaScript
import { Command } from "./Command";
|
||
import { findLayerRecursively } from "../utils/layerHelper";
|
||
import { fabric } from "fabric-with-all";
|
||
import {
|
||
findObjectById,
|
||
generateId,
|
||
insertObjectAtZIndex,
|
||
removeCanvasObjectByObject,
|
||
createPatternTransform,
|
||
} from "../utils/helper";
|
||
import { restoreFabricObject } from "../utils/objectHelper";
|
||
|
||
const scale = 0.3;// 默认缩放比例
|
||
|
||
export const FillSourceToBase64 = (source) => {
|
||
if (source?.toDataURL) {
|
||
return source.toDataURL?.();
|
||
} else if (source?.src) {
|
||
return source.src;
|
||
}
|
||
return source;
|
||
}
|
||
|
||
/**
|
||
* 填充图案平铺命令
|
||
* 填充重复属性：repeat | repeat-x | repeat-y | no-repeat
|
||
* 默认缩放比例：0.3
|
||
* 默认偏移量：50%
|
||
*/
|
||
export class FillRepeatCommand extends Command {
|
||
constructor(options) {
|
||
super({ name: "填充图案平铺", saveState: true });
|
||
this.canvas = options.canvas;
|
||
this.layers = options.layers;
|
||
this.canvasManager = options.canvasManager;
|
||
this.layerManager = options.layerManager;
|
||
this.layerId = options.layerId;
|
||
this.fillRepeat = options.fillRepeat;
|
||
this.oldObjects = null;
|
||
this.oldLocked = null;
|
||
this.oldIsDisableUnlock = null;
|
||
}
|
||
|
||
async execute() {
|
||
const { layer } = findLayerRecursively(this.layers.value, this.layerId);
|
||
if (!layer || !layer.fabricObjects || layer.fabricObjects.length === 0) {
|
||
console.warn("图层不存在或没有 fabric 对象");
|
||
return false;
|
||
}
|
||
const { object } = findObjectById(this.canvas, layer?.fabricObjects?.[0]?.id);
|
||
if (!object || (object.type !== "rect" && object.type !== "image")) {
|
||
console.warn("当前对象不能平铺", object.type);
|
||
return false;
|
||
}
|
||
console.log("===========", object.toObject(["id", "layerId", "layerName"]))
|
||
this.oldObjects = object;
|
||
const img = await new Promise((resolve, reject) => {
|
||
if (object.type === "rect") {
|
||
let source = object.fill.source;
|
||
resolve(source);
|
||
} else if (object.type === "image") {
|
||
// resolve(object.getElement());
|
||
// fabric.Image.fromURL(
|
||
// object.src,
|
||
// v => resolve(v),
|
||
// { crossOrigin: "anonymous" }
|
||
// );
|
||
const imgElement = object.getElement();
|
||
// 创建透明 Canvas
|
||
const tcanvas = document.createElement('canvas');
|
||
tcanvas.width = imgElement.width;
|
||
tcanvas.height = imgElement.height;
|
||
const ctx = tcanvas.getContext('2d');
|
||
ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
|
||
ctx.drawImage(imgElement, 0, 0);
|
||
resolve(tcanvas);
|
||
}
|
||
});
|
||
const fill_ = {
|
||
source: FillSourceToBase64(img),
|
||
gapX: 0,
|
||
gapY: 0,
|
||
};
|
||
const bgObject = this.canvasManager.getBackgroundLayerObject();
|
||
const pattern = new fabric.Pattern({
|
||
source: img,
|
||
repeat: this.fillRepeat,
|
||
patternTransform: object.fill?.hasOwnProperty("patternTransform") ? object.fill.patternTransform : createPatternTransform(scale, 0),
|
||
offsetX: object.fill?.hasOwnProperty("offsetX") ? object.fill.offsetX : bgObject.width / 2, // 水平偏移
|
||
offsetY: object.fill?.hasOwnProperty("offsetY") ? object.fill.offsetY : bgObject.height / 2, // 垂直偏移
|
||
});
|
||
const rect = new fabric.Rect({
|
||
id: object.id,
|
||
layerId: object.layerId,
|
||
layerName: object.layerName,
|
||
fill_,
|
||
});
|
||
layer.fabricObjects = [rect.toObject(["id", "layerId", "layerName"])];
|
||
this.oldLocked = layer.locked;
|
||
// this.oldIsDisableUnlock = layer.isDisableUnlock;
|
||
// layer.isDisableUnlock = true;
|
||
if (this.oldObjects.type === "rect") {
|
||
rect.set({
|
||
width: object.width,
|
||
height: object.height,
|
||
top: object.top,
|
||
left: object.left,
|
||
originX: object.originX,
|
||
originY: object.originY,
|
||
angle: object.angle,
|
||
scaleX: object.scaleX,
|
||
scaleY: object.scaleY,
|
||
flipX: object.flipX,
|
||
flipY: object.flipY,
|
||
});
|
||
} else {
|
||
rect.set({
|
||
width: bgObject.width,
|
||
height: bgObject.height,
|
||
top: bgObject.top,
|
||
left: bgObject.left,
|
||
originX: bgObject.originX,
|
||
originY: bgObject.originY,
|
||
});
|
||
layer.locked = true;
|
||
}
|
||
rect.set("fill", pattern);
|
||
this.canvas.add(rect);
|
||
this.canvas.remove(object);
|
||
await this.layerManager?.updateLayersObjectsInteractivity();
|
||
await this.layerManager?.sortLayersWithTool?.();
|
||
await this.canvasManager.thumbnailManager?.generateLayerThumbnail(
|
||
this.layerId
|
||
);
|
||
await this.layerManager.selectLayerObjects(this.layerId);
|
||
return true;
|
||
}
|
||
|
||
async undo() {
|
||
if (!this.oldObjects) {
|
||
console.warn("没有旧对象可恢复");
|
||
return false;
|
||
}
|
||
const { layer } = findLayerRecursively(this.layers.value, this.oldObjects.layerId);
|
||
if (!layer || !layer.fabricObjects || layer.fabricObjects.length === 0) {
|
||
console.warn("图层不存在或没有 fabric 对象");
|
||
return false;
|
||
}
|
||
const { object } = findObjectById(this.canvas, layer?.fabricObjects?.[0]?.id);
|
||
this.canvas.remove(object);
|
||
this.canvas.add(this.oldObjects);
|
||
layer.fabricObjects = [this.oldObjects.toObject(["id", "layerId", "layerName"])];
|
||
layer.locked = this.oldLocked;
|
||
// layer.isDisableUnlock = this.oldIsDisableUnlock;
|
||
await this.layerManager?.updateLayersObjectsInteractivity();
|
||
await this.layerManager?.sortLayersWithTool?.();
|
||
this.canvas.renderAll();
|
||
this.canvasManager.thumbnailManager?.generateLayerThumbnail(this.layerId);
|
||
return true;
|
||
}
|
||
}
|
||
|
||
|
||
/**
|
||
* 填充图案更改参数
|
||
*/
|
||
export class FillRepeatChangeCommand extends Command {
|
||
constructor(options) {
|
||
super({ name: "填充图案更改参数", saveState: true });
|
||
this.canvas = options.canvas;
|
||
this.layers = options.layers;
|
||
this.canvasManager = options.canvasManager;
|
||
this.layerManager = options.layerManager;
|
||
this.layerId = options.layerId;
|
||
this.newPattern = options.newPattern;
|
||
this.oldPattern = null;
|
||
}
|
||
|
||
async execute() {
|
||
const { layer } = findLayerRecursively(this.layers.value, this.layerId);
|
||
if (!layer || !layer.fabricObjects || layer.fabricObjects.length === 0) {
|
||
console.warn("图层不存在或没有 fabric 对象");
|
||
return false;
|
||
}
|
||
const { object } = findObjectById(this.canvas, layer?.fabricObjects?.[0]?.id);
|
||
if (!object || object.type !== "rect") {
|
||
console.warn("当前对象不是矩形", object);
|
||
return false;
|
||
}
|
||
this.oldPattern = object.oldPattern || object.get("fill");
|
||
delete object.oldPattern;
|
||
const oldPattern = { ...this.oldPattern };
|
||
delete oldPattern.id;
|
||
const pattern = new fabric.Pattern({
|
||
...oldPattern,
|
||
...this.newPattern,
|
||
});
|
||
object.set("fill", pattern);
|
||
this.canvas.renderAll();
|
||
return true;
|
||
}
|
||
|
||
async undo() {
|
||
if (!this.oldPattern) {
|
||
console.warn("没有旧图案可恢复");
|
||
return false;
|
||
}
|
||
const { layer } = findLayerRecursively(this.layers.value, this.layerId);
|
||
if (!layer || !layer.fabricObjects || layer.fabricObjects.length === 0) {
|
||
console.warn("图层不存在或没有 fabric 对象");
|
||
return false;
|
||
}
|
||
const { object } = findObjectById(this.canvas, layer?.fabricObjects?.[0]?.id);
|
||
if (!object || object.type !== "rect") {
|
||
console.warn("当前对象不是矩形", object);
|
||
return false;
|
||
}
|
||
const pattern = new fabric.Pattern({
|
||
...this.oldPattern
|
||
});
|
||
object.set("fill", pattern);
|
||
this.canvas.renderAll();
|
||
return true;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 填充图案更改间隙
|
||
*/
|
||
export class FillRepeatGapChangeCommand extends Command {
|
||
constructor(options) {
|
||
super({ name: "填充图案更改间隙", saveState: true });
|
||
this.canvas = options.canvas;
|
||
this.layers = options.layers;
|
||
this.canvasManager = options.canvasManager;
|
||
this.layerManager = options.layerManager;
|
||
this.layerId = options.layerId;
|
||
this.newGapX = options.newGapX;
|
||
this.newGapY = options.newGapY;
|
||
this.record = !!options.record;
|
||
this.oldGapX = null;
|
||
this.oldGapY = null;
|
||
}
|
||
|
||
async execute(isUndo = false) {
|
||
const { layer } = findLayerRecursively(this.layers.value, this.layerId);
|
||
if (!layer || !layer.fabricObjects || layer.fabricObjects.length === 0) {
|
||
console.warn("图层不存在或没有 fabric 对象");
|
||
return false;
|
||
}
|
||
const { object } = findObjectById(this.canvas, layer?.fabricObjects?.[0]?.id);
|
||
if (!object || object.type !== "rect") {
|
||
console.warn("当前对象不是矩形", object);
|
||
return false;
|
||
}
|
||
if (!object.fill_) {
|
||
object.fill_ = {
|
||
source: FillSourceToBase64(object.fill.source),
|
||
gapX: 0,
|
||
gapY: 0,
|
||
}
|
||
}
|
||
if (isUndo) {
|
||
object.fill_.gapX = this.oldGapX;
|
||
object.fill_.gapY = this.oldGapY;
|
||
} else {
|
||
if (!object.oldFill_ && this.record) {
|
||
object.oldFill_ = { ...object.fill_ };
|
||
}
|
||
this.oldGapX = object.fill_.gapX;
|
||
this.oldGapY = object.fill_.gapY;
|
||
object.fill_.gapX = this.newGapX;
|
||
object.fill_.gapY = this.newGapY;
|
||
}
|
||
const image = new Image();
|
||
image.src = object.fill_.source;
|
||
await image.decode();
|
||
// 创建透明 Canvas
|
||
const tcanvas = document.createElement('canvas');
|
||
tcanvas.width = image.width + object.fill_.gapX;
|
||
tcanvas.height = image.height + object.fill_.gapY;
|
||
const ctx = tcanvas.getContext('2d');
|
||
ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
|
||
ctx.drawImage(image, 0, 0);
|
||
|
||
const fill = object.get("fill");
|
||
fill.source = tcanvas;
|
||
object.set("fill", new fabric.Pattern(fill));
|
||
this.canvas.renderAll();
|
||
return true;
|
||
}
|
||
|
||
async undo() {
|
||
if (this.oldGapX === null || this.oldGapY === null) {
|
||
console.warn("没有旧间隙可恢复");
|
||
return false;
|
||
}
|
||
await this.execute(true);
|
||
return true;
|
||
}
|
||
|
||
} |