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

略略略略略略略略略略略略

Browse Source
This commit is contained in:
李志鹏
2026-01-08 14:29:10 +08:00
parent 567ae02c48
commit 4e0faed88e
17 changed files with 229 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/component/Canvas/CanvasEditor/managers/CanvasManager.js
View File

@@ -13,6 +13,7 @@ import {
createLayer,
LayerType,
SpecialLayerId,
SpecialType,
BlendMode,
} from "../utils/layerHelper";
import { ObjectMoveCommand } from "../commands/ObjectCommands";
@@ -175,6 +176,7 @@ export class CanvasManager {
// 返回false表示使用默认行为（直接添加到画布）
return false;
};
this.eraserStateManager = new EraserStateManager(
this.canvas,
@@ -568,10 +570,10 @@ export class CanvasManager {
}
// 更新颜色层信息
const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
if(colorObject){
await this.setObjecCliptInfo(colorObject);
}
// const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
// if(colorObject){
// await this.setObjecCliptInfo(colorObject);
// }
const groupLayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
if(groupLayer){
const groupRect = new fabric.Rect({});
@@ -945,7 +947,7 @@ export class CanvasManager {
options.restoreOpacityInRedGreen !== undefined
? options.restoreOpacityInRedGreen
: false, // 默认在红绿图模式下恢复透明度
excludedLayers: [SpecialLayerId.SPECIAL_GROUP],
// excludedLayers: [SpecialLayerId.SPECIAL_GROUP], // 导出时排除的图层ID数组
};
// 如果在红绿图模式下且没有指定具体的图层，自动包含所有普通图层
@@ -1040,10 +1042,10 @@ export class CanvasManager {
* 导出印花和元素图层
*/
async exportPrintTrimsLayers() {
const object = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
if(!object) return Promise.reject("印花和元素图层组不存在");
const ids = object.children.map((v) => v.id);
const objects = this.getObjectsByIds(ids).filter((v) => !!v.sourceData);
const glayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
if(!glayer) return Promise.reject("印花和元素图层组不存在");
const ids = glayer.children.map((v) => v.id);
const objects = this.getObjectsByIds(ids);
const fixedLayerObj = this.getFixedLayerObject();
if(!fixedLayerObj) return Promise.reject("固定图层不存在");
const flWidth = fixedLayerObj.width
@@ -1055,33 +1057,55 @@ export class CanvasManager {
const prints = [];
const trims = [];
objects.forEach((v) => {
const sourceData = glayer.children.find((v_) => v_.id === v.id)?.metadata?.sourceData;
if(!sourceData) return;
const obj = {
ifSingle: v.sourceData.ifSingle,
level2Type: v.sourceData.level2Type,
designType: v.sourceData.designType,
path: v.sourceData.path,
minIOPath: v.sourceData.minIOPath,
ifSingle: typeof v.fill === "string",
level2Type: sourceData.level2Type,
designType: sourceData.designType,
path: sourceData.path,
minIOPath: sourceData.minIOPath,
location: [0, 0],
scale: [0, 0],
angle: v.angle,
name: v.sourceData.name,
priority: v.sourceData.priority,
gap: [0, 0],
name: sourceData.name,
priority: sourceData.priority,
object:{
top: 0,
left: 0,
scaleX: 0,//对象的缩放比例
scaleY: 0,//对象的缩放比例
opacity: v.opacity,
angle: v.angle,
flipX: v.flipX,//是否水平翻转
flipY: v.flipY,//是否垂直翻转
blendMode: v.globalCompositeOperation,// 混合模式
gapX: 0,// 平铺模式下的间距
gapY: 0,// 平铺模式下的间距
}
}
let left = (v.left - (flLeft - flWidth * flScaleX / 2));
let top = (v.top - (flTop - flHeight * flScaleY / 2));
let width = (v.width * v.scaleX);
let height = (v.height * v.scaleY);
let {x:cx, y:cy} = calculateCenterPoint(width, height, left, top, v.angle);
let oX = (cx-width/2) / flScaleX;
let oY = (cy-height/2) / flScaleY;
let oScaleX = (v.width * v.scaleX) / (flWidth * flScaleX);
let oScaleY = (v.height * v.scaleY) / (flHeight * flScaleY);
// obj.object.width = width;
// obj.object.height = height;
obj.object.top = oY;
obj.object.left = oX;
obj.object.scaleX = oScaleX;
obj.object.scaleY = oScaleY;
if(obj.ifSingle){
let left = (v.left - (flLeft - flWidth * flScaleX / 2));
let top = (v.top - (flTop - flHeight * flScaleY / 2));
let width = (v.width * v.scaleX);
let height = (v.height * v.scaleY);
let {x:cx, y:cy} = calculateCenterPoint(width, height, left, top, v.angle);
let x = (cx-width/2) / flScaleX;
let y = (cy-height/2) / flScaleY;
obj.location = [x, y];
obj.scale = [(v.width * v.scaleX) / (flWidth * flScaleX), (v.height * v.scaleY) / (flHeight * flScaleY)];
obj.location = [oX, oY];
obj.scale = [oScaleX, oScaleY];
}else{
let fill = v.fill;
let fill_ = v.fill_;
if(!fill || !fill_) return;
if(!fill || !fill_) return console.warn("印花元素不存在fill或fill_属性");
let {scale, angle} = getTransformScaleAngle(fill.patternTransform);
let scaleX = scale * 5 * v.fill_.width / flWidth;
let scaleY = scale * 5 * v.fill_.height / flHeight;
@@ -1339,7 +1363,6 @@ export class CanvasManager {
await this.setCanvasSize(this.canvas.width, this.canvas.height);
await this.centerBackgroundLayer(this.canvas.width, this.canvas.height);
await this.createOtherLayers(this.props.otherData);
// 重新构建对象关系
// restoreObjectLayerAssociations(this.layers.value, this.canvas.getObjects());
// 验证图层关联关系 - 稳定后可以注释
@@ -1490,7 +1513,7 @@ export class CanvasManager {
globalCompositeOperation: BlendMode.MULTIPLY,
originColor: color,
});
await this.setObjecCliptInfo(colorRect);
// await this.setObjecCliptInfo(colorRect);
const gradientObj = palletToFill(color);
const gradient = new fabric.Gradient({
type: 'linear',
@@ -1561,7 +1584,8 @@ export class CanvasManager {
selectable: true,
hasControls: true,
hasBorders: true,
sourceData: item,
specialType: SpecialType.PRINT_TRIMS_O,
globalCompositeOperation: BlendMode.MULTIPLY,
});
resolve(fabricImage);
}, { crossOrigin: "anonymous" });
@@ -1574,7 +1598,10 @@ export class CanvasManager {
visible: true,
locked: false,
opacity: 1.0,
specialType: SpecialType.PRINT_TRIMS_L,
blendMode: BlendMode.MULTIPLY,
fabricObjects: [image.toObject(["id", "layerId", "layerName"])],
metadata: {sourceData: item},
})
children.push(layer);
};
@@ -1606,13 +1633,11 @@ export class CanvasManager {
layerName: name,
width: fixedLayerObj.width,
height: fixedLayerObj.height,
top: fixedLayerObj.top,
left: fixedLayerObj.left,
top: fixedLayerObj.top - fixedLayerObj.height * fixedLayerObj.scaleY / 2,
left: fixedLayerObj.left - fixedLayerObj.width * fixedLayerObj.scaleX / 2,
scaleX: fixedLayerObj.scaleX,
scaleY: fixedLayerObj.scaleY,
originX: fixedLayerObj.originX,
originY: fixedLayerObj.originY,
sourceData: item,
globalCompositeOperation: BlendMode.MULTIPLY,
fill: new fabric.Pattern({
source: image,
repeat: "repeat",
@@ -1626,7 +1651,8 @@ export class CanvasManager {
gapY: 0,
width: image.width,
height: image.height,
}
},
specialType: SpecialType.REPEAT_O,
});
this.canvas.add(rect);
let layer = createLayer({
@@ -1636,7 +1662,10 @@ export class CanvasManager {
visible: true,
locked: true,
opacity: 1,
specialType: SpecialType.REPEAT_L,
blendMode: BlendMode.MULTIPLY,
fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
metadata: {sourceData: item},
})
children.push(layer);
};
@@ -1667,6 +1696,7 @@ export class CanvasManager {
children: children,
clippingMask: groupRect.toObject(),
isFixedClipMask: true,
specialType: SpecialType.PRINT_TRIMS_G,
});
this.layers.value.splice(groupIndex, 0, groupLayer);
}
@@ -1675,29 +1705,29 @@ export class CanvasManager {
* 画布事件变更后
*/
async changeCanvas(){
// const fixedLayerObj = this.getFixedLayerObject();
// if(!fixedLayerObj) return console.warn("固定图层对象不存在", fixedLayerObj)
// const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
// if(colorObject){
// const ids = this.layerManager.getBlendModeLayerIds(SpecialLayerId.SPECIAL_GROUP);
// if(ids.length === 0){
// ids.unshift(SpecialLayerId.SPECIAL_GROUP);
// await this.setObjecCliptInfo(colorObject);
// this.canvas.renderAll();
// return;
// }
// const base64 = await this.exportManager.exportImage({layerIdArray2: ids, isEnhanceImg: true});
// if(!base64) return console.warn("导出图片失败", base64)
// const canvas = await base64ToCanvas(base64, fixedLayerObj.scaleX * 2, true);
// const ctx = canvas.getContext('2d');
// const width = fixedLayerObj.width;
// const height = fixedLayerObj.height;
// const x = (canvas.width - width) / 2;
// const y = (canvas.height - height) / 2;
// const data = ctx.getImageData(x, y, width, height);
// await this.setObjecCliptInfo(colorObject, data);
// this.canvas.renderAll();
// }
const fixedLayerObj = this.getFixedLayerObject();
if(!fixedLayerObj) return console.warn("固定图层对象不存在", fixedLayerObj)
const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
if(colorObject){
const ids = this.layerManager.getBlendModeLayerIds(SpecialLayerId.SPECIAL_GROUP);
if(ids.length === 0){
ids.unshift(SpecialLayerId.SPECIAL_GROUP);
await this.setObjecCliptInfo(colorObject);
this.canvas.renderAll();
return;
}
const base64 = await this.exportManager.exportImage({layerIdArray2: ids, isEnhanceImg: true});
if(!base64) return console.warn("导出图片失败", base64)
const canvas = await base64ToCanvas(base64, fixedLayerObj.scaleX * 2, true);
const ctx = canvas.getContext('2d');
const width = fixedLayerObj.width;
const height = fixedLayerObj.height;
const x = (canvas.width - width) / 2;
const y = (canvas.height - height) / 2;
const data = ctx.getImageData(x, y, width, height);
await this.setObjecCliptInfo(colorObject, data);
this.canvas.renderAll();
}
}
/**

6
src/component/Canvas/CanvasEditor/managers/ExportManager.js
View File

@@ -45,12 +45,6 @@ export class ExportManager {
excludedLayers = [], // 排除的图层ID数组
} = options;
try {
// 查找颜色图层并隐藏
// const colorLayer = this.layerManager.getLayerById(SpecialLayerId.COLOR);
// if (colorLayer && colorLayer.visible) {
// colorLayer.visible = false;
// await this.layerManager?.updateLayersObjectsInteractivity();
// }
// 检查是否为红绿图模式
const isRedGreenMode = this.layerManager?.isInRedGreenMode?.() || false;