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

Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

Browse Source
This commit is contained in:
zhangyahui
2026-01-28 10:09:48 +08:00
parent 0930e8cc77 0a507fb158
commit de78bfc051
18 changed files with 420 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js
View File

@@ -106,7 +106,6 @@ export class FillGroupLayerBackgroundCommand extends Command {
});
}
}
// 判断fabricObjects是否是组对象
const firstObj = layer.fabricObjects?.[0] || null;
// 如果没有找到第一个对象，则直接添加到当前画布
@@ -173,8 +172,8 @@ export class FillGroupLayerBackgroundCommand extends Command {
}
const canvasObj = findObjectById(this.canvas, firstObj?.id)?.object;
if (
(canvasObj && canvasObj.type === "group") ||
canvasObj._objects?.length > 0
canvasObj && (canvasObj.type === "group" ||
canvasObj._objects?.length > 0)
) {
this.newFill.set({
left: 0,

12
src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.js
View File

@@ -147,11 +147,11 @@ export class LassoCutoutCommand extends CompositeCommand {
}
// 确定源图层
const sourceLayer = this.layerManager.getActiveLayer();
if (!sourceLayer) {
console.error("无法执行套索抠图：源图层无效");
return false;
}
// const sourceLayer = this.layerManager.getActiveLayer();
// if (!sourceLayer) {
// console.error("无法执行套索抠图：源图层无效");
// return false;
// }
// 获取源图层的所有对象（包括子图层）
// const sourceObjects = this._getLayerObjects(sourceLayer);
@@ -225,7 +225,7 @@ export class LassoCutoutCommand extends CompositeCommand {
const layers = this.layerManager.layers.value;
var topLayerIndex = 0;
layers.forEach((layer, index) => {
if(this.originalLayer)layers.forEach((layer, index) => {
if (layer.id === this.originalLayer.id) {
topLayerIndex = index;
}else if (layer.children.length > 0) {

56
src/component/Canvas/CanvasEditor/commands/PartCommands.js Normal file
View File

@@ -0,0 +1,56 @@
import { Command } from "./Command.js";
/**
* 部件绘制命令
*/
export class PartDrawCommand extends Command {
constructor(options) {
super({
name: "部件绘制命令",
saveState: false,
});
this.canvas = options.canvas;
this.partManager = options.partManager;
this.partCanvas = options.partCanvas;
this.oldPartCanvas = this.partManager.partCanvas;
}
execute() {
this.partManager.drawPartCanvas(this.partCanvas);
return true;
}
undo() {
this.partManager.drawPartCanvas(this.oldPartCanvas);
return true;
}
}
/**
* 部件点选绘制命令
*/
export class PartPointDrawCommand extends Command {
constructor(options) {
super({
name: "部件点选绘制命令",
saveState: false,
});
this.canvas = options.canvas;
this.partManager = options.partManager;
this.partCanvas = options.partCanvas;
this.pointList = options.pointList;
this.oldPartCanvas = this.partManager.partCanvas;
this.oldPointList = [...this.partManager.pointList];
}
async execute() {
const list = [...this.pointList];
const canvas = this.partCanvas;
const res = await this.partManager.pointDrawPartCanvas(list, canvas);
return res;
}
async undo() {
const list = [...this.oldPointList];
const canvas = this.oldPartCanvas;
const res = await this.partManager.pointDrawPartCanvas(list, canvas);
return res;
}
}

76
src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue
View File

@@ -20,13 +20,13 @@
<img
src="/src/assets/images/canvas/shubiao-l.png"
/>
<span>Left Click: Add</span>
<span>{{ t("Canvas.LeftClickAdd") }}</span>
</div>
<div>
<img
src="/src/assets/images/canvas/shubiao-r.png"
/>
<span>Right Click: Remove</span>
<span>{{ t("Canvas.RightClickRemove") }}</span>
</div>
</div>
</div>
@@ -57,15 +57,15 @@
$t("Canvas.creation")
}}</span>
</div>
<div class="action-btn" @click="onCopyCreate">
<!-- <div class="action-btn" @click="onCopyCreate">
<svg-icon name="CCut" size="26" />
<span class="btn-text">{{
$t("Canvas.CreateAndCopy")
}}</span>
</div>
</div> -->
<div class="action-btn" @click="onReset">
<svg-icon name="CCut" size="26" />
<span class="btn-text">清空当前点位</span>
<span class="btn-text">{{ $t("Canvas.TheClearlySelectedContent") }}</span>
</div>
</div>
</div>
@@ -76,23 +76,9 @@
<script setup>
import { ref, onMounted, watch } from "vue";
import { useI18n } from "vue-i18n";
import {
CreateSelectionCommand,
InvertSelectionCommand,
FeatherSelectionCommand,
FillSelectionCommand,
} from "../commands/SelectionCommands";
import { ToolCommand } from "../commands/ToolCommands";
import {
LassoCutoutCommand,
ClearSelectionCommand,
// CutSelectionToNewLayerCommand,
} from "../commands/LassoCutoutCommand";
import { OperationType } from "../utils/layerHelper";
import { ClearSelectionContentCommand } from "../commands/ClearSelectionContentCommand";
import { CutSelectionToNewLayerCommand } from "../commands/CutSelectionToNewLayerCommand";
// 国际化
const { t } = useI18n();
const props = defineProps({
canvas: {
type: Object,
@@ -137,32 +123,30 @@
const toolList = [
{
type: OperationType.PART,
label: "Point Selection",
label: t("Canvas.PointSelection"),
icon: "CPoint",
size: "20",
},
{
type: OperationType.PART_RECTANGLE,
label: "Marquee Selection",
label: t("Canvas.MarqueeSelection"),
icon: "CMarquee",
size: "20",
},
{
type: OperationType.PART_BRUSH,
label: "Brush Selection",
label: t("Canvas.BrushSelection"),
icon: "CBrush2",
size: "16",
},
{
type: OperationType.PART_ERASER,
label: "Erase",
label: t("Canvas.Erase"),
icon: "CEraser2",
size: "22",
},
];
// 国际化
const { t } = useI18n();
onMounted(() => {});
@@ -182,12 +166,6 @@
show();
// 根据工具类型设置选区类型
toolType.value = newTool;
// 更新选区管理器的选区类型
// if (props.partManager) {
// props.partManager.setPartType(toolType.value);
// props.partManager.setupPartEvents();
// }
} else {
close();
}
@@ -220,12 +198,6 @@
if (props.toolManager) {
props.toolManager.setToolWithCommand(type);
}
// // 备用方案：如果没有 toolManager，直接更新 partManager
// else if (props.partManager) {
// props.partManager.setPartType(type);
// props.partManager.setupPartEvents();
// }
}
// 创建
@@ -418,35 +390,11 @@
.tool-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: 5px;
padding: 0 30px;
}
/* 平板适配 - 每行4个按钮 */
@media screen and (max-width: 768px) {
.tool-actions {
grid-template-columns: repeat(3, 1fr);
gap: 8px 6px;
padding: 0 8px;
}
}
/* 手机适配 - 每行3个按钮 */
@media screen and (max-width: 480px) {
.tool-actions {
grid-template-columns: repeat(3, 1fr);
gap: 6px 4px;
padding: 0 6px;
}
.header-btn {
font-size: 11px;
padding: 2px 4px;
min-width: 28px;
}
}
.action-btn {
display: flex;
// flex-direction: column;

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

@@ -22,7 +22,7 @@
v-for="v in activeObjects"
:key="v.id"
>
<div class="title">{{ v.layer?.name }}</div>
<!-- <div class="title">{{ v.layer?.name }}</div> -->
<div class="list">
<div
class="input"
@@ -125,7 +125,10 @@
"
:options="selectOptions"
@change="(e) => changeFillRepeat(e, v)"
:disabled="v.layer?.metadata?.level2Type === 'Embroidery'"
:disabled="
v.layer?.metadata?.level2Type ===
'Embroidery'
"
/>
</div>
<!-- 平铺设置 -->
@@ -283,10 +286,10 @@
activeObjects.value.forEach((v) => {
v.layer = props.layerManager.getLayerById(v.layerId);
});
if (activeObjects.value.length === 0) {
close();
} else {
if (activeObjects.value.length === 1) {
show();
} else {
close();
}
};
//取消当前选中
@@ -761,7 +764,7 @@
}
.tool-content {
overflow-y: auto;
// overflow-y: auto;
max-height: 20rem;
margin-top: 1rem;
padding: 0 1.5rem;

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

@@ -93,7 +93,7 @@ const props = defineProps({
},
clothingMinIOPath: {
type: String,
default: "", // 衣服底图URL-线稿
default: "", // 衣服底图URL-线稿miniIo地址（传入后启动部件选取功能）
},
clothingImageUrl: {
type: String,
@@ -398,7 +398,9 @@ onMounted(async () => {
canvas: canvasManager.canvas,
layerManager,
canvasManager,
selectionManager,
toolManager,
commandManager,
props,
});
canvasManager.setPartManager(partManager);
@@ -742,12 +744,12 @@ function deleteFun(e, control) {
if(target.onDelete){
target.onDelete(target);
}else if(target.id){
removeLayer(layerManager.activeLayerId.value);
removeLayer(layerManager?.activeLayerId?.value);
}
}
function removeLayer(layerId) {
layerManager.removeLayer(layerId);
if(layerId)layerManager.removeLayer(layerId);
}
function triggerImageUpload() {
@@ -1043,11 +1045,7 @@ defineExpose({
width = 0,// 导出的图片宽度
height = 0, // 导出的图片高度
} = {}) => {
console.log('导出图片',{isContainFixed,
isContainFixedOther,
isPrintTrimsNoRepeat,
isPrintTrimsRepeat,
isContainNormalLayer})
canvasManager?.canvas?.discardActiveObject();
var base64 = await canvasManager.exportImage({
isContainBg,
isContainFixed,

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

@@ -178,7 +178,7 @@ export class CanvasManager {
this.canvas.onBrushImageConverted = async (fabricImage) => {
const activeTool = this.toolManager?.activeTool?.value;
if(activeTool === OperationType.PART_BRUSH){
this.partManager?.addPartImage(fabricImage);
this.partManager?.addDrawPartImage(fabricImage);
}else{
await this.addImageToLayer({ fabricImage, targetLayerId: null });
}
@@ -203,6 +203,10 @@ export class CanvasManager {
console.log("擦除完成", e.targets);
// 可以在这里保存状态到命令管理器
const affectedObjects = e.targets || [];
const activeTool = this.toolManager?.activeTool?.value;
if(activeTool === OperationType.PART_ERASER){
return this.partManager?.onErasingEnd(affectedObjects);
}
const command = this.eraserStateManager.endErasing(affectedObjects);
if (command && this.commandManager) {
await this.commandManager?.executeCommand?.(command);

322
src/component/Canvas/CanvasEditor/managers/PartManager.js
View File

@@ -1,14 +1,12 @@
import { fabric } from "fabric-with-all";
import { traceImageContour, imageToCanvas } from "../utils/helper";
import { OperationType } from "../utils/layerHelper";
import { CreateSelectionCommand } from "../commands/SelectionCommands";
import { ClearSelectionCommand } from "../commands/LassoCutoutCommand";
import { LassoCutoutCommand } from "../commands/LassoCutoutCommand";
import addIcon from "@/assets/images/canvas/add.png";
import removeIcon from "@/assets/images/canvas/remove.png";
import { Https } from "@/tool/https";
import store from "@/store";
import { createStaticCanvas } from "../utils/canvasFactory";
import { getObjectAlphaToCanvas } from "../utils/objectHelper";
import { Https } from "@/tool/https";
import { PartDrawCommand, PartPointDrawCommand } from "../commands/PartCommands";
/**
@@ -27,11 +25,31 @@ export class PartManager {
constructor(options = {}) {
this.canvas = options.canvas;
this.commandManager = options.commandManager;
this.selectionManager = options.selectionManager;
this.layerManager = options.layerManager;
this.canvasManager = options.canvasManager;
this.toolManager = options.toolManager;
this.props = options.props;
// 选区样式配置
this.selectionStyle = {
stroke: "#0096ff",
strokeWidth: 1,
strokeDashArray: [5, 5],
fill: "rgba(0, 150, 255, 0.1)",
strokeUniform: true, // 保持描边宽度不随缩放改变
// fill: "rgba(127, 255, 127, 0.3)",
// stroke: "#2AA81B",
// strokeWidth: 2,
// strokeDashArray: [8, 4],
// strokeLineCap: "round",// 折线端点样式
// strokeLineJoin: "bevel", // 折线连接样式
selectable: false,
evented: false,
excludeFromExport: true,
hoverCursor: "default",
moveCursor: "default",
};
// 状态
this.isActive = false;
@@ -54,14 +72,11 @@ export class PartManager {
this.activeTool = this.toolManager.activeTool;
this.rgba = { r: 0, g: 255, b: 0, a: 200 };
this.partGroup = null; // 当前选区对象
this.partId = "part_selector";
this.partGroup = null; // 当前选区对象
this.partCanvas = null;// 选区画布
// 点位列表
this.pointList = []; // 存储点选坐标
// 绘制列表
this.drawList = []; // 存储绘制对象
this.rectangleObject = null; // 矩形对象
this.pointList = []; // 点位列表 存储点选坐标
}
/**
@@ -75,6 +90,15 @@ export class PartManager {
if (toolId === OperationType.PART_ERASER) {
this.setEraserTool();
} else if (toolId === OperationType.PART || toolId === OperationType.PART_RECTANGLE) {
this.clearPointData();
this.resetPartObject();
}
if (toolId === OperationType.PART_ERASER || toolId === OperationType.PART_BRUSH) {
if (this.pointList.length > 0) {
this.clearPointData();
this.resetPartObject();
}
}
// 如果从非选区工具切换到选区工具，初始化事件
@@ -90,8 +114,7 @@ export class PartManager {
}
// 如果从选区工具切换到选区工具，重置选区
else if (wasActive && this.isActive) {
// this.clearPointData();
// this.resetPartObject();
}
}
@@ -218,12 +241,7 @@ export class PartManager {
}
/** 点选工具模式下点击事件处理 */
_pointDownkHandler(options) {
// const button = options.button;
// const isLeft = button === 1;// 左键1（添加） 右键3（删除）
// const icon = `url("${isLeft ? addIcon : removeIcon}") 16 16, default`
// this.canvas.upperCanvasEl.style.cursor = icon;
}
_pointDownkHandler(options) { }
/** 点选工具模式下移动事件处理 */
_pointMoveHandler(options) { }
/** 点选工具模式下抬起事件处理 */
@@ -236,7 +254,8 @@ export class PartManager {
const label = isLeft ? 1 : 0;
const points = [];
const labels = [];
this.pointList.forEach((item) => {
const pointList = [...this.pointList];
pointList.forEach((item) => {
points.push([item.x, item.y]);
labels.push(item.label);
});
@@ -247,34 +266,63 @@ export class PartManager {
points,
labels,
});
this.pointList.push({
pointList.push({
x: x,
y: y,
label: label,
})
const image1 = await this.loadImageToObject(url);
this.resetPartObject();
const group = this.partGroup;
const canvas = getObjectAlphaToCanvas(image1, null, 0, this.rgba);
this.partPointDrawCommand(pointList, canvas);
}
partPointDrawCommand(list, canvas) {
const cmd = new PartPointDrawCommand({
canvas: this.canvas,
partManager: this,
partCanvas: canvas,
pointList: [...list],
})
if (this.commandManager?.execute) {
this.commandManager.execute(cmd);
} else {
cmd.execute();
}
}
async pointDrawPartCanvas(list, canvas) {
this.selectionManager.clearSelection();
const fixedObject = this.canvasManager.getFixedLayerObject();
if (!fixedObject) {
console.warn("未找到固定图层")
return false;
}
this.resetPartObject();
this.pointList = [...list];
this.partCanvas = canvas;
const image2 = new fabric.Image(canvas);
image2.set({
originX: fixedObject.originX,
originY: fixedObject.originY,
});
group.add(image2);
for (let i = 0; i < this.pointList.length; i++) {
const item = this.pointList[i];
this.partGroup.add(image2);
for (let i = 0; i < list.length; i++) {
const item = list[i];
const icon = await this.loadImageToObject(item.label === 1 ? addIcon : removeIcon);
let size = 20;
let scaleX = size / (icon.width * this.partGroup.scaleX);
let scaleY = size / (icon.height * this.partGroup.scaleY);
icon.set({
left: item.x - group.width / 2,
top: item.y - group.height / 2,
scaleX: scaleX,
scaleY: scaleY,
left: item.x - this.partGroup.width / 2,
top: item.y - this.partGroup.height / 2,
originX: fixedObject.originX,
originY: fixedObject.originY,
})
group.add(icon);
this.partGroup.add(icon);
}
console.log(this.partGroup);
this.canvas.renderAll();
return true;
}
/** 清空点选数据 */
clearPointData() {
@@ -285,16 +333,42 @@ export class PartManager {
/** 框选工具模式下点击事件处理 */
_rectangleDownHandler(options) {
this.clearPointData();
this.pointList = [];
const fixedObject = this.canvasManager.getFixedLayerObject();
if (!fixedObject) return console.warn("未找到固定图层");
const { x, y } = this.handleMousePosition(options, fixedObject);
this.pointList.push(x, y);
this.rectangleObject = new fabric.Rect({
left: x - fixedObject.width / 2,
top: y - fixedObject.height / 2,
width: 0,
height: 0,
...this.selectionStyle,
fill: "transparent", // 在绘制过程中不显示填充
strokeUniform: true,
});
this.partGroup.add(this.rectangleObject);
this.canvas.renderAll();
}
/** 框选工具模式下移动事件处理 */
_rectangleMoveHandler(options) { }
_rectangleMoveHandler(options) {
if (!this.rectangleObject) return console.warn("未找到框选对象");
const fixedObject = this.canvasManager.getFixedLayerObject();
if (!fixedObject) return console.warn("未找到固定图层");
const { x, y } = this.handleMousePosition(options, fixedObject);
this.rectangleObject.set({
width: x - this.rectangleObject.left - fixedObject.width / 2,
height: y - this.rectangleObject.top - fixedObject.height / 2,
});
this.canvas.renderAll();
}
/** 框选工具模式下抬起事件处理 */
async _rectangleUpHandler(options) {
if (this.rectangleObject) {
this.partGroup.remove(this.rectangleObject);
this.canvas.renderAll();
}
const fixedObject = this.canvasManager.getFixedLayerObject();
if (!fixedObject) return console.warn("未找到固定图层");
const { x, y } = this.handleMousePosition(options, fixedObject);
@@ -305,18 +379,9 @@ export class PartManager {
type: "box",
box: [...this.pointList],
});
const image1 = await this.loadImageToObject(url);
this.resetPartObject();
const group = this.partGroup;
const canvas = getObjectAlphaToCanvas(image1, null, 0, this.rgba);
this.partCanvas = canvas;
const image2 = new fabric.Image(canvas);
image2.set({
originX: fixedObject.originX,
originY: fixedObject.originY,
});
group.add(image2);
this.canvas.renderAll();
const image = await this.loadImageToObject(url);
const canvas = getObjectAlphaToCanvas(image, null, 0, this.rgba);
this.partDrawCommand(canvas);
}
/** 获取分隔后图片 */
async getSegAnythingImage(obj) {
@@ -360,7 +425,16 @@ export class PartManager {
}
}
async addPartImage(fabricImage) {
/** 绘制工具模式下点击事件处理 */
_brushDownHandler(options) { }
/** 绘制工具模式下移动事件处理 */
_brushMoveHandler(options) { }
/** 绘制工具模式下抬起事件处理 */
_brushUpHandler(options) { }
/** 绘制模式添加画笔 */
async addDrawPartImage(fabricImage) {
const scaleX = fabricImage.scaleX / this.partGroup.scaleX;
const scaleY = fabricImage.scaleY / this.partGroup.scaleY;
const top = (fabricImage.top - this.partGroup.top) / this.partGroup.scaleY;
@@ -371,15 +445,83 @@ export class PartManager {
top: top + this.partGroup.height / 2,
left: left + this.partGroup.width / 2,
})
this.drawList.push(fabricImage);
const tcanvas = new fabric.StaticCanvas(document.createElement("canvas"), {
width: this.partGroup.width,
height: this.partGroup.height,
enableRetinaScaling: false,
});
this.drawList.forEach(item => tcanvas.add(item))
if (this.partCanvas) {
let image = new fabric.Image(this.partCanvas);
tcanvas.add(image)
}
tcanvas.add(fabricImage)
tcanvas.renderAll();
const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, this.rgba);
this.partDrawCommand(canvas);
}
/** 切换到擦除工具 */
setEraserTool() {
if (!this.canvas) return console.warn("未找到画布");
const objects = this.canvas.getObjects();
objects.forEach(obj => {
if (obj.id === this.partId) {
obj.set({
erasable: true
})
}
})
}
/** 擦除工具模式下擦除完成事件处理 */
async onErasingEnd(affectedObjects) {
console.log("擦除完成", affectedObjects);
const tcanvas = new fabric.StaticCanvas(document.createElement("canvas"), {
width: this.partGroup.width,
height: this.partGroup.height,
enableRetinaScaling: false,
});
await new Promise((resolve, reject) => {
this.partGroup.clone((clone) => {
clone.set({
scaleX: 1,
scaleY: 1,
top: this.partGroup.height / 2,
left: this.partGroup.width / 2,
})
tcanvas.add(clone);
resolve(clone);
})
});
tcanvas.renderAll();
const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, this.rgba);
this.partDrawCommand(canvas);
}
/** 擦除工具模式下点击事件处理 */
_eraseDownHandler(options) {
}
/** 擦除工具模式下移动事件处理 */
_eraseMoveHandler(options) {
}
/** 擦除工具模式下抬起事件处理 */
_eraseUpHandler(options) {
}
partDrawCommand(canvas) {
const cmd = new PartDrawCommand({
canvas: this.canvas,
partManager: this,
partCanvas: canvas,
})
if (this.commandManager?.execute) {
this.commandManager.execute(cmd);
} else {
cmd.execute();
}
}
/** 绘制部件画布 */
drawPartCanvas(canvas) {
this.selectionManager.clearSelection();
this.partCanvas = canvas;
const image = new fabric.Image(canvas);
image.set({
@@ -392,40 +534,6 @@ export class PartManager {
this.canvas.renderAll();
}
/** 绘制工具模式下点击事件处理 */
_brushDownHandler(options) {
}
/** 绘制工具模式下移动事件处理 */
_brushMoveHandler(options) {
}
/** 绘制工具模式下抬起事件处理 */
_brushUpHandler(options) {
}
/** 切换到擦除工具 */
setEraserTool() {
if (!this.canvas) return console.warn("未找到画布");
const objects = this.canvas.getObjects();
objects.forEach(obj => {
obj.set({
erasable: true
})
})
}
/** 擦除工具模式下抬起事件处理 */
_eraseUpHandler(options) {
}
/** 擦除工具模式下点击事件处理 */
_eraseDownHandler(options) {
}
/** 擦除工具模式下移动事件处理 */
_eraseMoveHandler(options) {
}
/** 删除指定ID的对象 */
removeObjectsById(id) {
const objects = this.canvas.getObjects().filter(obj => obj.id === id);
@@ -462,7 +570,7 @@ export class PartManager {
originY: fixedObject.originY,
selectable: false,
evented: false,
erasable: false,
erasable: true,
})
this.canvas.add(group);
this.partGroup = group;
@@ -474,10 +582,33 @@ export class PartManager {
}
/** 创建当前选区 */
createPart() {
async createPart() {
if (!this.partCanvas) return console.warn("没有点位画布");
const fixedObject = this.canvasManager.getFixedLayerObject();
if (!fixedObject) return console.warn("未找到固定图层");
// const tcanvas = new fabric.StaticCanvas(document.createElement("canvas"), {
// width: fixedObject.width,
// height: fixedObject.height,
// enableRetinaScaling: false,
// });
// await new Promise((resolve, reject) => {
// fixedObject.clone((clone) => {
// const clipPath = new fabric.Image(this.partCanvas);
// clipPath.set({
// originX: fixedObject.originX,
// originY: fixedObject.originY,
// })
// clone.set({
// scaleX: 1,
// scaleY: 1,
// clipPath: clipPath,
// })
// tcanvas.add(clone);
// resolve(clone);
// })
// });
// tcanvas.renderAll();
const scaleY = fixedObject.scaleY
const scaleX = fixedObject.scaleX
const top = fixedObject.top - fixedObject.height * scaleY / 2;
@@ -496,23 +627,26 @@ export class PartManager {
top: top + minY * scaleY,
scaleX: scaleX,
scaleY: scaleY,
fill: "rgba(127, 255, 127, 0.3)",
stroke: "#2AA81B",
strokeWidth: 2,
strokeDashArray: [8, 4],
strokeLineCap: "round",// 折线端点样式
strokeLineJoin: "bevel", // 折线连接样式
strokeUniform: true, // 保持描边宽度不随缩放改变
...this.selectionStyle,
});
// this.partGroup.add(path);
this.canvas.add(path);
this.canvas.renderAll();
this.clearPart();
this.selectionManager.setSelectionObject(path);
const cmd = new LassoCutoutCommand({
canvas: this.canvas,
layerManager: this.layerManager,
selectionManager: this.selectionManager,
toolManager: this.toolManager,
})
this.commandManager.execute(cmd)
}
/** 清空点位 */
clearPart() {
this.pointList = [];
this.resetPartObject(true);
if (this.activeTool.value === OperationType.PART) {
this.partPointDrawCommand([], null);
} else {
this.pointList = [];
this.partDrawCommand(null);
}
}
/**

4
src/component/Canvas/CanvasEditor/managers/ToolManager.js
View File

@@ -197,7 +197,7 @@ export class ToolManager {
[OperationType.PART_RECTANGLE]: {
name: "部件选取工具-矩形",
icon: "part",
cursor: "default",
cursor: "crosshair",
setup: this.setupPartRectangleTool.bind(this),
},
[OperationType.PART_BRUSH]: {
@@ -721,7 +721,7 @@ export class ToolManager {
setupPartRectangleTool(isExecute = false) {
if (!this.canvas) return;
this.canvas.isDrawingMode = false;
this.canvas.selection = true;
this.canvas.selection = false;
if (!isExecute && this.canvasManager && this.canvasManager.partManager) {
this.canvasManager.partManager.setCurrentTool(OperationType.PART_RECTANGLE);
}

1
src/component/Canvas/CanvasEditor/utils/helper.js
View File

@@ -1045,6 +1045,7 @@ export async function imageToCanvas(image, scale = 1, sr = false) {
/**
* 图片边界跟踪算法(透明底)
* @param {HTMLCanvasElement} canvas - canvas元素
* @param {Number} scale - 缩放比例
* @returns {Array} 边界点数组 [{x, y}, ...]
*/
export function traceImageContour(canvas) {

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

@@ -444,7 +444,16 @@
</div>
</div>
</template>
<style>
body > .lower-canvas {
position: fixed;
top: 0;
left: 0;
width: 800px !important;
height: 600px !important;
z-index: 99999999;
}
</style>
<style scoped lang="less">
* {
margin: 0;

2
src/component/Canvas/test.vue
View File

@@ -53,7 +53,7 @@
};
});
// 边界追踪
function traceImageContour(canvas) {
function traceImageContour(canvas, scale = 1) {
const ctx = canvas.getContext("2d");
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;

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

@@ -6,13 +6,13 @@
<div class="content-bottom" ref="canvasContent">
<div class="contet">
<div class="canvas" :class="{'active': currentView === 'canvasEditor'}"@click.stop>
<!-- :clothingMinIOPath="selectDetail.minIOPath" 部件选取 -->
<editCanvas v-if="canvasLoad" :config="canvasConfig"
:title="t('CanvasTitle.ModifyItem')"
@canvasInit="editSketchCanvasInit"
is-edit
:clothingImageUrl="selectDetail.path"
:clothingImageUrl2="selectDetail.layersObject[0].maskUrl"
:clothingMinIOPath="selectDetail.minIOPath"
showFixedLayer
:canvasJSON="canvasJSON"
@canvasLoadJsonSuccess="canvasLoadJsonSuccess"

2
src/component/Detail/model/modelPosition copy.vue
View File

@@ -28,7 +28,7 @@
<div class="detail_modal_item_front">
<img
style="object-fit: cover;"
:style="observerWH.width == '0px'?{width:observerWH.width+'px',height:observerWH.height+'px'}:{'object-fit': 'contain'}"
:style="observerWH.width > 0?{width:observerWH.width+'px',height:observerWH.height+'px'}:{width:'100%',height:'auto','object-fit': 'contain'}"
:src="designDetail.designItemUrl" alt="">
</div>
</div>

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

@@ -219,19 +219,14 @@ export default defineComponent({
detailData.frontBack.front[selectItem.imgDomIndex].style.top = y + 'px'
});
const updateElementTransform = (element, rotateDeg = null) => {
const currentTransform = element.style?.transform || '';
// 1. 提取当前的所有rotate
const currentRotates = (currentTransform.match(/rotate[XYZ]?\([^)]+\)/g) || []);
// 2. 获取除镜像和rotate外的其他所有变换
let otherTransforms = currentTransform
.replace(/scaleX\(-1\)|scaleY\(-1\)/g, '') // 移除镜像
.replace(/rotate[XYZ]?\([^)]+\)/g, '') // 移除rotate
.replace(/scaleX\(-1\)|scaleY\(-1\)/g, '')
.replace(/rotate[XYZ]?\([^)]+\)/g, '')
.replace(/\s+/g, ' ')
.trim();
// 3. 构建新transform
const transforms = [];
// 镜像部分
if (element.mirror.x) transforms.push('scaleX(-1)');
if (element.mirror.y) transforms.push('scaleY(-1)');
if (otherTransforms) transforms.push(otherTransforms);
@@ -246,104 +241,85 @@ export default defineComponent({
moveableInstance.value.on('scale', ({ target, delta, direction }) => {
const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
const width = parseFloat(frontStyle.style.width);
const height = parseFloat(frontStyle.style.height);
let width = parseFloat(frontStyle.style.width);
let height = parseFloat(frontStyle.style.height);
let left = parseFloat(frontStyle.style.left) || 0;
let top = parseFloat(frontStyle.style.top) || 0;
let rotation = 0;
// 获取原始比例
const originalRatio = width / height;
if (frontStyle.style.transform) {
const transform = frontStyle.style.transform;
const match = transform.match(/rotate\(([-\d.]+)deg\)/);
if (match) {
rotation = parseFloat(match[1]);
}
const match = frontStyle.style.transform.match(/rotate\(([-\d.]+)deg\)/);
if (match) rotation = parseFloat(match[1]);
}
// 根据旋转角度重新计算控制点的方向
function getAdjustedCorner(originalCorner, rotationAngle) {
const angleRad = rotationAngle * (Math.PI / 180);
const cosA = Math.cos(angleRad);
const sinA = Math.sin(angleRad);
const newX = originalCorner.x * cosA - originalCorner.y * sinA;
const newY = originalCorner.x * sinA + originalCorner.y * cosA;
const getAdjustedCorner = (corner, rot) => {
const rad = rot * (Math.PI / 180);
const x = corner.x * Math.cos(rad) - corner.y * Math.sin(rad);
const y = corner.x * Math.sin(rad) + corner.y * Math.cos(rad);
const threshold = 0.5;
return {
x: Math.abs(newX) > threshold ? (newX > 0 ? 1 : -1) : 0,
y: Math.abs(newY) > threshold ? (newY > 0 ? 1 : -1) : 0
};
}
return { x: Math.abs(x) > threshold ? (x > 0 ? 1 : -1) : 0, y: Math.abs(y) > threshold ? (y > 0 ? 1 : -1) : 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];
}
// 判断是否是对角线方向（需要等比缩放）
const isDiagonal = Math.abs(direction[0]) === 1 && Math.abs(direction[1]) === 1;
// 处理轴缩放，包含镜像翻转逻辑
const processAxis = (axis, val, deltaVal, dir, originalPosition, originalSize, keepRatio = false, otherAxisResult = null) => {
let newVal = val * deltaVal;
const processAxis = (axis, val, deltaVal, dir, pos, keepRatio = false, otherAxisResult = null) => {
const mirrorKey = axis === 'width' ? 'x' : 'y';
const isWidth = axis === 'width';
// 检查是否需要镜像翻转（当值小于等于0时）
let newVal = val * deltaVal;
// 翻转处理
if (newVal <= 0) {
frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey];
newVal = Math.abs(newVal);
updateElementTransform(frontStyle);
// 镜像翻转后，位置需要根据原始锚点调整
if (dir === -1) {
// 从左上/右上缩放时，位置保持不变
return {
newVal,
adjustPos: originalPosition,
shouldFlip: true
};
} else {
// 从左下/右下缩放时，位置需要调整
const newPosition = originalPosition + (originalSize - newVal) * (frontStyle.mirror[mirrorKey] ? -1 : 1);
return {
newVal,
adjustPos: newPosition,
shouldFlip: true
};
}
}
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) {
newVal = isWidth ?
otherAxisResult.newVal * originalRatio :
otherAxisResult.newVal / originalRatio;
newVal = isWidth ? otherAxisResult.newVal * originalRatio : otherAxisResult.newVal / originalRatio;
}
let adjustPos;
if (shouldMove) {
adjustPos = originalPosition - (newVal - originalSize);
} else {
adjustPos = originalPosition;
}
return {
newVal,
adjustPos,
shouldFlip: false
};
const adjustPos = shouldMove ? pos - (newVal - val) : pos;
return { newVal, adjustPos, shouldFlip: newVal !== val && newVal <= 0 };
};
// 自由缩放
const widthResult = processAxis('width', width, delta[0], direction[0], left, width);
const heightResult = processAxis('height', height, delta[1], direction[1], top, height);
if (isDiagonal) {
const mainAxis = Math.abs(delta[0] - 1) > Math.abs(delta[1] - 1) ? 'width' : 'height';
const crossAxis = mainAxis === 'width' ? 'height' : 'width';
const mainDir = mainAxis === 'width' ? direction[0] : direction[1];
const crossDir = crossAxis === 'width' ? direction[0] : direction[1];
const mainDelta = mainAxis === 'width' ? delta[0] : delta[1];
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);
frontStyle.style.width = mainAxis === 'width' ? 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.top = mainAxis === 'height' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px';
} else {
const widthResult = processAxis('width', width, delta[0], direction[0], left);
const heightResult = processAxis('height', height, delta[1], direction[1], top);
frontStyle.style.left = widthResult.adjustPos + 'px';
frontStyle.style.top = heightResult.adjustPos + 'px';
frontStyle.style.width = widthResult.newVal + 'px';
frontStyle.style.height = heightResult.newVal + 'px';
// }
}
});
// 旋转
moveableInstance.value.on('rotate', ({ target, beforeRotate }) => {
@@ -647,7 +623,15 @@ export default defineComponent({
opacity: 0;
}
:deep(.moveable-control){
width: 1.4rem;
height: 1.4rem;
border-radius: 0;
background-color: #44aaff;
border: 2px solid #44aaff;
&.moveable-ne,&.moveable-se,&.moveable-sw,&.moveable-nw{
border: 2px solid #44aaff;
background-color: #ffff;
}
}
:deep(.moveable-rotation-control){
border-radius: 50%;

10
src/component/common/SelectImages.vue
View File

@@ -20,7 +20,7 @@
</div>
<!-- 图片网格 -->
<div class="image-grid" @scroll="handleScroll">
<div class="image-grid" v-show="list.length > 0" @scroll="handleScroll">
<div
v-for="(item, index) in list"
:key="index"
@@ -460,6 +460,7 @@ defineExpose({
padding: 20px;
// overflow-y: auto;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 20px;
@@ -519,8 +520,9 @@ defineExpose({
overflow-y: auto;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
gap: 16px;
min-height: 22rem;
max-height: 50rem;
flex: 1;
// min-height: 22rem;
// max-height: 50rem;
padding-bottom: 2rem;
@media screen and (max-width: 768px) {
@@ -615,9 +617,9 @@ defineExpose({
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
color: #666;
min-height: 300px;
margin: auto 0;
.empty-icon {
font-size: 48px;

6
src/lang/cn.ts
View File

@@ -1503,6 +1503,12 @@ export default {
CompositeLuminosity: '亮度',
CompositeLuminosityTip: '亮度：保留原图像颜色，改变新图像亮度',
GarmentPartSelector: '服装部件选取',
LeftClickAdd: '左键添加',
RightClickRemove: '右键移除',
PointSelection: '点选',
MarqueeSelection: '框选',
BrushSelection: '画笔',
Erase: '擦除',
},
speedList: {
High: '高级',

6
src/lang/en.ts
View File

@@ -1554,6 +1554,12 @@ export default {
CompositeLuminosityTip:
'Luminosity: Preserve the original image color and change the luminosity of the new image',
GarmentPartSelector: 'Garment Part Selector',
LeftClickAdd: 'Left Click: Add',
RightClickRemove: 'Right Click: Remove',
PointSelection: 'Point Selection',
MarqueeSelection: 'Marquee Selection',
BrushSelection: 'Brush Selection',
Erase: 'Erase',
},
speedList: {
High: 'High',