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

111

Browse Source
This commit is contained in:
李志鹏
2026-04-13 11:52:24 +08:00
parent c6b1bdbdf1
commit 4352f7c2f4
4 changed files with 2099 additions and 2085 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/component/Canvas/CanvasEditor/index.vue
View File

@@ -1058,7 +1058,10 @@
} = {}) => {
loading.value = true
canvasManager?.canvas?.discardActiveObject()
if (isFrontBackUpdata) await canvasManager?.changeCanvas()
if (isFrontBackUpdata) {
await canvasManager?.setSpecialCliptInfo(true, true)
canvasManager.canvas.renderAll()
}
var base64 = await canvasManager.exportImage({
isContainBg,
isContainFixed,

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

@@ -47,7 +47,7 @@ import { getObjectAlphaToCanvas } from "../utils/objectHelper";
import { AddLayerCommand, RemoveLayerCommand, ToggleChildLayerVisibilityCommand } from "../commands/LayerCommands";
import { fa, id } from "element-plus/es/locales.mjs";
import i18n from "@/lang/index.ts";
const {t} = i18n.global;
const { t } = i18n.global;
export class CanvasManager {
constructor(canvasElement, options) {
@@ -70,7 +70,7 @@ export class CanvasManager {
this.handleCanvasInit = null; // 画布初始化回调函数
this.partManager = options.partManager || null;
this.props = options.props || {};
this.emit = options.emit || (() => {});
this.emit = options.emit || (() => { });
this.awaitCanvasRun = null;
this.canvasChangeing = false;
// 初始化画布
@@ -176,9 +176,9 @@ export class CanvasManager {
// 添加笔刷图像转换处理回调
this.canvas.onBrushImageConverted = async (fabricImage) => {
const activeTool = this.toolManager?.activeTool?.value;
if(activeTool === OperationType.PART_BRUSH){
if (activeTool === OperationType.PART_BRUSH) {
this.partManager?.addDrawPartImage(fabricImage);
}else{
} else {
await this.addImageToLayer({ fabricImage, targetLayerId: null });
}
// 返回false表示使用默认行为（直接添加到画布）
@@ -203,7 +203,7 @@ export class CanvasManager {
// 可以在这里保存状态到命令管理器
const affectedObjects = e.targets || [];
const activeTool = this.toolManager?.activeTool?.value;
if(activeTool === OperationType.PART_ERASER){
if (activeTool === OperationType.PART_ERASER) {
return this.partManager?.onErasingEnd(affectedObjects);
}
const command = this.eraserStateManager.endErasing(affectedObjects);
@@ -461,7 +461,7 @@ export class CanvasManager {
// this.canvas.renderAll();
}
// 重置画布大小参照固定图层
async resetCanvasSizeByFixedLayer(){
async resetCanvasSizeByFixedLayer() {
// 重置画布大小为固定图层的大小
const fixedLayerObj = this.getFixedLayerObject();
const backgroundObject = this.getBackgroundLayerObject();
@@ -475,10 +475,10 @@ export class CanvasManager {
fixedLayerObj.height,
fixedLayerObj.scaleY,
backgroundObject.width,
backgroundObject.scaleX,
backgroundObject.height,
backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
if(Math.abs(fwidth/bwidth - fheight/bheight) < 0.1) return;
backgroundObject.scaleX,
backgroundObject.height,
backgroundObject.scaleY, 'CanvasManager resetCanvasSizeByFixedLayer')
if (Math.abs(fwidth / bwidth - fheight / bheight) < 0.1) return;
this.canvasWidth.value = fwidth
this.canvasHeight.value = fheight
backgroundObject.set({
@@ -489,7 +489,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
width: this.canvasWidth.value,
height: this.canvasHeight.value,
})
}
}
/**
* 重置视图变换，使元素回到原始位置
* @private
@@ -623,17 +623,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
this.updateMaskPosition(backgroundObject);
}
// 更新颜色层信息
// 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({});
await this.setObjecCliptInfo(groupRect);
groupLayer.clippingMask = groupRect.toObject();
}
this.setSpecialCliptInfo(false, true)
// 重新渲染画布
this.canvas.renderAll();
@@ -868,7 +858,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
return layerObjectByLayerId;
}
getObjectsByIdOrLayerId(ids){
getObjectsByIdOrLayerId(ids) {
const objects = this.canvas.getObjects().filter((obj) => {
return ids.includes(obj.id) || ids.includes(obj.layerId);
});
@@ -1035,16 +1025,16 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
// 处理特殊图层的显示状态
const ptlids = [];
if(!enhancedOptions.isPrintTrimsNoRepeat || !enhancedOptions.isPrintTrimsRepeat){
if (!enhancedOptions.isPrintTrimsNoRepeat || !enhancedOptions.isPrintTrimsRepeat) {
let layers = this.layers?.value?.find((layer) => layer.isPrintTrimsGroup)?.children || [];
for(let layer of layers){
if(!layer.visible) continue;
for (let layer of layers) {
if (!layer.visible) continue;
let repeat = layer.fabricObjects?.[0]?.fill?.repeat || "no-repeat";
if(typeof repeat !== "string") repeat = "no-repeat";
if(repeat === "no-repeat"){
if(enhancedOptions.isPrintTrimsNoRepeat) continue;
}else{
if(enhancedOptions.isPrintTrimsRepeat) continue;
if (typeof repeat !== "string") repeat = "no-repeat";
if (repeat === "no-repeat") {
if (enhancedOptions.isPrintTrimsNoRepeat) continue;
} else {
if (enhancedOptions.isPrintTrimsRepeat) continue;
}
ptlids.push(layer.id);
const command = new ToggleChildLayerVisibilityCommand({
@@ -1059,8 +1049,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
}
const res = await this.exportManager.exportImage(enhancedOptions);
// 恢复特殊图层的显示状态
if(ptlids.length > 0){
for(let id of ptlids){
if (ptlids.length > 0) {
for (let id of ptlids) {
const command = new ToggleChildLayerVisibilityCommand({
canvas: this.canvas,
layers: this.layers,
@@ -1086,7 +1076,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
// 导出颜色图层信息
const color = await this.exportColorLayer().catch(() => (null));
// 导出印花和元素图层信息
const printTrimsData = await this.exportPrintTrimsLayers().catch(() => ({prints: null, trims: null}));
const printTrimsData = await this.exportPrintTrimsLayers().catch(() => ({ prints: null, trims: null }));
const obj = {
color,
@@ -1106,7 +1096,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
return Promise.reject("颜色图层不存在");
}
const object = this.getLayerObjectById(SpecialLayerId.COLOR);
if(!object){
if (!object) {
console.warn("颜色图层不存在，请确保已添加颜色图层");
return Promise.reject("颜色图层不存在");
}
@@ -1137,7 +1127,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
});
canvas.clear();
const color = object.originColor;
return {css, base64, color};
return { css, base64, color };
}
/**
@@ -1145,11 +1135,11 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
*/
async exportPrintTrimsLayers() {
const glayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
if(!glayer) return Promise.reject("印花和元素图层组不存在");
if (!glayer) return Promise.reject("印花和元素图层组不存在");
const ids = glayer.children.map((v) => v.id);
const objects = this.getObjectsByIdOrLayerId(ids);
const fixedLayerObj = this.getFixedLayerObject();
if(!fixedLayerObj) return Promise.reject("固定图层不存在");
if (!fixedLayerObj) return Promise.reject("固定图层不存在");
const flWidth = fixedLayerObj.width
const flHeight = fixedLayerObj.height
const flTop = fixedLayerObj.top
@@ -1161,7 +1151,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
objects.forEach((v, i) => {
const label = glayer.children.find((v_) => (v_.id === v.layerId || v_.id === v.id));
const sourceData = label?.metadata?.sourceData;
if(!sourceData) return;
if (!sourceData) return;
const obj = {
ifSingle: typeof v.fill === "string",
level2Type: sourceData.level2Type,
@@ -1173,7 +1163,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
angle: v.angle,
name: sourceData.name,
priority: i + 1,
object:{
object: {
top: 0,
left: 0,
scaleX: 0,//对象的缩放比例
@@ -1192,8 +1182,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
let top = (v.top - (flTop - flHeight * flScaleY / 2));
let width = (v.width * v.scaleX);
let height = (v.height * v.scaleY);
if(v.originX === "center" && v.originY === "center") {
let {x:cx, y:cy} = calculateTopLeftPoint(width, height, left, top, v.angle);
if (v.originX === "center" && v.originY === "center") {
let { x: cx, y: cy } = calculateTopLeftPoint(width, height, left, top, v.angle);
left = cx;
top = cy;
}
@@ -1205,18 +1195,18 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
obj.object.left = oX;
obj.object.scaleX = oScaleX;
obj.object.scaleY = oScaleY;
if(obj.ifSingle){
if (obj.ifSingle) {
// 单个的是从中心计算的
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 { x: cx, y: cy } = calculateCenterPoint(width, height, left, top, v.angle);
let oX = (cx - width / 2) / flScaleX;
let oY = (cy - height / 2) / flScaleY;
obj.location = [oX, oY];
obj.scale = [oScaleX, oScaleY];
}else{
} else {
let fill = v.fill;
let fill_ = v.fill_;
if(!fill || !fill_) return console.warn("印花元素不存在fill或fill_属性");
let {scale, angle} = getTransformScaleAngle(fill.patternTransform);
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;
let scaleXY = flWidth > flHeight ? scaleX : scaleY;
@@ -1231,16 +1221,16 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
obj.object.gapY = fill_.gapY;
obj.object.fill_repeat = fill.repeat;
}
if(sourceData.type === "print"){
if (sourceData.type === "print") {
prints.push(obj);
}else if(sourceData.type === "trims"){
} else if (sourceData.type === "trims") {
trims.push(obj);
}
})
// prints.sort((a, b) => a.ifSingle ? 1 : -1);
// prints.forEach((v, i) => v.priority = i + 1);
// trims.forEach((v, i) => v.priority = i + 1);
return {prints, trims};
return { prints, trims };
}
@@ -1283,7 +1273,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
// 排除颜色图层和特殊组图层
const excludedLayers = [SpecialLayerId.COLOR, SpecialLayerId.SPECIAL_GROUP];
this.layers.value.forEach((layer) => {
if(excludedLayers.includes(layer.id)){
if (excludedLayers.includes(layer.id)) {
excludedLayers.push(...layer.children?.map((child) => child.id));
}
})
@@ -1465,16 +1455,16 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
}
}
/** 修复JSON数据中的ID丢失问题 */
FixJsonIdLoss(json){
FixJsonIdLoss(json) {
const layerIds = [];
const layers = json?.layers || [];
const objects = json?.canvas?.objects || [];
layers.forEach((layer) => {
layerIds.push(layer.id);
layer.children?.forEach((child) => layerIds.push(child.id));
if(!layer.fabricObjects?.[0]?.id && !layer.fabricObject?.id){
if (!layer.fabricObjects?.[0]?.id && !layer.fabricObject?.id) {
const obj = objects?.find((o) => o.layerId === layer.id);
if(obj) {
if (obj) {
layer.fabricObjects = [{
id: obj.id,
type: obj.type,
@@ -1491,11 +1481,11 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
const excludedObjects = [SpecialLayerId.PART_SELECTOR];
json.canvas.objects = objects.filter((v) => {
// 指定ID排除
if(excludedObjects.includes(v.id)) return false;
if (excludedObjects.includes(v.id)) return false;
if(v.isBackground || v.isFixed) return true;
if (v.isBackground || v.isFixed) return true;
// 当前图层不存在当前对象
if(!layerIds.includes(v.layerId)) return false;
if (!layerIds.includes(v.layerId)) return false;
return true
});
}
@@ -1507,22 +1497,22 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
*/
async createOtherLayers(otherData) {
if (!otherData) return console.warn("otherData 为空不需要添加");
let resolve = ()=>{};
this.awaitCanvasRun = ()=>(new Promise((v) => resolve = v))
let resolve = () => { };
this.awaitCanvasRun = () => (new Promise((v) => resolve = v))
const otherData_ = JSON.parse(JSON.stringify(otherData));
console.log("==========创建其他图层", otherData_);
// 删除颜色图层和特殊组图层
const ids = [SpecialLayerId.COLOR, SpecialLayerId.SPECIAL_GROUP];
this.layers.value = this.layers.value.filter((layer) => {
if(ids.includes(layer.id)){
if (ids.includes(layer.id)) {
ids.push(...layer.children?.map((child) => child.id));
return false;
}
return true;
})
this.canvas.getObjects().forEach((v) => {
if(ids.includes(v.id) || ids.includes(v.layerId)){
if (ids.includes(v.id) || ids.includes(v.layerId)) {
this.canvas.remove(v)
}
})
@@ -1536,18 +1526,18 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
otherData_.printObject?.prints?.forEach((print, index) => {// 印花
print.name = t("Canvas.Print") + (index + 1);
print.type = "print";
if(print.ifSingle){
printTrimsLayers.unshift({...print});
}else{
singleLayers.unshift({...print});
if (print.ifSingle) {
printTrimsLayers.unshift({ ...print });
} else {
singleLayers.unshift({ ...print });
}
})
otherData_.trims?.prints?.forEach((trims, index) => {// 元素
trims.name = t("Canvas.Elements") + (index + 1);
trims.type = "trims";
printTrimsLayers.unshift({...trims});
printTrimsLayers.unshift({ ...trims });
})
if(printTrimsLayers.length || singleLayers.length){
if (printTrimsLayers.length || singleLayers.length) {
await this.createPrintTrimsLayers(printTrimsLayers, singleLayers);
}
await this.changeCanvas();
@@ -1556,10 +1546,30 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
this.awaitCanvasRun = null;
}
//设置印花元素颜色的裁剪信息
async setSpecialCliptInfo(isColor = true, isGroup = true) {
// 更新颜色层信息
if (isColor) {
const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
if (colorObject) {
await this.setObjecCliptInfo(colorObject);
}
}
// 更新特殊组图层信息
if (isGroup) {
const groupLayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
if (groupLayer) {
const groupRect = new fabric.Rect({});
await this.setObjecCliptInfo(groupRect);
groupLayer.clippingMask = groupRect.toObject();
}
}
}
// 设置画布对象的裁剪信息
async setObjecCliptInfo(tagObject, data){
async setObjecCliptInfo(tagObject, data) {
const fixedLayerObj = this.getFixedLayerObject();
if(!fixedLayerObj) return console.warn("固定图层为空");
if (!fixedLayerObj) return console.warn("固定图层为空");
tagObject.set({
top: fixedLayerObj.top,
left: fixedLayerObj.left,
@@ -1572,7 +1582,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
});
var object = fixedLayerObj;
const imageUrl = this.props.clothingImageUrl2;
if(imageUrl){
if (imageUrl) {
object = await new Promise((resolve, reject) => {
fabric.Image.fromURL(imageUrl, (imgObject) => {
tagObject.set({
@@ -1592,8 +1602,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
});
tagObject.set('clipPath', transparentMask);
}
async createColorLayer(color_){
const color = color_ || {r:0,g:0,b:0,a:0};
async createColorLayer(color_) {
const color = color_ || { r: 0, g: 0, b: 0, a: 0 };
// if(findLayer(this.layers.value, SpecialLayerId.COLOR)) {
// return console.warn("画布中已存在颜色图层");
// }
@@ -1637,7 +1647,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
}
// 创建印花和元素图层
async createPrintTrimsLayers(printTrimsLayers, singleLayers){
async createPrintTrimsLayers(printTrimsLayers, singleLayers) {
// if(findLayer(this.layers.value, SpecialLayerId.SPECIAL_GROUP)) {
// return console.warn("画布中已存在印花和元素组图层");
// }
@@ -1651,12 +1661,12 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
const flScaleY = fixedLayerObj.scaleY
const children = [];
// 添加印花和元素图层
for(let index = 0; index < printTrimsLayers.length; index++){
for (let index = 0; index < printTrimsLayers.length; index++) {
let item = printTrimsLayers[index];
let id = generateId("layer_image_");
let name = item.name;
let image = await new Promise(resolve => {
fabric.Image.fromURL(item.path, (fabricImage)=>{
fabric.Image.fromURL(item.path, (fabricImage) => {
resolve(fabricImage);
}, { crossOrigin: "anonymous" });
})
@@ -1664,7 +1674,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
let top = flTop - flHeight * flScaleY / 2 + (item.location?.[1] || 0) * flScaleY
let scaleX = flWidth * (item.scale?.[0] || 1) / image.width * flScaleX
let scaleY = flHeight * (item.scale?.[1] || 1) / image.height * flScaleY
let {x, y} = calculateRotatedTopLeftDeg(
let { x, y } = calculateRotatedTopLeftDeg(
image.width * scaleX,
image.height * scaleY,
left,
@@ -1679,11 +1689,11 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
let flipY = false;
let blendMode = BlendMode.NORMAL;
// if(item.type === "trims") blendMode = BlendMode.NORMAL;// 元素正常
if(item.object){
if (item.object) {
opacity = item.object.opacity
flipX = item.object.flipX
flipY = item.object.flipY
if(item.object.blendMode) blendMode = item.object.blendMode;
if (item.object.blendMode) blendMode = item.object.blendMode;
}
image.set({
left: x,
@@ -1714,18 +1724,18 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
isPrintTrims: true,
blendMode: blendMode,
fabricObjects: [image.toObject(["id", "layerId", "layerName"])],
metadata: {sourceData: item},
metadata: { sourceData: item },
object: image,
})
children.push(layer);
};
// 添加平铺图层
for(let index = 0; index < singleLayers.length; index++){
for (let index = 0; index < singleLayers.length; index++) {
let item = singleLayers[index];
let id = generateId("layer_image_");
let name = item.name;
let image = await new Promise(resolve => {
fabric.Image.fromURL(item.path, (fabricImage)=>{
fabric.Image.fromURL(item.path, (fabricImage) => {
const imgElement = fabricImage.getElement();
const tcanvas = document.createElement('canvas');
tcanvas.width = imgElement.width;
@@ -1754,7 +1764,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
let flipY = false;
let blendMode = BlendMode.NORMAL;
let fill_repeat = "repeat"
if(item.object){
if (item.object) {
top += item.object.top * flScaleY
left += item.object.left * flScaleX
scaleX *= item.object.scaleX
@@ -1763,11 +1773,11 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
angle = item.object.angle
flipX = item.object.flipX
flipY = item.object.flipY
if(item.object.blendMode) blendMode = item.object.blendMode;
if (item.object.blendMode) blendMode = item.object.blendMode;
gapX = item.object.gapX
gapY = item.object.gapY
fillSource = imageAddGapToCanvas(image, gapX, gapY);
if(item.object.fill_repeat) fill_repeat = item.object.fill_repeat;
if (item.object.fill_repeat) fill_repeat = item.object.fill_repeat;
}
let rect = new fabric.Rect({
id: id,
@@ -1791,7 +1801,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
offsetX: offsetX, // 水平偏移
offsetY: offsetY, // 垂直偏移
}),
fill_ : {
fill_: {
source: item.path,
gapX: gapX,
gapY: gapY,
@@ -1811,7 +1821,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
isPrintTrims: true,
blendMode: blendMode,
fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
metadata: {sourceData: item},
metadata: { sourceData: item },
object: rect,
})
children.push(layer);
@@ -1828,9 +1838,9 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
// })
// children.push(layer);
// }
if(children.length === 0) return;
if (children.length === 0) return;
// 印花元素排序
if(new Set(children.map(v => v.metadata.sourceData.priority)).size === children.length){
if (new Set(children.map(v => v.metadata.sourceData.priority)).size === children.length) {
children.sort((a, b) => b.metadata.sourceData.priority - a.metadata.sourceData.priority);
}
children.forEach(layer => {
@@ -1858,21 +1868,21 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
/**
* 画布事件变更后
*/
async changeCanvas(fids = [], isBeforeChange = false){
if(!isBeforeChange) this.canvasChangeing = false;
async changeCanvas(fids = [], isBeforeChange = false) {
if (!isBeforeChange) this.canvasChangeing = false;
const fixedLayerObj = this.getFixedLayerObject();
if(!fixedLayerObj) return console.warn("固定图层对象不存在", fixedLayerObj)
if (!fixedLayerObj) return console.warn("固定图层对象不存在", fixedLayerObj)
const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
if(colorObject){
if (colorObject) {
const ids = this.layerManager.getBlendModeLayerIds(SpecialLayerId.SPECIAL_GROUP).filter(id => !fids.includes(id));
if(ids.length === 0){
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 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;
@@ -1885,15 +1895,15 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
}
}
/** 画布变更之前 */
async beforeChangeCanvas(objects){
if(this.canvasChangeing) return;
async beforeChangeCanvas(objects) {
if (this.canvasChangeing) return;
const ids = objects.filter(v => {
return v.isPrintTrims && v.globalCompositeOperation && v.globalCompositeOperation !== BlendMode.NORMAL
}).map(v => v.layerId);
if(ids.length > 0){
if (ids.length > 0) {
this.canvasChangeing = true;
this.canvas.getObjects().forEach(v => {
if(ids.includes(v.layerId)){
if (ids.includes(v.layerId)) {
v.globalCompositeOperation_ = v.globalCompositeOperation;
v.globalCompositeOperation = BlendMode.NORMAL;
}
@@ -2103,13 +2113,13 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
moveActiveObject(direction, step = 1) {
const objects = [];
const activeObject = this.canvas.getActiveObject();
if(!activeObject) return;
if (!activeObject) return;
const initPos = {
id: activeObject.id,
left: activeObject.left,
top: activeObject.top,
};
switch(direction) {
switch (direction) {
case "up":
activeObject.top -= step;
break;
@@ -2123,7 +2133,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
activeObject.left += step;
break;
}
if(!activeObject.id) return this.canvas.renderAll();
if (!activeObject.id) return this.canvas.renderAll();
const cmd = new ObjectMoveCommand({
canvas: this.canvas,
initPos,

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

@@ -608,7 +608,7 @@ export class ExportManager {
// tempFabricCanvas.setZoom(1);
const ox = fixedLayerObject.left - fixedLayerObject.width * fixedLayerObject.scaleX / 2
const oy = fixedLayerObject.top - fixedLayerObject.height * fixedLayerObject.scaleY / 2
console.log("==========", fixedLayerObject, ox, oy)
// console.log("==========", fixedLayerObject, ox, oy)
try {
// 克隆并添加所有对象到临时画布，需要调整位置相对于固定图层
for (let i = 0; i < objectsToExport.length; i++) {

1
src/component/Detail/canvas/index.vue
View File

@@ -247,6 +247,7 @@ export default defineComponent({
let front = detailData.frontBack.front[detailData.imgDomIndex]
let back = detailData.frontBack.back[detailData.imgDomIndex]
store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
await nextTick()
if(!detailData.selectDetail.partialDesign.partialDesignPath && !detailData.selectDetail.partialDesign.partialDesignBase64){
await privewDetail()
}else{