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

同步印花的缩放偏移显示

Browse Source
This commit is contained in:
李志鹏
2026-01-23 15:24:39 +08:00
parent 2ab23d0f30
commit 86db2f22a1
9 changed files with 224 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -53,11 +53,15 @@ 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.partCanvas = null;// 选区画布
// 点选工具相关
// 点位列表
this.pointList = []; // 存储点选坐标
// 绘制列表
this.drawList = []; // 存储绘制对象
}
/**
@@ -69,6 +73,10 @@ export class PartManager {
const wasActive = this.isActive;
this.isActive = this.tools.includes(toolId);
if (toolId === OperationType.PART_ERASER) {
this.setEraserTool();
}
// 如果从非选区工具切换到选区工具，初始化事件
if (!wasActive && this.isActive) {
this.initEvents();
@@ -79,11 +87,12 @@ export class PartManager {
this.cleanupEvents();
this.clearPartObject();
this.clearPointData();
} else {
this.clearPointData();
this.resetPartObject();
}
console.log("切换工具", toolId);
// 如果从选区工具切换到选区工具，重置选区
else if (wasActive && this.isActive) {
// this.clearPointData();
// this.resetPartObject();
}
}
/** 初始化选区相关事件 */
@@ -246,8 +255,7 @@ export class PartManager {
const image1 = await this.loadImageToObject(url);
this.resetPartObject();
const group = this.partGroup;
const rgba = { r: 0, g: 255, b: 0, a: 200 }
const canvas = getObjectAlphaToCanvas(image1, null, 0, rgba);
const canvas = getObjectAlphaToCanvas(image1, null, 0, this.rgba);
this.partCanvas = canvas;
const image2 = new fabric.Image(canvas);
image2.set({
@@ -300,8 +308,7 @@ export class PartManager {
const image1 = await this.loadImageToObject(url);
this.resetPartObject();
const group = this.partGroup;
const rgba = { r: 0, g: 255, b: 0, a: 200 }
const canvas = getObjectAlphaToCanvas(image1, null, 0, rgba);
const canvas = getObjectAlphaToCanvas(image1, null, 0, this.rgba);
this.partCanvas = canvas;
const image2 = new fabric.Image(canvas);
image2.set({
@@ -311,45 +318,6 @@ export class PartManager {
group.add(image2);
this.canvas.renderAll();
}
/** 绘制工具模式下点击事件处理 */
_brushDownHandler(options) {
}
/** 绘制工具模式下移动事件处理 */
_brushMoveHandler(options) {
}
/** 绘制工具模式下抬起事件处理 */
_brushUpHandler(options) {
}
/** 擦除工具模式下抬起事件处理 */
_eraseUpHandler(options) {
}
/** 擦除工具模式下点击事件处理 */
_eraseDownHandler(options) {
}
/** 擦除工具模式下移动事件处理 */
_eraseMoveHandler(options) {
}
/** 处理鼠标点位 */
handleMousePosition(options, fixedObject) {
const pos = options.absolutePointer;
const { x, y } = options.absolutePointer;
const width = fixedObject.width * fixedObject.scaleX;
const height = fixedObject.height * fixedObject.scaleY;
const X = (x - (fixedObject.left - width / 2)) / fixedObject.scaleX;
const Y = (y - (fixedObject.top - height / 2)) / fixedObject.scaleY;
return {
x: Math.round(X),
y: Math.round(Y),
}
}
/** 获取分隔后图片 */
async getSegAnythingImage(obj) {
setTimeout(() => {
@@ -378,6 +346,85 @@ export class PartManager {
});
});
}
/** 处理鼠标点位 */
handleMousePosition(options, fixedObject) {
const pos = options.absolutePointer;
const { x, y } = options.absolutePointer;
const width = fixedObject.width * fixedObject.scaleX;
const height = fixedObject.height * fixedObject.scaleY;
const X = (x - (fixedObject.left - width / 2)) / fixedObject.scaleX;
const Y = (y - (fixedObject.top - height / 2)) / fixedObject.scaleY;
return {
x: Math.round(X),
y: Math.round(Y),
}
}
async addPartImage(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;
const left = (fabricImage.left - this.partGroup.left) / this.partGroup.scaleX;
fabricImage.set({
scaleX,
scaleY,
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))
tcanvas.renderAll();
const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, this.rgba);
this.partCanvas = canvas;
const image = new fabric.Image(canvas);
image.set({
originX: this.partGroup.originX,
originY: this.partGroup.originY,
erasable: true,
});
this.resetPartObject();
this.partGroup.add(image);
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) {
@@ -415,6 +462,7 @@ export class PartManager {
originY: fixedObject.originY,
selectable: false,
evented: false,
erasable: false,
})
this.canvas.add(group);
this.partGroup = group;