1187 lines
35 KiB
JavaScript
1187 lines
35 KiB
JavaScript
|
//import { fabric } from "fabric-with-all";
|
|||
|
|
import initAligningGuidelines, {
|
|||
|
|
initCenteringGuidelines,
|
|||
|
|
} from "../utils/helperLine";
|
|||
|
|
import { ThumbnailManager } from "./ThumbnailManager";
|
|||
|
|
import { ExportManager } from "./ExportManager";
|
|||
|
|
import {
|
|||
|
|
isGroupLayer,
|
|||
|
|
OperationType,
|
|||
|
|
OperationTypes,
|
|||
|
|
} from "../utils/layerHelper";
|
|||
|
|
import { AnimationManager } from "./animation/AnimationManager";
|
|||
|
|
import { createCanvas } from "../utils/canvasFactory";
|
|||
|
|
import { CanvasEventManager } from "./events/CanvasEventManager";
|
|||
|
|
import CanvasConfig from "../config/canvasConfig";
|
|||
|
|
import { RedGreenModeManager } from "./RedGreenModeManager";
|
|||
|
|
import {
|
|||
|
|
ChangeFixedImageCommand,
|
|||
|
|
AddImageToLayerCommand,
|
|||
|
|
} from "../commands/ObjectLayerCommands";
|
|||
|
|
|
|||
|
|
export class CanvasManager {
|
|||
|
|
constructor(canvasElement, options) {
|
|||
|
|
this.canvasElement = canvasElement;
|
|||
|
|
this.width = options.width || 1024;
|
|||
|
|
this.height = options.height || 768;
|
|||
|
|
this.backgroundColor = options.backgroundColor || "#ffffff";
|
|||
|
|
this.toolManager = options.toolManager || null; // 工具管理器引用
|
|||
|
|
this.currentZoom = options.currentZoom || { value: 100 };
|
|||
|
|
this.maskLayer = null; // 添加蒙层引用
|
|||
|
|
this.editorMode = CanvasConfig.defaultTool; // 默认编辑器模式
|
|||
|
|
this.layers = options.layers || null; // 图层引用
|
|||
|
|
this.canvasWidth = options.canvasWidth || this.width; // 画布宽度
|
|||
|
|
this.canvasHeight = options.canvasHeight || this.height; // 画布高度
|
|||
|
|
this.canvasColor = options.canvasColor || "#ffffff"; // 画布背景颜色
|
|||
|
|
this.enabledRedGreenMode = options.enabledRedGreenMode || false; // 是否启用红绿图模式
|
|||
|
|
// 初始化画布
|
|||
|
|
this.initializeCanvas();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
initializeCanvas() {
|
|||
|
|
console.log("fabric.version:", fabric.version);
|
|||
|
|
this.canvas = createCanvas(this.canvasElement, {
|
|||
|
|
width: this.width,
|
|||
|
|
height: this.height,
|
|||
|
|
preserveObjectStacking: true,
|
|||
|
|
enableRetinaScaling: true,
|
|||
|
|
stopContextMenu: true,
|
|||
|
|
fireRightClick: true,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 初始化动画管理器
|
|||
|
|
this.animationManager = new AnimationManager(this.canvas, {
|
|||
|
|
currentZoom: this.currentZoom,
|
|||
|
|
wheelThrottleTime: 15, // 降低滚轮事件节流时间，提高响应性
|
|||
|
|
defaultEase: "power2.lin",
|
|||
|
|
defaultDuration: 0.3, // 缩短默认动画时间
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 初始化缩略图管理器
|
|||
|
|
this.thumbnailManager = new ThumbnailManager(this.canvas, {
|
|||
|
|
// 可以根据需求自定义选项
|
|||
|
|
layerThumbSize: { width: 32, height: 32 },
|
|||
|
|
elementThumbSize: { width: 32, height: 24 },
|
|||
|
|
layers: this.layers,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 初始化红绿图模式管理器
|
|||
|
|
this.redGreenModeManager = new RedGreenModeManager({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layerManager: null, // 稍后设置
|
|||
|
|
toolManager: null, // 稍后设置
|
|||
|
|
commandManager: null, // 稍后设置
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 设置画布辅助线
|
|||
|
|
initAligningGuidelines(this.canvas);
|
|||
|
|
|
|||
|
|
// 设置画布中心线
|
|||
|
|
initCenteringGuidelines(this.canvas);
|
|||
|
|
|
|||
|
|
// 初始化画布事件监听器
|
|||
|
|
this._initCanvasEvents();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化画布事件监听器
|
|||
|
|
* 设置鼠标事件、键盘事件等
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_initCanvasEvents() {
|
|||
|
|
// 添加笔刷图像转换处理回调
|
|||
|
|
this.canvas.onBrushImageConverted = (fabricImage) => {
|
|||
|
|
// 如果图层管理器存在，将图像合并到当前活动图层
|
|||
|
|
if (this.layerManager) {
|
|||
|
|
// 获取当前活动图层
|
|||
|
|
const activeLayer = this.layerManager.getActiveLayer();
|
|||
|
|
|
|||
|
|
if (activeLayer) {
|
|||
|
|
// 确保新图像具有正确的图层信息
|
|||
|
|
fabricImage.set({
|
|||
|
|
layerId: activeLayer.id,
|
|||
|
|
layerName: activeLayer.name,
|
|||
|
|
id:
|
|||
|
|
fabricImage.id ||
|
|||
|
|
`brush_img_${Date.now()}_${Math.floor(Math.random() * 1000)}`,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行高保真合并操作
|
|||
|
|
this.eventManager?.mergeLayerObjectsForPerformance?.({
|
|||
|
|
fabricImage,
|
|||
|
|
activeLayer,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 返回false表示不要自动添加到画布，因为我们已经通过图层管理器处理了
|
|||
|
|
return false;
|
|||
|
|
} else {
|
|||
|
|
console.warn("没有活动图层，使用默认行为添加图像");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 返回true表示使用默认行为（直接添加到画布）
|
|||
|
|
return true;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设置编辑器模式
|
|||
|
|
* @param {string} mode 'draw'、'select'或'pan'
|
|||
|
|
*/
|
|||
|
|
toolChanged(mode) {
|
|||
|
|
if (!OperationTypes.includes(mode)) {
|
|||
|
|
console.warn(`不支持的编辑器模式: ${mode}`);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.editorMode = mode;
|
|||
|
|
|
|||
|
|
// 如果已创建事件管理器，更新它的编辑器模式
|
|||
|
|
if (this.eventManager) {
|
|||
|
|
this.eventManager.setEditorMode(mode);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setToolManager(toolManager) {
|
|||
|
|
this.toolManager = toolManager || null; // 工具管理器引用
|
|||
|
|
|
|||
|
|
// 更新红绿图模式管理器的工具管理器引用
|
|||
|
|
if (this.redGreenModeManager) {
|
|||
|
|
this.redGreenModeManager.toolManager = this.toolManager;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果已创建事件管理器，更新它的工具管理器引用
|
|||
|
|
if (this.eventManager) {
|
|||
|
|
this.eventManager.toolManager = this.toolManager;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setLayerManager(layerManager) {
|
|||
|
|
this.layerManager = layerManager || null; // 图层管理器引用
|
|||
|
|
|
|||
|
|
// 初始化导出管理器（需要在图层管理器设置后初始化）
|
|||
|
|
if (this.layerManager) {
|
|||
|
|
this.exportManager = new ExportManager(this, this.layerManager);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新红绿图模式管理器的图层管理器引用
|
|||
|
|
if (this.redGreenModeManager) {
|
|||
|
|
this.redGreenModeManager.layerManager = this.layerManager;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设置命令管理器
|
|||
|
|
* @param {Object} commandManager 命令管理器实例
|
|||
|
|
*/
|
|||
|
|
setCommandManager(commandManager) {
|
|||
|
|
this.commandManager = commandManager;
|
|||
|
|
|
|||
|
|
// 更新红绿图模式管理器的命令管理器引用
|
|||
|
|
if (this.redGreenModeManager) {
|
|||
|
|
this.redGreenModeManager.commandManager = this.commandManager;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设置液化管理器
|
|||
|
|
* @param {Object} liquifyManager 液化管理器实例
|
|||
|
|
*/
|
|||
|
|
setLiquifyManager(liquifyManager) {
|
|||
|
|
this.liquifyManager = liquifyManager;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设置选区管理器
|
|||
|
|
* @param {Object} selectionManager 选区管理器实例
|
|||
|
|
*/
|
|||
|
|
setSelectionManager(selectionManager) {
|
|||
|
|
this.selectionManager = selectionManager;
|
|||
|
|
|
|||
|
|
// 如果已创建事件管理器，更新它的选区管理器引用
|
|||
|
|
if (this.eventManager) {
|
|||
|
|
this.eventManager.selectionManager = this.selectionManager;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置红绿图模式管理器
|
|||
|
|
setRedGreenModeManager(redGreenModeManager) {
|
|||
|
|
this.redGreenModeManager = redGreenModeManager;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setupCanvasEvents(activeElementId, layerManager) {
|
|||
|
|
// 创建画布事件管理器
|
|||
|
|
this.eventManager = new CanvasEventManager(this.canvas, {
|
|||
|
|
toolManager: this.toolManager,
|
|||
|
|
animationManager: this.animationManager,
|
|||
|
|
thumbnailManager: this.thumbnailManager,
|
|||
|
|
editorMode: this.editorMode,
|
|||
|
|
activeElementId: activeElementId,
|
|||
|
|
layerManager: layerManager,
|
|||
|
|
layers: this.layers,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 设置动画交互效果
|
|||
|
|
this.animationManager.setupInteractionAnimations();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setupLongPress(callback) {
|
|||
|
|
if (this.eventManager) {
|
|||
|
|
this.eventManager.setupLongPress(callback);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateSelectedElements(opt, activeElementId) {
|
|||
|
|
if (this.eventManager) {
|
|||
|
|
this.eventManager.updateSelectedElements(opt);
|
|||
|
|
} else {
|
|||
|
|
const selected = opt.selected[0];
|
|||
|
|
if (selected) {
|
|||
|
|
activeElementId.value = selected.id;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
clearSelectedElements(activeElementId) {
|
|||
|
|
if (this.eventManager) {
|
|||
|
|
this.eventManager.clearSelectedElements();
|
|||
|
|
} else if (activeElementId) {
|
|||
|
|
activeElementId.value = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用动画管理器的缩放方法
|
|||
|
|
animateZoom(point, targetZoom, options = {}) {
|
|||
|
|
this.animationManager.animateZoom(point, targetZoom, options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 应用缩放（为兼容性保留）
|
|||
|
|
_applyZoom(point, zoom, skipUpdate = false) {
|
|||
|
|
this.animationManager._applyZoom(point, zoom, skipUpdate);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用动画管理器的平移方法
|
|||
|
|
animatePan(targetPosition, options = {}) {
|
|||
|
|
this.animationManager.animatePan(targetPosition, options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 应用平移（为兼容性保留）
|
|||
|
|
_applyPan(x, y) {
|
|||
|
|
this.animationManager._applyPan(x, y);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 平移到指定元素
|
|||
|
|
panToElement(elementId) {
|
|||
|
|
this.animationManager.panToElement(elementId);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重置缩放并居中内容
|
|||
|
|
async resetZoom(animated = true) {
|
|||
|
|
// 先重置缩放
|
|||
|
|
await this.animationManager.resetZoom(animated);
|
|||
|
|
|
|||
|
|
// // 重置视图变换以确保元素位置正确
|
|||
|
|
// this._resetViewportTransform();
|
|||
|
|
|
|||
|
|
// // 居中所有画布元素，包括背景层和其他元素
|
|||
|
|
// this.centerAllObjects();
|
|||
|
|
|
|||
|
|
// 重新渲染画布使变更生效
|
|||
|
|
this.canvas.renderAll();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setCanvasSize(width, height) {
|
|||
|
|
this.width = width;
|
|||
|
|
this.height = height;
|
|||
|
|
this.canvas.setWidth(width);
|
|||
|
|
this.canvas.setHeight(height);
|
|||
|
|
|
|||
|
|
// 重置视图变换以确保元素位置正确
|
|||
|
|
this._resetViewportTransform();
|
|||
|
|
|
|||
|
|
// 居中所有画布元素，包括背景层和其他元素
|
|||
|
|
this.centerAllObjects();
|
|||
|
|
|
|||
|
|
// 重新渲染画布使变更生效
|
|||
|
|
this.canvas.renderAll();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 重置视图变换，使元素回到原始位置
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_resetViewportTransform() {
|
|||
|
|
// 保存当前缩放值
|
|||
|
|
const currentZoom = this.canvas.getZoom();
|
|||
|
|
|
|||
|
|
// 重置视图变换，但保留缩放级别
|
|||
|
|
this.canvas.setViewportTransform([currentZoom, 0, 0, currentZoom, 0, 0]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 居中所有画布元素
|
|||
|
|
* 计算所有对象的边界框，然后将它们整体居中显示
|
|||
|
|
*/
|
|||
|
|
centerAllObjects() {
|
|||
|
|
if (!this.canvas) return;
|
|||
|
|
|
|||
|
|
// 获取所有可见对象（不是背景元素的对象）
|
|||
|
|
const allObjects = this.canvas.getObjects();
|
|||
|
|
if (allObjects.length === 0) return;
|
|||
|
|
|
|||
|
|
const visibleObjects = allObjects.filter(
|
|||
|
|
(obj) => obj.visible !== false && !obj.excludeFromExport
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 如果只有背景层或没有可见对象，只居中背景层
|
|||
|
|
if (
|
|||
|
|
visibleObjects.length === 0 ||
|
|||
|
|
(visibleObjects.length === 1 && visibleObjects[0].isBackground)
|
|||
|
|
) {
|
|||
|
|
// 尝试居中背景层
|
|||
|
|
this.centerBackgroundLayer(this.width, this.height);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 单独处理背景层
|
|||
|
|
const backgroundObject = visibleObjects.find((obj) => obj.isBackground);
|
|||
|
|
const contentObjects = backgroundObject
|
|||
|
|
? visibleObjects.filter((obj) => obj !== backgroundObject)
|
|||
|
|
: visibleObjects;
|
|||
|
|
|
|||
|
|
// 如果只有背景层，居中背景层
|
|||
|
|
if (contentObjects.length === 0 && backgroundObject) {
|
|||
|
|
this.centerBackgroundLayer(this.width, this.height);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算内容对象的边界
|
|||
|
|
const bounds = this._calculateObjectsBounds(contentObjects);
|
|||
|
|
|
|||
|
|
// 计算所有对象的中心点
|
|||
|
|
const objectsCenterX = bounds.left + bounds.width / 2;
|
|||
|
|
const objectsCenterY = bounds.top + bounds.height / 2;
|
|||
|
|
|
|||
|
|
// 计算画布中心点
|
|||
|
|
const canvasCenterX = this.width / 2;
|
|||
|
|
const canvasCenterY = this.height / 2;
|
|||
|
|
|
|||
|
|
// 计算需要移动的距离
|
|||
|
|
const deltaX = canvasCenterX - objectsCenterX;
|
|||
|
|
const deltaY = canvasCenterY - objectsCenterY;
|
|||
|
|
|
|||
|
|
// 移动所有对象，包括背景层
|
|||
|
|
visibleObjects.forEach((obj) => {
|
|||
|
|
obj.set({
|
|||
|
|
left: obj.left + deltaX,
|
|||
|
|
top: obj.top + deltaY,
|
|||
|
|
});
|
|||
|
|
obj.setCoords(); // 更新对象的控制点坐标
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 如果有背景层，更新蒙层位置
|
|||
|
|
if (backgroundObject && CanvasConfig.isCropBackground) {
|
|||
|
|
this.updateMaskPosition(backgroundObject);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重新渲染画布
|
|||
|
|
this.canvas.renderAll();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 计算多个对象的总边界框
|
|||
|
|
* @private
|
|||
|
|
* @param {Array} objects 要计算边界的对象数组
|
|||
|
|
* @return {Object} 边界信息，包含left、top、width、height
|
|||
|
|
*/
|
|||
|
|
_calculateObjectsBounds(objects) {
|
|||
|
|
if (!objects || objects.length === 0) return null;
|
|||
|
|
|
|||
|
|
let minX = Infinity;
|
|||
|
|
let minY = Infinity;
|
|||
|
|
let maxX = -Infinity;
|
|||
|
|
let maxY = -Infinity;
|
|||
|
|
|
|||
|
|
objects.forEach((obj) => {
|
|||
|
|
const bound = obj.getBoundingRect();
|
|||
|
|
minX = Math.min(minX, bound.left);
|
|||
|
|
minY = Math.min(minY, bound.top);
|
|||
|
|
maxX = Math.max(maxX, bound.left + bound.width);
|
|||
|
|
maxY = Math.max(maxY, bound.top + bound.height);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
left: minX,
|
|||
|
|
top: minY,
|
|||
|
|
width: maxX - minX,
|
|||
|
|
height: maxY - minY,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setCanvasColor(color) {
|
|||
|
|
this.backgroundColor = color;
|
|||
|
|
this.canvas.setBackgroundColor(
|
|||
|
|
color,
|
|||
|
|
this.canvas.renderAll.bind(this.canvas)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 居中背景层
|
|||
|
|
* @param {Object} backgroundLayerObject 背景层对象
|
|||
|
|
* @param {Number} canvasWidth 画布宽度
|
|||
|
|
* @param {Number} canvasHeight 画布高度
|
|||
|
|
*/
|
|||
|
|
centerBackgroundLayer(canvasWidth, canvasHeight) {
|
|||
|
|
const backgroundLayerObject = this.getBackgroundLayer();
|
|||
|
|
if (!backgroundLayerObject) return false;
|
|||
|
|
|
|||
|
|
// const bgWidth = backgroundLayerObject.width * backgroundLayerObject.scaleX;
|
|||
|
|
// const bgHeight =
|
|||
|
|
// backgroundLayerObject.height * backgroundLayerObject.scaleY;
|
|||
|
|
|
|||
|
|
// 计算居中位置
|
|||
|
|
const left = canvasWidth / 2;
|
|||
|
|
const top = canvasHeight / 2;
|
|||
|
|
|
|||
|
|
backgroundLayerObject.set({
|
|||
|
|
left: left,
|
|||
|
|
top: top,
|
|||
|
|
originX: "center",
|
|||
|
|
originY: "center",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
!CanvasConfig.isCropBackground && this.canvas.renderAll(); // 如果不需要裁剪背景层以外的内容，则渲染画布
|
|||
|
|
|
|||
|
|
// 如果需要裁剪背景层以外的内容，则更新蒙层位置
|
|||
|
|
// 创建或更新蒙层
|
|||
|
|
CanvasConfig.isCropBackground &&
|
|||
|
|
this.createOrUpdateMask(backgroundLayerObject);
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 创建或更新蒙层，用于裁剪不可见区域
|
|||
|
|
* @param {Object} backgroundLayerObject 背景层对象
|
|||
|
|
*/
|
|||
|
|
createOrUpdateMask(backgroundLayerObject) {
|
|||
|
|
if (!backgroundLayerObject) return;
|
|||
|
|
|
|||
|
|
const bgWidth = backgroundLayerObject.width * backgroundLayerObject.scaleX;
|
|||
|
|
const bgHeight =
|
|||
|
|
backgroundLayerObject.height * backgroundLayerObject.scaleY;
|
|||
|
|
const left = backgroundLayerObject.left;
|
|||
|
|
const top = backgroundLayerObject.top;
|
|||
|
|
|
|||
|
|
// 如果已经存在蒙层，则更新它
|
|||
|
|
if (this.maskLayer) {
|
|||
|
|
this.canvas.remove(this.maskLayer);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 创建蒙层 - 使用透明矩形作为裁剪区域
|
|||
|
|
this.maskLayer = new fabric.Rect({
|
|||
|
|
width: bgWidth,
|
|||
|
|
height: bgHeight,
|
|||
|
|
left: left,
|
|||
|
|
top: top,
|
|||
|
|
fill: "transparent",
|
|||
|
|
stroke: "#cccccc",
|
|||
|
|
strokeWidth: 1,
|
|||
|
|
strokeDashArray: [5, 5],
|
|||
|
|
selectable: false,
|
|||
|
|
evented: false,
|
|||
|
|
hoverCursor: "default",
|
|||
|
|
originX: "center",
|
|||
|
|
originY: "center",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 将蒙层添加到画布
|
|||
|
|
this.canvas.add(this.maskLayer);
|
|||
|
|
|
|||
|
|
// 设置蒙层为最顶层
|
|||
|
|
this.maskLayer.bringToFront();
|
|||
|
|
|
|||
|
|
this.canvas.clipPath = new fabric.Rect({
|
|||
|
|
width: bgWidth,
|
|||
|
|
height: bgHeight,
|
|||
|
|
left: 0,
|
|||
|
|
top: 0,
|
|||
|
|
originX: backgroundLayerObject.originX || "left",
|
|||
|
|
originY: backgroundLayerObject.originY || "top",
|
|||
|
|
absolutePositioned: true,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 设置蒙层位置
|
|||
|
|
this.canvas.clipPath.set({
|
|||
|
|
left: left,
|
|||
|
|
top: top,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.canvas.renderAll();
|
|||
|
|
}
|
|||
|
|
getBackgroundLayer() {
|
|||
|
|
if (!this.canvas) return null;
|
|||
|
|
|
|||
|
|
const backgroundLayer = this.canvas.getObjects().find((obj) => {
|
|||
|
|
return obj.isBackground;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (backgroundLayer) return backgroundLayer;
|
|||
|
|
|
|||
|
|
// 如果没有找到背景层，则根据图层ID查找
|
|||
|
|
const backgroundLayerId = this.layers.value.find((layer) => {
|
|||
|
|
return layer.isBackground;
|
|||
|
|
})?.id;
|
|||
|
|
|
|||
|
|
const backgroundLayerByBgLayer = this.canvas.getObjects().find((obj) => {
|
|||
|
|
return obj.isBackground || obj.id === backgroundLayerId;
|
|||
|
|
});
|
|||
|
|
if (!backgroundLayerByBgLayer) {
|
|||
|
|
console.warn(
|
|||
|
|
"CanvasManager.js = >getBackgroundLayer 方法没有找到背景层"
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return backgroundLayerByBgLayer;
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 更新蒙层位置
|
|||
|
|
* @param {Object} backgroundLayerObject 背景层对象
|
|||
|
|
*/
|
|||
|
|
updateMaskPosition(backgroundLayerObject) {
|
|||
|
|
if (!backgroundLayerObject || !this.maskLayer || !this.canvas.clipPath)
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
const left = backgroundLayerObject.left;
|
|||
|
|
const top = backgroundLayerObject.top;
|
|||
|
|
|
|||
|
|
this.maskLayer.set({
|
|||
|
|
left: left,
|
|||
|
|
top: top,
|
|||
|
|
width: backgroundLayerObject.width * backgroundLayerObject.scaleX,
|
|||
|
|
height: backgroundLayerObject.height * backgroundLayerObject.scaleY,
|
|||
|
|
originX: backgroundLayerObject.originX || "left",
|
|||
|
|
originY: backgroundLayerObject.originY || "top",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.canvas.clipPath.set({
|
|||
|
|
left: left,
|
|||
|
|
top: top,
|
|||
|
|
width: backgroundLayerObject.width * backgroundLayerObject.scaleX,
|
|||
|
|
height: backgroundLayerObject.height * backgroundLayerObject.scaleY,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.canvas.renderAll();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 更新指定图层的缩略图
|
|||
|
|
* @param {String} layerId 图层ID
|
|||
|
|
*/
|
|||
|
|
updateLayerThumbnail(layerId) {
|
|||
|
|
if (!this.thumbnailManager || !layerId || !this.layers) return;
|
|||
|
|
|
|||
|
|
const layer = this.layers.value.find((l) => l.id === layerId);
|
|||
|
|
if (layer) {
|
|||
|
|
this.thumbnailManager.generateLayerThumbnail(layer);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 更新指定元素图层的缩略图
|
|||
|
|
* @param {String} elementId 元素ID
|
|||
|
|
* @param {Object} fabricObject fabric对象
|
|||
|
|
*/
|
|||
|
|
updateElementThumbnail(elementId, fabricObject) {
|
|||
|
|
if (this.eventManager) {
|
|||
|
|
this.eventManager.updateElementThumbnail(elementId, fabricObject);
|
|||
|
|
} else if (
|
|||
|
|
this.thumbnailManager &&
|
|||
|
|
elementId &&
|
|||
|
|
fabricObject &&
|
|||
|
|
this.layers
|
|||
|
|
) {
|
|||
|
|
// 查找对应的图层(现在元素就是图层)
|
|||
|
|
const layer = this.layers.value.find(
|
|||
|
|
(l) =>
|
|||
|
|
l.id === elementId ||
|
|||
|
|
(l.fabricObject && l.fabricObject.id === elementId)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (layer) {
|
|||
|
|
// 生成图层缩略图
|
|||
|
|
this.thumbnailManager.generateLayerThumbnail(layer);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 同时也维护元素缩略图，以保持向后兼容性
|
|||
|
|
this.thumbnailManager.generateElementThumbnail(
|
|||
|
|
{ id: elementId, type: fabricObject.type },
|
|||
|
|
fabricObject
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 更新所有图层和元素的缩略图
|
|||
|
|
*/
|
|||
|
|
updateAllThumbnails() {
|
|||
|
|
if (!this.thumbnailManager || !this.layers) return;
|
|||
|
|
|
|||
|
|
this.thumbnailManager.generateAllLayerThumbnails(this.layers.value);
|
|||
|
|
|
|||
|
|
// 为所有元素生成缩略图
|
|||
|
|
this.layers.value.forEach((layer) => {
|
|||
|
|
// 如果是分组图层，处理子图层
|
|||
|
|
if (isGroupLayer(layer) && layer.children) {
|
|||
|
|
layer.children.forEach((childLayerId) => {
|
|||
|
|
const childLayer = this.layers.value.find(
|
|||
|
|
(l) => l.id === childLayerId
|
|||
|
|
);
|
|||
|
|
if (childLayer && childLayer.fabricObject) {
|
|||
|
|
this.thumbnailManager.generateElementThumbnail(
|
|||
|
|
{ id: childLayer.id, type: childLayer.fabricObject.type },
|
|||
|
|
childLayer.fabricObject
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// 如果是元素图层，则直接生成缩略图
|
|||
|
|
else if (layer.isElementLayer && layer.fabricObject) {
|
|||
|
|
this.thumbnailManager.generateElementThumbnail(
|
|||
|
|
{ id: layer.id, type: layer.fabricObject.type },
|
|||
|
|
layer.fabricObject
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 导出图片
|
|||
|
|
* @param {Object} options 导出选项
|
|||
|
|
* @param {Boolean} options.isContainBg 是否包含背景图层
|
|||
|
|
* @param {Boolean} options.isContainFixed 是否包含固定图层
|
|||
|
|
* @param {String} options.layerId 导出具体图层ID
|
|||
|
|
* @param {Array} options.layerIdArray 导出多个图层ID数组
|
|||
|
|
* @param {String} options.expPicType 导出图片类型 (png/jpg/svg)
|
|||
|
|
* @returns {String} 导出的图片数据URL
|
|||
|
|
*/
|
|||
|
|
exportImage(options = {}) {
|
|||
|
|
if (!this.exportManager) {
|
|||
|
|
console.error("导出管理器未初始化，请确保已设置图层管理器");
|
|||
|
|
throw new Error("导出管理器未初始化");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
return this.exportManager.exportImage(options);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("CanvasManager导出图片失败:", error);
|
|||
|
|
throw error;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
dispose() {
|
|||
|
|
// 释放导出管理器资源
|
|||
|
|
if (this.exportManager) {
|
|||
|
|
this.exportManager = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 释放事件管理器资源
|
|||
|
|
if (this.eventManager) {
|
|||
|
|
this.eventManager.dispose();
|
|||
|
|
this.eventManager = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 释放动画管理器资源
|
|||
|
|
if (this.animationManager) {
|
|||
|
|
this.animationManager.dispose();
|
|||
|
|
this.animationManager = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 释放缩略图管理器资源
|
|||
|
|
if (this.thumbnailManager) {
|
|||
|
|
this.thumbnailManager.dispose();
|
|||
|
|
this.thumbnailManager = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.canvas) {
|
|||
|
|
this.canvas.dispose();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getJSON() {
|
|||
|
|
// 简化图层数据，在loadJSON时要根据id恢复引用
|
|||
|
|
let tempLayers = this.layers ? this.layers.value : [];
|
|||
|
|
|
|||
|
|
// 为所有fabric对象生成ID（如果没有的话）
|
|||
|
|
const canvasObjects = this.canvas.getObjects();
|
|||
|
|
canvasObjects.forEach((obj) => {
|
|||
|
|
if (!obj.id) {
|
|||
|
|
obj.id = `obj_${Date.now()}_${Math.floor(Math.random() * 10000)}`;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 创建对象ID映射表，用于快速查找
|
|||
|
|
const objectIdMap = new Map();
|
|||
|
|
canvasObjects.forEach((obj) => {
|
|||
|
|
if (obj.id) {
|
|||
|
|
objectIdMap.set(obj, obj.id);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
tempLayers = tempLayers.map((layer) => {
|
|||
|
|
const newLayer = { ...layer };
|
|||
|
|
|
|||
|
|
// 处理fabricObjects数组
|
|||
|
|
if (Array.isArray(layer.fabricObjects)) {
|
|||
|
|
newLayer.fabricObjects = layer.fabricObjects
|
|||
|
|
.map((item) => {
|
|||
|
|
if (!item) return null;
|
|||
|
|
|
|||
|
|
// 确保对象有ID
|
|||
|
|
if (!item.id) {
|
|||
|
|
item.id = `obj_${Date.now()}_${Math.floor(
|
|||
|
|
Math.random() * 10000
|
|||
|
|
)}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
id: item.id,
|
|||
|
|
type: item.type || "object", // 保存类型信息用于调试
|
|||
|
|
};
|
|||
|
|
})
|
|||
|
|
.filter((item) => item !== null);
|
|||
|
|
} else {
|
|||
|
|
newLayer.fabricObjects = [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理单个fabricObject
|
|||
|
|
if (layer.fabricObject) {
|
|||
|
|
if (!layer.fabricObject.id) {
|
|||
|
|
layer.fabricObject.id = `obj_${Date.now()}_${Math.floor(
|
|||
|
|
Math.random() * 10000
|
|||
|
|
)}`;
|
|||
|
|
}
|
|||
|
|
newLayer.fabricObject = {
|
|||
|
|
id: layer.fabricObject.id,
|
|||
|
|
type: layer.fabricObject.type || "object",
|
|||
|
|
};
|
|||
|
|
} else {
|
|||
|
|
newLayer.fabricObject = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理子图层
|
|||
|
|
if (Array.isArray(layer.children)) {
|
|||
|
|
newLayer.children = layer.children.map((cItem) => {
|
|||
|
|
const newChild = { ...cItem };
|
|||
|
|
|
|||
|
|
// 处理子图层的fabricObjects
|
|||
|
|
if (Array.isArray(cItem.fabricObjects)) {
|
|||
|
|
newChild.fabricObjects = cItem.fabricObjects
|
|||
|
|
.map((item) => {
|
|||
|
|
if (!item) return null;
|
|||
|
|
|
|||
|
|
if (!item.id) {
|
|||
|
|
item.id = `obj_${Date.now()}_${Math.floor(
|
|||
|
|
Math.random() * 10000
|
|||
|
|
)}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
id: item.id,
|
|||
|
|
type: item.type || "object",
|
|||
|
|
};
|
|||
|
|
})
|
|||
|
|
.filter((item) => item !== null);
|
|||
|
|
} else {
|
|||
|
|
newChild.fabricObjects = [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理子图层的fabricObject
|
|||
|
|
if (cItem.fabricObject) {
|
|||
|
|
if (!cItem.fabricObject.id) {
|
|||
|
|
cItem.fabricObject.id = `obj_${Date.now()}_${Math.floor(
|
|||
|
|
Math.random() * 10000
|
|||
|
|
)}`;
|
|||
|
|
}
|
|||
|
|
newChild.fabricObject = {
|
|||
|
|
id: cItem.fabricObject.id,
|
|||
|
|
type: cItem.fabricObject.type || "object",
|
|||
|
|
};
|
|||
|
|
} else {
|
|||
|
|
newChild.fabricObject = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return newChild;
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
newLayer.children = [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return newLayer;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
return JSON.stringify({
|
|||
|
|
canvas: this.canvas.toJSON([
|
|||
|
|
"id",
|
|||
|
|
"layerId",
|
|||
|
|
"layerName",
|
|||
|
|
"isBackground",
|
|||
|
|
"isFixed",
|
|||
|
|
"parentId",
|
|||
|
|
"excludeFromExport",
|
|||
|
|
]),
|
|||
|
|
layers: tempLayers,
|
|||
|
|
version: "1.0", // 添加版本信息
|
|||
|
|
timestamp: new Date().toISOString(), // 添加时间戳
|
|||
|
|
canvasWidth: this.canvasWidth.value,
|
|||
|
|
canvasHeight: this.canvasHeight.value,
|
|||
|
|
canvasColor: this.canvasColor.value,
|
|||
|
|
activeLayerId: this.canvas.activeLayerId.value,
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("获取画布JSON失败:", error);
|
|||
|
|
throw new Error("获取画布JSON失败");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
loadJSON(json) {
|
|||
|
|
console.log("加载画布JSON数据:", json);
|
|||
|
|
|
|||
|
|
// 确保传入的json是字符串格式
|
|||
|
|
if (typeof json === "object") {
|
|||
|
|
json = JSON.stringify(json);
|
|||
|
|
} else if (typeof json !== "string") {
|
|||
|
|
throw new Error("loadJSON方法需要传入字符串或对象格式的JSON数据");
|
|||
|
|
}
|
|||
|
|
// 解析JSON字符串
|
|||
|
|
try {
|
|||
|
|
const parsedJson = JSON.parse(json);
|
|||
|
|
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const tempLayers = parsedJson?.layers || [];
|
|||
|
|
const canvasData = parsedJson?.canvas;
|
|||
|
|
|
|||
|
|
if (!tempLayers) {
|
|||
|
|
reject(new Error("JSON数据中缺少layers字段"));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!canvasData) {
|
|||
|
|
reject(new Error("JSON数据中缺少canvas字段"));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.canvasWidth.value = parsedJson.canvasWidth || this.width;
|
|||
|
|
this.canvasHeight.value = parsedJson.canvasHeight || this.height;
|
|||
|
|
this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor;
|
|||
|
|
|
|||
|
|
console.log("是否检测到红绿图模式内容:", this.enabledRedGreenMode);
|
|||
|
|
|
|||
|
|
// 重置视图变换以确保元素位置正确
|
|||
|
|
this._resetViewportTransform();
|
|||
|
|
|
|||
|
|
// 清除当前画布内容
|
|||
|
|
this.canvas.clear();
|
|||
|
|
|
|||
|
|
// 加载画布数据
|
|||
|
|
this.canvas.loadFromJSON(canvasData, () => {
|
|||
|
|
this.backgroundColor = parsedJson.backgroundColor || "#ffffff";
|
|||
|
|
try {
|
|||
|
|
// 重置画布数据
|
|||
|
|
this.setCanvasSize(this.canvas.width, this.canvas.height);
|
|||
|
|
|
|||
|
|
// 创建对象ID映射表，用于快速查找
|
|||
|
|
const objectIdMap = new Map();
|
|||
|
|
const canvasObjects = this.canvas.getObjects();
|
|||
|
|
|
|||
|
|
canvasObjects.forEach((obj) => {
|
|||
|
|
if (obj.id) {
|
|||
|
|
objectIdMap.set(obj.id, obj);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 辅助函数：根据ID查找对象
|
|||
|
|
const findObjectById = (id) => {
|
|||
|
|
if (!id) return null;
|
|||
|
|
return objectIdMap.get(id) || null;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 恢复图层数据
|
|||
|
|
this.layers.value = tempLayers.map((layer) => {
|
|||
|
|
const restoredLayer = { ...layer };
|
|||
|
|
|
|||
|
|
// 恢复fabricObjects数组
|
|||
|
|
if (Array.isArray(layer.fabricObjects)) {
|
|||
|
|
restoredLayer.fabricObjects = layer.fabricObjects
|
|||
|
|
.map((item) => {
|
|||
|
|
if (!item || !item.id) return null;
|
|||
|
|
return findObjectById(item.id);
|
|||
|
|
})
|
|||
|
|
.filter((obj) => obj !== null);
|
|||
|
|
} else {
|
|||
|
|
restoredLayer.fabricObjects = [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 恢复单个fabricObject
|
|||
|
|
if (layer.fabricObject && layer.fabricObject.id) {
|
|||
|
|
restoredLayer.fabricObject = findObjectById(
|
|||
|
|
layer.fabricObject.id
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
restoredLayer.fabricObject = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 恢复子图层
|
|||
|
|
if (Array.isArray(layer.children)) {
|
|||
|
|
restoredLayer.children = layer.children.map((cItem) => {
|
|||
|
|
const restoredChild = { ...cItem };
|
|||
|
|
|
|||
|
|
// 恢复子图层的fabricObjects
|
|||
|
|
if (Array.isArray(cItem.fabricObjects)) {
|
|||
|
|
restoredChild.fabricObjects = cItem.fabricObjects
|
|||
|
|
.map((item) => {
|
|||
|
|
if (!item || !item.id) return null;
|
|||
|
|
return findObjectById(item.id);
|
|||
|
|
})
|
|||
|
|
.filter((obj) => obj !== null);
|
|||
|
|
} else {
|
|||
|
|
restoredChild.fabricObjects = [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 恢复子图层的fabricObject
|
|||
|
|
if (cItem.fabricObject && cItem.fabricObject.id) {
|
|||
|
|
restoredChild.fabricObject = findObjectById(
|
|||
|
|
cItem.fabricObject.id
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
restoredChild.fabricObject = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return restoredChild;
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
restoredLayer.children = [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return restoredLayer;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.canvas.activeLayerId.value =
|
|||
|
|
parsedJson?.activeLayerId || this.layers.value[0]?.id || null;
|
|||
|
|
|
|||
|
|
// 如果检测到红绿图模式内容，进行缩放调整
|
|||
|
|
if (this.enabledRedGreenMode) {
|
|||
|
|
this._rescaleRedGreenModeContent();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新所有缩略图
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.updateAllThumbnails();
|
|||
|
|
}, 100);
|
|||
|
|
|
|||
|
|
console.log("画布JSON数据加载完成");
|
|||
|
|
resolve();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("恢复图层数据失败:", error);
|
|||
|
|
reject(new Error("恢复图层数据失败: " + error.message));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("解析JSON失败:", error);
|
|||
|
|
throw new Error("解析JSON失败，请检查输入格式: " + error.message);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 缩放红绿图模式内容以适应当前画布大小
|
|||
|
|
* 确保衣服底图和红绿图永远在画布内可见
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_rescaleRedGreenModeContent() {
|
|||
|
|
if (!this.canvas) return;
|
|||
|
|
|
|||
|
|
console.log("正在重新缩放红绿图内容...");
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 获取固定图层和普通图层
|
|||
|
|
const fixedLayerObject = this._getFixedLayerObject();
|
|||
|
|
const normalLayerObjects = this._getNormalLayerObjects();
|
|||
|
|
|
|||
|
|
if (!fixedLayerObject) {
|
|||
|
|
console.warn("找不到固定图层对象，无法进行红绿图内容缩放");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算边距（画布两侧各留出一定空间）
|
|||
|
|
const margin = 50;
|
|||
|
|
const maxWidth = this.canvas.width - margin * 2;
|
|||
|
|
const maxHeight = this.canvas.height - margin * 2;
|
|||
|
|
|
|||
|
|
// 计算原始尺寸
|
|||
|
|
const originalWidth = fixedLayerObject.width * fixedLayerObject.scaleX;
|
|||
|
|
const originalHeight = fixedLayerObject.height * fixedLayerObject.scaleY;
|
|||
|
|
|
|||
|
|
// 计算需要的缩放比例，确保图像完全适应画布
|
|||
|
|
const scaleX = maxWidth / originalWidth;
|
|||
|
|
const scaleY = maxHeight / originalHeight;
|
|||
|
|
const scale = Math.min(scaleX, scaleY);
|
|||
|
|
|
|||
|
|
console.log(
|
|||
|
|
`计算的缩放比例: ${scale}，原始尺寸: ${originalWidth}x${originalHeight}，目标尺寸: ${maxWidth}x${maxHeight}`
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 如果缩放比例接近1，不进行缩放
|
|||
|
|
if (Math.abs(scale - 1) < 0.05) {
|
|||
|
|
console.log("缩放比例接近1，不进行缩放，仅居中内容");
|
|||
|
|
this.centerAllObjects();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 缩放固定图层（衣服底图）
|
|||
|
|
this._rescaleObject(fixedLayerObject, scale);
|
|||
|
|
|
|||
|
|
// 缩放所有普通图层对象（红绿图和其他内容）
|
|||
|
|
normalLayerObjects.forEach((obj) => {
|
|||
|
|
// 红绿图对象应与底图保持完全一致的位置和大小
|
|||
|
|
if (this._isLikelyRedGreenImage(obj, fixedLayerObject)) {
|
|||
|
|
// 完全匹配底图的位置和大小
|
|||
|
|
obj.set({
|
|||
|
|
scaleX: fixedLayerObject.scaleX,
|
|||
|
|
scaleY: fixedLayerObject.scaleY,
|
|||
|
|
left: fixedLayerObject.left,
|
|||
|
|
top: fixedLayerObject.top,
|
|||
|
|
originX: fixedLayerObject.originX || "center",
|
|||
|
|
originY: fixedLayerObject.originY || "center",
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 其他普通对象进行等比例缩放
|
|||
|
|
this._rescaleObject(obj, scale);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 重新居中所有内容
|
|||
|
|
this.centerAllObjects();
|
|||
|
|
|
|||
|
|
// 更新所有对象的坐标系统
|
|||
|
|
this.canvas.getObjects().forEach((obj) => {
|
|||
|
|
obj.setCoords();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 渲染画布
|
|||
|
|
this.canvas.renderAll();
|
|||
|
|
|
|||
|
|
console.log("红绿图内容缩放完成");
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("缩放红绿图内容时出错:", error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 缩放单个对象
|
|||
|
|
* @param {Object} obj fabric对象
|
|||
|
|
* @param {Number} scale 缩放比例
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_rescaleObject(obj, scale) {
|
|||
|
|
if (!obj) return;
|
|||
|
|
|
|||
|
|
// 保存原始中心点
|
|||
|
|
const center = obj.getCenterPoint();
|
|||
|
|
|
|||
|
|
// 应用新的缩放
|
|||
|
|
obj.set({
|
|||
|
|
scaleX: obj.scaleX * scale,
|
|||
|
|
scaleY: obj.scaleY * scale,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 重新定位到原中心点
|
|||
|
|
obj.setPositionByOrigin(center, "center", "center");
|
|||
|
|
obj.setCoords();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取固定图层对象（衣服底图）
|
|||
|
|
* @returns {Object|null} 固定图层对象或null
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_getFixedLayerObject() {
|
|||
|
|
if (!this.layers || !this.layers.value) return null;
|
|||
|
|
|
|||
|
|
// 查找固定图层
|
|||
|
|
const fixedLayer = this.layers.value.find((layer) => layer.isFixed);
|
|||
|
|
if (!fixedLayer) return null;
|
|||
|
|
|
|||
|
|
// 返回图层中的fabric对象
|
|||
|
|
return fixedLayer.fabricObject || null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取所有普通图层对象（包括红绿图）
|
|||
|
|
* @returns {Array} 普通图层对象数组
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_getNormalLayerObjects() {
|
|||
|
|
if (!this.layers || !this.layers.value) return [];
|
|||
|
|
|
|||
|
|
// 查找所有非背景、非固定的普通图层
|
|||
|
|
const normalLayers = this.layers.value.filter(
|
|||
|
|
(layer) => !layer.isBackground && !layer.isFixed
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 收集所有普通图层中的对象
|
|||
|
|
const objects = [];
|
|||
|
|
normalLayers.forEach((layer) => {
|
|||
|
|
// 如果有单个对象属性
|
|||
|
|
if (layer.fabricObject) {
|
|||
|
|
objects.push(layer.fabricObject);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果有对象数组
|
|||
|
|
if (Array.isArray(layer.fabricObjects)) {
|
|||
|
|
layer.fabricObjects.forEach((obj) => {
|
|||
|
|
if (obj) objects.push(obj);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return objects;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 判断对象是否可能是红绿图
|
|||
|
|
* 通过比较与衣服底图的大小、位置来判断
|
|||
|
|
* @param {Object} obj 要检查的对象
|
|||
|
|
* @param {Object} fixedLayerObject 固定图层对象（衣服底图）
|
|||
|
|
* @returns {Boolean} 是否可能是红绿图
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_isLikelyRedGreenImage(obj, fixedLayerObject) {
|
|||
|
|
if (!obj || !fixedLayerObject) return false;
|
|||
|
|
|
|||
|
|
// 检查对象是否为图像
|
|||
|
|
if (obj.type !== "image") return false;
|
|||
|
|
|
|||
|
|
// 比较尺寸（允许5%的误差）
|
|||
|
|
const sizeMatch =
|
|||
|
|
Math.abs(
|
|||
|
|
obj.width * obj.scaleX -
|
|||
|
|
fixedLayerObject.width * fixedLayerObject.scaleX
|
|||
|
|
) <
|
|||
|
|
fixedLayerObject.width * fixedLayerObject.scaleX * 0.05 &&
|
|||
|
|
Math.abs(
|
|||
|
|
obj.height * obj.scaleY -
|
|||
|
|
fixedLayerObject.height * fixedLayerObject.scaleY
|
|||
|
|
) <
|
|||
|
|
fixedLayerObject.height * fixedLayerObject.scaleY * 0.05;
|
|||
|
|
|
|||
|
|
// 比较位置（允许一定的偏差）
|
|||
|
|
const positionMatch =
|
|||
|
|
Math.abs(obj.left - fixedLayerObject.left) < 50 &&
|
|||
|
|
Math.abs(obj.top - fixedLayerObject.top) < 50;
|
|||
|
|
|
|||
|
|
return sizeMatch && positionMatch;
|
|||
|
|
}
|
|||
|
|
}
|