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

7
src/component/Canvas/CanvasEditor/commands/StateCommands.js
View File

@@ -25,7 +25,7 @@ export class TransformCommand extends Command {
this.layerManager = options.layerManager; this.layerManager = options.layerManager;
this.layers = options.layers || null; this.layers = options.layers || null;
this.lastSelectLayerId = options.lastSelectLayerId || null; // 最后选择的图层ID this.lastSelectLayerId = options.lastSelectLayerId || null; // 最后选择的图层ID
this.isCommand = options.isCommand == undefined ? true : options.isCommand
const targetObject = const targetObject =
findObjectById(this.canvas, this.objectId)?.object || null; findObjectById(this.canvas, this.objectId)?.object || null;
@@ -189,6 +189,11 @@ export class TransformCommand extends Command {
object.set(key, value); object.set(key, value);
}); });
if(this.isCommand && object.globalCompositeOperation_){
object.globalCompositeOperation = object.globalCompositeOperation_;
object.globalCompositeOperation_ = null;
}
// 确保对象更新 // 确保对象更新
object.setCoords(); object.setCoords();
} }

8
src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue
View File

@@ -132,8 +132,8 @@
const offsetY = object.fill?.offsetY; const offsetY = object.fill?.offsetY;
const twidth = object.fill_?.width; const twidth = object.fill_?.width;
const theight = object.fill_?.height; const theight = object.fill_?.height;
const x = ((offsetX - (twidth * scale) / 2) * 100) / object.width; const x = ((offsetX + (twidth * scale) / 2) * 100) / object.width;
const y = ((offsetY - (theight * scale) / 2) * 100) / object.height; const y = ((offsetY + (theight * scale) / 2) * 100) / object.height;
return { x, y }; return { x, y };
}); });
const inputFillOffset = (e) => setFillOffset(e, true); const inputFillOffset = (e) => setFillOffset(e, true);
@@ -143,8 +143,8 @@
const object = props.object; const object = props.object;
const patternTransform = object.fill?.patternTransform; const patternTransform = object.fill?.patternTransform;
const scale = getTransformScaleAngle(patternTransform).scale; const scale = getTransformScaleAngle(patternTransform).scale;
const x = (left / 100) * object.width + (object.fill_?.width * scale) / 2; const x = (left / 100) * object.width - (object.fill_?.width * scale) / 2;
const y = (top / 100) * object.height + (object.fill_?.height * scale) / 2; const y = (top / 100) * object.height - (object.fill_?.height * scale) / 2;
emit(isInput ? "inputFillOffset" : "changeFillOffset", { x, y }); emit(isInput ? "inputFillOffset" : "changeFillOffset", { x, y });
}; };
</script> </script>

8
src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
View File

@@ -315,6 +315,7 @@
layerManager: props.layerManager, layerManager: props.layerManager,
layers: layers, layers: layers,
lastSelectLayerId: lastSelectLayerId, lastSelectLayerId: lastSelectLayerId,
isCommand,
}); });
if (isCommand) { if (isCommand) {
props.commandManager.execute(cmd); props.commandManager.execute(cmd);
@@ -336,6 +337,7 @@
const finalState = computeAngleState(angle, obj, initialState); const finalState = computeAngleState(angle, obj, initialState);
transformObject(obj, initialState, finalState, false); transformObject(obj, initialState, finalState, false);
if (!obj.hasOwnProperty("oldState")) obj.oldState = initialState; if (!obj.hasOwnProperty("oldState")) obj.oldState = initialState;
props.canvasManager.beforeChangeCanvas([obj]);
}; };
const changeAngle = (angle, obj) => { const changeAngle = (angle, obj) => {
var initialState; var initialState;
@@ -428,6 +430,7 @@
}); });
obj.set("fill", pattern); obj.set("fill", pattern);
props.canvas.renderAll(); props.canvas.renderAll();
props.canvasManager.beforeChangeCanvas([obj]);
}; };
const changeFillAngle = (angle, obj) => { const changeFillAngle = (angle, obj) => {
const fill = obj.get("fill"); const fill = obj.get("fill");
@@ -447,6 +450,7 @@
}); });
obj.set("fill", pattern); obj.set("fill", pattern);
props.canvas.renderAll(); props.canvas.renderAll();
props.canvasManager.beforeChangeCanvas([obj]);
}; };
const changeFillOffset = (value, obj) => { const changeFillOffset = (value, obj) => {
const pattern = new fabric.Pattern({ const pattern = new fabric.Pattern({
@@ -466,6 +470,7 @@
}); });
obj.set("fill", pattern); obj.set("fill", pattern);
props.canvas.renderAll(); props.canvas.renderAll();
props.canvasManager.beforeChangeCanvas([obj]);
}; };
const changeFillScale = (scale, obj) => { const changeFillScale = (scale, obj) => {
const fill = obj.get("fill"); const fill = obj.get("fill");
@@ -498,7 +503,8 @@
newGapY: gapY, newGapY: gapY,
record: true, record: true,
}); });
cmd.execute(); cmd.execute(false);
props.canvasManager.beforeChangeCanvas([obj]);
}; };
const changeFillGap = (gapX, gapY, obj) => { const changeFillGap = (gapX, gapY, obj) => {
if (obj.oldFill_) { if (obj.oldFill_) {

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

@@ -896,7 +896,7 @@ const changeCanvas = async (command) => {
...command, // 传递完整的命令数据 ...command, // 传递完整的命令数据
}; };
emit("changeCanvas", commandData); emit("changeCanvas", commandData);
canvasManager.changeCanvas(commandData); canvasManager.changeCanvas();
if ((command.canUndo || command.canRedo) && props.enabledRedGreenMode) { if ((command.canUndo || command.canRedo) && props.enabledRedGreenMode) {
setTimeout(async () => { setTimeout(async () => {
try { try {

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

@@ -74,6 +74,7 @@ export class CanvasManager {
this.props = options.props || {}; this.props = options.props || {};
this.emit = options.emit || (() => {}); this.emit = options.emit || (() => {});
this.awaitCanvasRun = null; this.awaitCanvasRun = null;
this.canvasChangeing = false;
// 初始化画布 // 初始化画布
this.initializeCanvas(); this.initializeCanvas();
} }
@@ -338,6 +339,7 @@ export class CanvasManager {
setupCanvasEvents(activeElementId, layerManager) { setupCanvasEvents(activeElementId, layerManager) {
// 创建画布事件管理器 // 创建画布事件管理器
this.eventManager = new CanvasEventManager(this.canvas, { this.eventManager = new CanvasEventManager(this.canvas, {
canvasManager: this,
toolManager: this.toolManager, toolManager: this.toolManager,
animationManager: this.animationManager, animationManager: this.animationManager,
thumbnailManager: this.thumbnailManager, thumbnailManager: this.thumbnailManager,
@@ -1220,8 +1222,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
let scaleY = scale * 5 * v.fill_.height / flHeight; let scaleY = scale * 5 * v.fill_.height / flHeight;
let scaleXY = flWidth > flHeight ? scaleX : scaleY; let scaleXY = flWidth > flHeight ? scaleX : scaleY;
let left = fill.offsetX - v.fill_.width * scale / 2; let left = fill.offsetX + v.fill_.width * scale / 2;
let top = fill.offsetY - v.fill_.height * scale / 2; let top = fill.offsetY + v.fill_.height * scale / 2;
obj.scale = [scaleXY, scaleXY]; obj.scale = [scaleXY, scaleXY];
obj.angle = angle; obj.angle = angle;
@@ -1670,7 +1672,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
let flipX = false; let flipX = false;
let flipY = false; let flipY = false;
let blendMode = BlendMode.MULTIPLY; let blendMode = BlendMode.MULTIPLY;
if(item.type === "trims") blendMode = BlendMode.NORMAL;// 元素正常 // if(item.type === "trims") blendMode = BlendMode.NORMAL;// 元素正常
if(item.object){ if(item.object){
opacity = item.object.opacity opacity = item.object.opacity
flipX = item.object.flipX flipX = item.object.flipX
@@ -1730,8 +1732,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
let scaleX_ = flWidth / image.width * (item.scale?.[0] || 1) / 5; let scaleX_ = flWidth / image.width * (item.scale?.[0] || 1) / 5;
let scaleY_ = flHeight / image.height * (item.scale?.[1] || 1) / 5; let scaleY_ = flHeight / image.height * (item.scale?.[1] || 1) / 5;
let scale = flWidth > flHeight ? scaleX_ : scaleY_; let scale = flWidth > flHeight ? scaleX_ : scaleY_;
let offsetX = (item.location?.[0] || 0) + image.width * scale / 2 let offsetX = (item.location?.[0] || 0) - image.width * scale / 2
let offsetY = (item.location?.[1] || 0) + image.height * scale / 2 let offsetY = (item.location?.[1] || 0) - image.height * scale / 2
let top = flTop - flHeight * flScaleY / 2 let top = flTop - flHeight * flScaleY / 2
let left = flLeft - flWidth * flScaleX / 2 let left = flLeft - flWidth * flScaleX / 2
let scaleX = flScaleX let scaleX = flScaleX
@@ -1743,7 +1745,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
let fillSource = image let fillSource = image
let flipX = false; let flipX = false;
let flipY = false; let flipY = false;
let blendMode = BlendMode.MULTIPLY; let blendMode = BlendMode.NORMAL;
let fill_repeat = "repeat" let fill_repeat = "repeat"
if(item.object){ if(item.object){
top += item.object.top * flScaleY top += item.object.top * flScaleY
@@ -1754,7 +1756,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
angle = item.object.angle angle = item.object.angle
flipX = item.object.flipX flipX = item.object.flipX
flipY = item.object.flipY flipY = item.object.flipY
blendMode = item.object.blendMode || BlendMode.MULTIPLY; if(item.object.blendMode) blendMode = item.object.blendMode;
gapX = item.object.gapX gapX = item.object.gapX
gapY = item.object.gapY gapY = item.object.gapY
fillSource = imageAddGapToCanvas(image, gapX, gapY); fillSource = imageAddGapToCanvas(image, gapX, gapY);
@@ -1797,10 +1799,10 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
name: name, name: name,
type: LayerType.BITMAP, type: LayerType.BITMAP,
visible: true, visible: true,
locked: true, locked: false,
opacity: opacity, opacity: opacity,
isPrintTrims: true, isPrintTrims: true,
blendMode: BlendMode.MULTIPLY, blendMode: blendMode,
fabricObjects: [rect.toObject(["id", "layerId", "layerName"])], fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
metadata: {sourceData: item}, metadata: {sourceData: item},
}) })
@@ -1841,12 +1843,13 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
/** /**
* 画布事件变更后 * 画布事件变更后
*/ */
async changeCanvas(){ async changeCanvas(fids = [], isBeforeChange = false){
if(!isBeforeChange) this.canvasChangeing = false;
const fixedLayerObj = this.getFixedLayerObject(); const fixedLayerObj = this.getFixedLayerObject();
if(!fixedLayerObj) return console.warn("固定图层对象不存在", fixedLayerObj) if(!fixedLayerObj) return console.warn("固定图层对象不存在", fixedLayerObj)
const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR); const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
if(colorObject){ if(colorObject){
const ids = this.layerManager.getBlendModeLayerIds(SpecialLayerId.SPECIAL_GROUP); 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); ids.unshift(SpecialLayerId.SPECIAL_GROUP);
await this.setObjecCliptInfo(colorObject); await this.setObjecCliptInfo(colorObject);
@@ -1866,6 +1869,24 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
this.canvas.renderAll(); this.canvas.renderAll();
} }
} }
/** 画布变更之前 */
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){
this.canvasChangeing = true;
this.canvas.getObjects().forEach(v => {
if(ids.includes(v.layerId)){
v.globalCompositeOperation_ = v.globalCompositeOperation;
v.globalCompositeOperation = BlendMode.NORMAL;
}
})
this.canvas.renderAll();
await this.changeCanvas(ids, true);
}
}
/** /**
* 缩放红绿图模式内容以适应当前画布大小 * 缩放红绿图模式内容以适应当前画布大小

12
src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js
View File

@@ -6,6 +6,7 @@ import { OperationType, OperationTypes } from "../../utils/layerHelper";
export class CanvasEventManager { export class CanvasEventManager {
constructor(canvas, options = {}) { constructor(canvas, options = {}) {
this.canvas = canvas; this.canvas = canvas;
this.canvasManager = options.canvasManager;
this.toolManager = options.toolManager || null; this.toolManager = options.toolManager || null;
this.animationManager = options.animationManager; this.animationManager = options.animationManager;
this.thumbnailManager = options.thumbnailManager; this.thumbnailManager = options.thumbnailManager;
@@ -691,7 +692,9 @@ export class CanvasEventManager {
// 清除临时状态记录 // 清除临时状态记录
delete activeObj._initialTransformState; delete activeObj._initialTransformState;
} }
} }else{
this.canvasManager.changeCanvas();
}
if (this.thumbnailManager && e.target) { if (this.thumbnailManager && e.target) {
if (e.target.id) { if (e.target.id) {
@@ -975,6 +978,13 @@ export class CanvasEventManager {
// 添加调试日志(可选) // 添加调试日志(可选)
// console.log(`捕获对象 ${obj.id} (${obj.type}) 的初始变换状态`); // console.log(`捕获对象 ${obj.id} (${obj.type}) 的初始变换状态`);
} }
const arrs = [];
if (e.target._objects) {
e.target._objects.forEach((v) => arrs.push(v));
} else {
arrs.push(e.target);
}
this.canvasManager.beforeChangeCanvas(arrs);
} }
/** /**

4
src/component/Canvas/OverallCanvas/index.vue
View File

@@ -203,9 +203,9 @@
let scaleY = ((cheight / image.height) * item.scale[1]) / 5; let scaleY = ((cheight / image.height) * item.scale[1]) / 5;
let scale = cwidth > cheight ? scaleX : scaleY; let scale = cwidth > cheight ? scaleX : scaleY;
let offsetX = let offsetX =
(item.location[0] * cwidth) / props.width + (image.width * scale) / 2; (item.location[0] * cwidth) / props.width - (image.width * scale) / 2;
let offsetY = let offsetY =
(item.location[1] * cheight) / props.height + (item.location[1] * cheight) / props.height -
(image.height * scale) / 2; (image.height * scale) / 2;
let angle = item.angle; let angle = item.angle;
let gapX = item.object.gapX; let gapX = item.object.gapX;

11
src/component/Canvas/canvasExample.vue
View File

@@ -342,16 +342,16 @@
level2Type: "Pattern", level2Type: "Pattern",
designType: "Library", designType: "Library",
path: "/src/assets/images/canvas/yinhua1.jpg", path: "/src/assets/images/canvas/yinhua1.jpg",
location: [250, 780], location: [800, 600],
scale: [1.2, 1.6], scale: [1, 1],
angle: 0, angle: 0,
object: { object: {
top: 600, top: 300,
left: 800, left: 400,
scaleX: 0.5, scaleX: 0.5,
scaleY: 0.5, scaleY: 0.5,
opacity: 1, opacity: 1,
angle: 45, angle: 0,
flipX: false, flipX: false,
flipY: false, flipY: false,
blendMode: "multiply", blendMode: "multiply",
@@ -411,6 +411,7 @@
:clothingMinIOPath="clothingMinIOPath" :clothingMinIOPath="clothingMinIOPath"
:clothingImageUrl="clothingImageUrl" :clothingImageUrl="clothingImageUrl"
:clothingImageUrl2="clothingImageUrlInit" :clothingImageUrl2="clothingImageUrlInit"
@canvasLoadJsonSuccess="canvasLoadJsonSuccess"
:config="editorConfig" :config="editorConfig"
:clothing-image-opts="{ :clothing-image-opts="{
imageMode: 'contains', // 设置底图包含在画布内 imageMode: 'contains', // 设置底图包含在画布内

93
src/component/Detail/model/modelPosition.vue
View File

@@ -189,6 +189,10 @@ export default defineComponent({
left: 0, left: 0,
top: 0, top: 0,
} }
let startSize = {//记录初始缩放比例
width: 0,
height: 0,
}
moveableInstance.value.on('scaleStart', ({ target, direction }) => { moveableInstance.value.on('scaleStart', ({ target, direction }) => {
const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex]; const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
if (!frontStyle.mirror){ if (!frontStyle.mirror){
@@ -196,6 +200,10 @@ export default defineComponent({
let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/); let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false }; frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false };
} }
startSize.width = Number(parseInt(target.style.width))
startSize.height = Number(parseInt(target.style.height))
startPosition.left = Number(parseInt(target.style.left))
startPosition.top = Number(parseInt(target.style.top))
}); });
moveableInstance.value.on('rotateStart', ({ target, direction }) => { moveableInstance.value.on('rotateStart', ({ target, direction }) => {
const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex]; const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
@@ -241,7 +249,9 @@ export default defineComponent({
element.style.transform = transforms.join(' ').trim(); element.style.transform = transforms.join(' ').trim();
}; };
moveableInstance.value.on('scale', ({ target, delta, direction }) => { moveableInstance.value.on('scale', (e) => {
var { target, delta, direction, dist} = e
// console.log('scaleStart', e);
const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex]; const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
// 确保 mirror 对象存在并正确初始化 // 确保 mirror 对象存在并正确初始化
@@ -252,10 +262,14 @@ export default defineComponent({
// 清除可能存在的重复镜像变换 // 清除可能存在的重复镜像变换
updateElementTransform(frontStyle); updateElementTransform(frontStyle);
let width = parseFloat(frontStyle.style.width); // let width = parseFloat(frontStyle.style.width);
let height = parseFloat(frontStyle.style.height); // let height = parseFloat(frontStyle.style.height);
let left = parseFloat(frontStyle.style.left) || 0; // let left = parseFloat(frontStyle.style.left) || 0;
let top = parseFloat(frontStyle.style.top) || 0; // let top = parseFloat(frontStyle.style.top) || 0;
let width = startSize.width
let height = startSize.height
let left = startPosition.left;
let top = startPosition.top;
let rotation = 0; let rotation = 0;
const originalRatio = width / height; const originalRatio = width / height;
@@ -278,35 +292,34 @@ export default defineComponent({
}; };
// 根据旋转角度调整方向 // 根据旋转角度调整方向
if (rotation !== 0) { // if (rotation !== 0) {
direction = getAdjustedCorner({ x: direction[0], y: direction[1] }, rotation); // direction = getAdjustedCorner({ x: direction[0], y: direction[1] }, rotation);
direction = [direction.x, direction.y]; // direction = [direction.x, direction.y];
} // }
const isDiagonal = Math.abs(direction[0]) === 1 && Math.abs(direction[1]) === 1; const isDiagonal = Math.abs(direction[0]) === 1 && Math.abs(direction[1]) === 1;
const processAxis = (axis, val, deltaVal, dir, pos, keepRatio = false, otherAxisResult = null) => { const processAxis = (axis, val, distVal, dir, pos, keepRatio = false, otherAxisResult = null) => {
const mirrorKey = axis === 'width' ? 'x' : 'y'; const mirrorKey = axis === 'width' ? 'x' : 'y';
const isWidth = axis === 'width'; const isWidth = axis === 'width';
let newVal = val * deltaVal; let newVal = val * distVal;
// 翻转处理 - 只在值真正变为负值时触发镜像 // 翻转处理 - 只在值真正变为负值时触发镜像
if (newVal < 0) { // if (newVal < 0) {
frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey]; // frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey];
newVal = Math.abs(newVal); // newVal = Math.abs(newVal);
} else if (newVal === 0) { // } else if (newVal === 0) {
// 防止值变为0 // // 防止值变为0
newVal = 1; // newVal = 1;
} // }
if(newVal < 10) newVal = 10;
// 位置调整 // 位置调整
const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || (frontStyle.mirror[mirrorKey] && dir === 1); const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || (frontStyle.mirror[mirrorKey] && dir === 1);
// 保持宽高比 // 保持宽高比
if (keepRatio && otherAxisResult) { // if (keepRatio && otherAxisResult) {
newVal = isWidth ? otherAxisResult.newVal * originalRatio : otherAxisResult.newVal / originalRatio; // newVal = isWidth ? otherAxisResult.newVal * originalRatio : otherAxisResult.newVal / originalRatio;
} // }
const adjustPos = shouldMove ? pos - (newVal - val) : pos; const adjustPos = shouldMove ? pos - (newVal - val) : pos;
@@ -315,24 +328,32 @@ export default defineComponent({
// 处理缩放 // 处理缩放
if (isDiagonal) { if (isDiagonal) {
const mainAxis = Math.abs(delta[0] - 1) > Math.abs(delta[1] - 1) ? 'width' : 'height'; // const mainAxis = Math.abs(dist[0] - 1) > Math.abs(dist[1] - 1) ? 'width' : 'height';
const crossAxis = mainAxis === 'width' ? 'height' : 'width'; // const crossAxis = mainAxis === 'width' ? 'height' : 'width';
const mainDir = mainAxis === 'width' ? direction[0] : direction[1]; // const mainDir = mainAxis === 'width' ? dist[0] : dist[1];
const crossDir = crossAxis === 'width' ? direction[0] : direction[1]; // const crossDir = crossAxis === 'width' ? dist[0] : dist[1];
const mainDelta = mainAxis === 'width' ? delta[0] : delta[1]; // const mainDelta = mainAxis === 'width' ? dist[0] : dist[1];
const mainResult = processAxis(mainAxis, mainAxis === 'width' ? width : height, mainDelta, mainDir, mainAxis === 'width' ? left : top); // const mainResult = processAxis(mainAxis, mainAxis === 'width' ? width : height, mainDelta, mainDir, mainAxis === 'width' ? left : top);
const crossResult = processAxis(crossAxis, crossAxis === 'width' ? width : height, 1, crossDir, crossAxis === 'width' ? left : top, true, mainResult); // const crossResult = processAxis(crossAxis, crossAxis === 'width' ? width : height, 1, crossDir, crossAxis === 'width' ? left : top, true, mainResult);
frontStyle.style.width = mainAxis === 'width' ? mainResult.newVal + 'px' : crossResult.newVal + 'px'; // frontStyle.style.width = mainAxis === 'width' ? mainResult.newVal + 'px' : crossResult.newVal + 'px';
frontStyle.style.height = mainAxis === 'height' ? mainResult.newVal + 'px' : crossResult.newVal + 'px'; // frontStyle.style.height = mainAxis === 'height' ? mainResult.newVal + 'px' : crossResult.newVal + 'px';
frontStyle.style.left = mainAxis === 'width' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px'; // frontStyle.style.left = mainAxis === 'width' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px';
frontStyle.style.top = mainAxis === 'height' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px'; // frontStyle.style.top = mainAxis === 'height' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px';
const scale = (dist[0] < 0 && dist[1] < 0) ? -Math.sqrt(dist[0] * dist[1]) : Math.sqrt(dist[0] * dist[1]);
const widthResult = processAxis('width', width, scale, direction[0], left);
const heightResult = processAxis('height', height, scale, direction[1], top);
frontStyle.style.width = widthResult.newVal + 'px';
frontStyle.style.height = heightResult.newVal + 'px';
frontStyle.style.left = widthResult.adjustPos + 'px';
frontStyle.style.top = heightResult.adjustPos + 'px';
} else { } else {
const widthResult = processAxis('width', width, delta[0], direction[0], left); const widthResult = processAxis('width', width, dist[0], direction[0], left);
const heightResult = processAxis('height', height, delta[1], direction[1], top); const heightResult = processAxis('height', height, dist[1], direction[1], top);
frontStyle.style.left = widthResult.adjustPos + 'px'; frontStyle.style.left = widthResult.adjustPos + 'px';
frontStyle.style.top = heightResult.adjustPos + 'px'; frontStyle.style.top = heightResult.adjustPos + 'px';