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

fix

Browse Source
This commit is contained in:
李志鹏
2026-01-29 17:16:31 +08:00
parent 33aaf0b600
commit 59422e54d8
10 changed files with 163 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/component/Canvas/CanvasEditor/commands/FillRepeatCommand.js
View File

@@ -7,12 +7,11 @@ import {
insertObjectAtZIndex,
removeCanvasObjectByObject,
createPatternTransform,
getTransformScaleAngle,
imageAddGapToCanvas,
} from "../utils/helper";
import { restoreFabricObject } from "../utils/objectHelper";
const scale = 0.3;// 默认缩放比例
export const FillSourceToBase64 = (source) => {
if (source?.toDataURL) {
return source.toDataURL?.();
@@ -39,7 +38,6 @@ export class FillRepeatCommand extends Command {
this.fillRepeat = options.fillRepeat;
this.oldObjects = null;
this.oldLocked = null;
this.oldIsDisableUnlock = null;
}
async execute() {
@@ -64,17 +62,15 @@ export class FillRepeatCommand extends Command {
);
});
image.set({
id: object.id,
layerId: object.layerId,
layerName: object.layerName,
...this.copyObjectProperties(object),
...(fill_.originalInfo || {
top: object.top,
left: object.left,
})
});
layer.fabricObjects = [image.toObject(["id", "layerId", "layerName"])];
this.oldLocked = layer.locked;
layer.locked = false;
// this.oldLocked = layer.locked;
// layer.locked = false;
this.canvas.add(image);
this.canvas.remove(object);
@@ -113,23 +109,25 @@ export class FillRepeatCommand extends Command {
const fdObject = this.canvasManager.getFixedLayerObject();
const bgObject = this.canvasManager.getBackgroundLayerObject();
const tObject = fdObject || bgObject;
// const offsetX = object.fill?.hasOwnProperty("offsetX") ? object.fill.offsetX : tObject.width / 2;
// const offsetY = object.fill?.hasOwnProperty("offsetY") ? object.fill.offsetY : tObject.height / 2;
const patternTransform = object.fill?.hasOwnProperty("patternTransform") ? object.fill.patternTransform : createPatternTransform(0.3, 0);
const scale = getTransformScaleAngle(patternTransform).scale;
const offsetX = tObject.width / 2 - img.width * scale / 2;
const offsetY = tObject.height / 2 - img.height * scale / 2;
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 : tObject.width / 2, // 水平偏移
offsetY: object.fill?.hasOwnProperty("offsetY") ? object.fill.offsetY : tObject.height / 2, // 垂直偏移
patternTransform,
offsetX, // 水平偏移
offsetY, // 垂直偏移
});
const rect = new fabric.Rect({
id: object.id,
layerId: object.layerId,
layerName: object.layerName,
...this.copyObjectProperties(object),
fill_,
});
layer.fabricObjects = [rect.toObject(["id", "layerId", "layerName"])];
this.oldLocked = layer.locked;
// this.oldIsDisableUnlock = layer.isDisableUnlock;
// layer.isDisableUnlock = true;
// this.oldLocked = layer.locked;
if (this.oldObjects.type === "rect") {
rect.set({
width: object.width,
@@ -155,7 +153,7 @@ export class FillRepeatCommand extends Command {
scaleX,
scaleY,
});
layer.locked = true;
// layer.locked = true;
}
rect.set("fill", pattern);
this.canvas.add(rect);
@@ -184,14 +182,23 @@ export class FillRepeatCommand extends Command {
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;
// layer.locked = this.oldLocked;
await this.layerManager?.updateLayersObjectsInteractivity();
await this.layerManager?.sortLayersWithTool?.();
this.canvas.renderAll();
this.canvasManager.thumbnailManager?.generateLayerThumbnail(this.layerId);
return true;
}
// 复制原对象的属性
copyObjectProperties(object) {
return{
id: object.id,
layerId: object.layerId,
layerName: object.layerName,
isPrintTrims: object.isPrintTrims,
}
}
}
@@ -230,6 +237,10 @@ export class FillRepeatChangeCommand extends Command {
...this.newPattern,
});
object.set("fill", pattern);
if (object.globalCompositeOperation_) {
object.globalCompositeOperation = object.globalCompositeOperation_;
object.globalCompositeOperation_ = null;
}
this.canvas.renderAll();
return true;
}
@@ -276,7 +287,7 @@ export class FillRepeatGapChangeCommand extends Command {
this.oldGapY = null;
}
async execute(isUndo = false) {
async execute(isCommand = true, isUndo = false) {
const { layer } = findLayerRecursively(this.layers.value, this.layerId);
if (!layer || !layer.fabricObjects || layer.fabricObjects.length === 0) {
console.warn("图层不存在或没有 fabric 对象");
@@ -315,6 +326,10 @@ export class FillRepeatGapChangeCommand extends Command {
const fill = object.get("fill");
fill.source = imageAddGapToCanvas(image, object.fill_.gapX, object.fill_.gapY);
object.set("fill", new fabric.Pattern(fill));
if (isCommand && object.globalCompositeOperation_) {
object.globalCompositeOperation = object.globalCompositeOperation_;
object.globalCompositeOperation_ = null;
}
this.canvas.renderAll();
return true;
}
@@ -324,7 +339,7 @@ export class FillRepeatGapChangeCommand extends Command {
console.warn("没有旧间隙可恢复");
return false;
}
await this.execute(true);
await this.execute(true, true);
return true;
}