feat: 添加图层缩略图生成时对遮罩对象的支持,优化图层对象的z-index处理

This commit is contained in:
bighuixiang
2025-07-15 00:15:55 +08:00
parent fc9a3eddc2
commit e31a619bd6
2 changed files with 72 additions and 4 deletions

View File

@@ -228,6 +228,18 @@ export class RasterizeLayerCommand extends Command {
const objectsWithZIndex = [];
this.layersToRasterize.forEach((layer) => {
if (layer.fill) {
const { object } = findObjectById(this.canvas, layer.fill.id);
if (object) {
// 获取对象在画布中的z-index数组索引
const zIndex = allCanvasObjects.indexOf(object);
objectsWithZIndex.push({
object: object,
zIndex: zIndex,
layerObj: layer.fill,
});
}
}
if (layer.fabricObjects && layer.fabricObjects.length > 0) {
layer.fabricObjects.forEach((layerObj) => {
if (layerObj && layerObj.id) {
@@ -459,11 +471,27 @@ export class ExportLayerToImageCommand extends Command {
this.canvas.discardActiveObject();
this.canvas.renderAll();
// 重新创建遮罩对象
let clippingMaskFabricObject = null;
if (this.layer?.clippingMask) {
// 重新创建遮罩对象
clippingMaskFabricObject = await restoreFabricObject(this.layer?.clippingMask, this.canvas);
clippingMaskFabricObject.clipPath = null;
clippingMaskFabricObject.set({
absolutePositioned: true,
});
clippingMaskFabricObject.dirty = true;
clippingMaskFabricObject.setCoords();
}
// 创建图像
const imageBase64 = await createRasterizedImage({
canvas: this.canvas,
fabricObjects: this.objectsToRasterize,
isReturenDataURL: true,
maskObject: clippingMaskFabricObject || null, // 不处理遮罩
});
// 模拟浏览器下载
@@ -504,6 +532,18 @@ export class ExportLayerToImageCommand extends Command {
const objectsWithZIndex = [];
this.layersToRasterize.forEach((layer) => {
if (layer.fill) {
const { object } = findObjectById(this.canvas, layer.fill.id);
if (object) {
// 获取对象在画布中的z-index数组索引
const zIndex = allCanvasObjects.indexOf(object);
objectsWithZIndex.push({
object: object,
zIndex: zIndex,
layerObj: layer.fill,
});
}
}
if (layer.fabricObjects && layer.fabricObjects.length > 0) {
layer.fabricObjects.forEach((layerObj) => {
if (layerObj && layerObj.id) {