深度画布智能选区
This commit is contained in:
@@ -187,6 +187,58 @@ export class CanvasEventManager {
|
||||
}
|
||||
}
|
||||
|
||||
_handleMouseDown(opt) {
|
||||
const currentTool = this.toolManager.currentTool.value;
|
||||
if (currentTool === OperationType.DRAW) {
|
||||
// 绘画模式
|
||||
} else if (currentTool === OperationType.ERASER) {
|
||||
// 橡皮擦模式
|
||||
} else if (this.aiSelectboxToolManager.tools.includes(currentTool)) {
|
||||
// 选择框模式
|
||||
this.aiSelectboxToolManager.mouseDownEvent(opt);
|
||||
} else if (this.shapeToolManager.tools.includes(currentTool)) {
|
||||
// 形状模式
|
||||
this.shapeToolManager.mouseDownEvent(opt);
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
_handleMouseMove(opt) {
|
||||
const currentTool = this.toolManager.currentTool.value;
|
||||
if (currentTool === OperationType.DRAW) {
|
||||
// 绘画模式
|
||||
} else if (currentTool === OperationType.ERASER) {
|
||||
// 橡皮擦模式
|
||||
} else if (this.aiSelectboxToolManager.tools.includes(currentTool)) {
|
||||
// 选择框模式
|
||||
this.aiSelectboxToolManager.mouseMoveEvent(opt);
|
||||
} else if (this.shapeToolManager.tools.includes(currentTool)) {
|
||||
// 形状模式
|
||||
this.shapeToolManager.mouseMoveEvent(opt);
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
_handleMouseUp(opt) {
|
||||
const currentTool = this.toolManager.currentTool.value;
|
||||
if (currentTool === OperationType.DRAW) {
|
||||
// 绘画模式
|
||||
} else if (currentTool === OperationType.ERASER) {
|
||||
// 橡皮擦模式
|
||||
} else if (this.aiSelectboxToolManager.tools.includes(currentTool)) {
|
||||
// 选择框模式
|
||||
this.aiSelectboxToolManager.mouseUpEvent(opt);
|
||||
} else if (this.shapeToolManager.tools.includes(currentTool)) {
|
||||
// 形状模式
|
||||
this.shapeToolManager.mouseUpEvent(opt);
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置鼠标事件处理
|
||||
*/
|
||||
@@ -202,16 +254,7 @@ export class CanvasEventManager {
|
||||
|
||||
// } else
|
||||
const currentTool = this.toolManager.currentTool.value;
|
||||
if (currentTool === OperationType.DRAW) {
|
||||
// 绘画模式
|
||||
} else if (currentTool === OperationType.ERASER) {
|
||||
// 橡皮擦模式
|
||||
} else if (currentTool === OperationType.SELECTBOX) {
|
||||
// 选择框模式
|
||||
this.aiSelectboxToolManager.mouseDownEvent(opt);
|
||||
} else if (this.shapeToolManager.tools.includes(currentTool)) {
|
||||
// 形状模式
|
||||
this.shapeToolManager.mouseDownEvent(opt);
|
||||
if (this._handleMouseDown(opt)) {
|
||||
} else if (opt.e.altKey || opt.e.which === 2 || currentTool === OperationType.PAN) {
|
||||
this.canvas.isDragging = true;
|
||||
this.canvas.lastPosX = opt.e.clientX;
|
||||
@@ -230,16 +273,7 @@ export class CanvasEventManager {
|
||||
// 鼠标移动事件
|
||||
this.canvas.on("mouse:move", (opt) => {
|
||||
const currentTool = this.toolManager.currentTool.value;
|
||||
if (currentTool === OperationType.DRAW) {
|
||||
// 绘画模式
|
||||
} else if (currentTool === OperationType.ERASER) {
|
||||
// 橡皮擦模式
|
||||
} else if (currentTool === OperationType.SELECTBOX) {
|
||||
// 选择框模式
|
||||
this.aiSelectboxToolManager.mouseMoveEvent(opt);
|
||||
} else if (this.shapeToolManager.tools.includes(currentTool)) {
|
||||
// 形状模式
|
||||
this.shapeToolManager.mouseMoveEvent(opt);
|
||||
if (this._handleMouseMove(opt)) {
|
||||
} else if (this.canvas.isDragging) {
|
||||
const vpt = this.canvas.viewportTransform;
|
||||
vpt[4] += opt.e.clientX - this.canvas.lastPosX;
|
||||
@@ -314,16 +348,7 @@ export class CanvasEventManager {
|
||||
this.canvas.on("mouse:down", (opt) => {
|
||||
// 只在PAN模式下处理触摸事件
|
||||
const currentTool = this.toolManager.currentTool.value;
|
||||
if (currentTool === OperationType.DRAW) {
|
||||
// 绘画模式
|
||||
} else if (currentTool === OperationType.ERASER) {
|
||||
// 橡皮擦模式
|
||||
} else if (currentTool === OperationType.SELECTBOX) {
|
||||
// 选择框模式
|
||||
this.aiSelectboxToolManager.mouseUpEvent(opt);
|
||||
} else if (this.shapeToolManager.tools.includes(currentTool)) {
|
||||
// 形状模式
|
||||
this.shapeToolManager.mouseDownEvent(opt);
|
||||
if (this._handleMouseDown(opt)) {
|
||||
} else if (currentTool === OperationType.PAN) {
|
||||
|
||||
// 平滑停止任何正在进行的惯性动画
|
||||
@@ -379,16 +404,7 @@ export class CanvasEventManager {
|
||||
this.canvas.on("mouse:move", (opt) => {
|
||||
|
||||
const currentTool = this.toolManager.currentTool.value;
|
||||
if (currentTool === OperationType.DRAW) {
|
||||
// 绘画模式
|
||||
} else if (currentTool === OperationType.ERASER) {
|
||||
// 橡皮擦模式
|
||||
} else if (currentTool === OperationType.SELECTBOX) {
|
||||
// 选择框模式
|
||||
this.aiSelectboxToolManager.mouseMoveEvent(opt);
|
||||
} else if (this.shapeToolManager.tools.includes(currentTool)) {
|
||||
// 形状模式
|
||||
this.shapeToolManager.mouseMoveEvent(opt);
|
||||
if (this._handleMouseMove(opt)) {
|
||||
} else if (currentTool === OperationType.PAN) {
|
||||
|
||||
// 检查是否是触摸事件
|
||||
@@ -489,16 +505,7 @@ export class CanvasEventManager {
|
||||
// 触摸结束事件
|
||||
this.canvas.on("mouse:up", (opt) => {
|
||||
const currentTool = this.toolManager.currentTool.value;
|
||||
if (currentTool === OperationType.DRAW) {
|
||||
// 绘画模式
|
||||
} else if (currentTool === OperationType.ERASER) {
|
||||
// 橡皮擦模式
|
||||
} else if (currentTool === OperationType.SELECTBOX) {
|
||||
// 选择框模式
|
||||
this.aiSelectboxToolManager.mouseUpEvent(opt);
|
||||
} else if (this.shapeToolManager.tools.includes(currentTool)) {
|
||||
// 形状模式
|
||||
this.shapeToolManager.mouseUpEvent(opt);
|
||||
if (this._handleMouseUp(opt)) {
|
||||
} else if (currentTool === OperationType.PAN) {
|
||||
|
||||
// 重置触摸状态
|
||||
@@ -661,16 +668,7 @@ export class CanvasEventManager {
|
||||
*/
|
||||
handleDragEnd(opt, isTouch = false) {
|
||||
const currentTool = this.toolManager.currentTool.value;
|
||||
if (currentTool === OperationType.DRAW) {
|
||||
// 绘画模式
|
||||
} else if (currentTool === OperationType.ERASER) {
|
||||
// 橡皮擦模式
|
||||
} else if (currentTool === OperationType.SELECTBOX) {
|
||||
// 选择框模式
|
||||
this.aiSelectboxToolManager.mouseUpEvent(opt);
|
||||
} else if (this.shapeToolManager.tools.includes(currentTool)) {
|
||||
// 形状模式
|
||||
this.shapeToolManager.mouseUpEvent(opt);
|
||||
if (this._handleMouseUp(opt)) {
|
||||
} else if (this.canvas.isDragging) {
|
||||
// if (this.lastMousePositions.length > 1 && opt && opt.e) {
|
||||
// this.animationManager.applyInertiaEffect(
|
||||
@@ -691,9 +689,16 @@ export class CanvasEventManager {
|
||||
|
||||
this.canvas.on("selection:updated", (opt) => this.updateSelectedLayer(opt));
|
||||
|
||||
// this.canvas.on("selection:cleared", () => this.clearSelectedElements());
|
||||
this.canvas.on("selection:cleared", (opt) => this.clearSelectedElements(opt));
|
||||
}
|
||||
clearSelectedElements(opt) {
|
||||
if (opt.deselected && opt.deselected.length > 0) {
|
||||
opt.deselected.forEach((object) => {
|
||||
if (object.type !== "group") return;
|
||||
if (object._originPosition) delete object._originPosition
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
setupObjectEvents() {
|
||||
// 监听对象变化事件，用于更新缩略图
|
||||
// this.canvas.on("object:added", (e) => {
|
||||
@@ -706,34 +711,43 @@ export class CanvasEventManager {
|
||||
// }
|
||||
// });
|
||||
|
||||
const updateLayers = (e) => {
|
||||
if (e.target._objects) return;
|
||||
// this.layerManager.updateLayers();// 先不用数据大了非常卡
|
||||
};
|
||||
|
||||
// 添加对象开始变换时的状态捕获
|
||||
this.canvas.on("object:moving", (e) => {
|
||||
// console.log("object:moving", e);
|
||||
// updateLayers(e);
|
||||
console.log("object:moving", e);
|
||||
const target = e.target;
|
||||
if (target._objects && target._objects.length > 0) {
|
||||
target._objects.forEach((object) => {
|
||||
if (object.type !== "group") return;
|
||||
if (!object._originPosition) return
|
||||
const originTop = object._originPosition.top
|
||||
const originLeft = object._originPosition.left
|
||||
const originCpTop = object._originPosition.cpTop
|
||||
const originCpLeft = object._originPosition.cpLeft
|
||||
const top = object.top + target.top + target.height / 2;
|
||||
const left = object.left + target.left + target.width / 2;
|
||||
object.clipPath.set({
|
||||
top: originCpTop + (top - originTop),
|
||||
left: originCpLeft + (left - originLeft),
|
||||
})
|
||||
})
|
||||
this.canvasManager.updateSubLayerClipPath()
|
||||
}
|
||||
});
|
||||
this.canvas.on("object:scaling", (e) => {
|
||||
// console.log("object:scaling", e);
|
||||
// updateLayers(e);
|
||||
});
|
||||
this.canvas.on("object:rotating", (e) => {
|
||||
// console.log("object:rotating", e);
|
||||
// updateLayers(e);
|
||||
});
|
||||
this.canvas.on("object:skewing", (e) => {
|
||||
// console.log("object:skewing", e);
|
||||
// updateLayers(e);
|
||||
});
|
||||
this.canvas.on("object:modified", async (e) => {
|
||||
// updateLayers(e);
|
||||
// console.log("object:modified", e);
|
||||
const target = e.target;
|
||||
const id = target?.info?.id;
|
||||
if (id) await this.layerManager.updateLayerThumbnailsById(id)
|
||||
if (target.type === "group") await this.canvasManager.updateSubLayerClipPath()
|
||||
this.stateManager.recordState();
|
||||
});
|
||||
this.canvas.on("object:removed", (e) => {
|
||||
|
||||
Reference in New Issue
Block a user