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

This commit is contained in:
X1627315083
2025-09-26 15:18:29 +08:00
16 changed files with 1578 additions and 1383 deletions

View File

@@ -362,6 +362,11 @@ watch(
setBrushSize(newSize);
}
);
watch(()=>isVisible.value, (newVisible) => {
if (newVisible) {
setBrushSize(brushSize.value);
}
})
// 监听brushOpacity的变化更新到BrushStore
watch(

View File

@@ -258,6 +258,23 @@ const setClosePanel = ()=>{
closePanel.value = !closePanel.value
}
// 工具管理器和画布管理器
const toolManager = inject("toolManager");
const canvasManager = inject("canvasManager");
watch(size, (newSize, oldSize) => {
setBrushIndicatorSize(newSize)
})
// 设置笔刷指示器大小
function setBrushIndicatorSize(size) {
// 如果工具管理器存在,立即应用此更改
console.log(`=========== ${size}`,toolManager);
if (toolManager) {
toolManager.updateBrushIndicatorSize(size);
}
}
// 监听当前工具变化 - 参考 SelectionPanel 的实现方式
watch(
() => props.activeTool,
@@ -269,10 +286,11 @@ watch(
// 如果面板未显示且有合适的目标对象,则显示面板
if (!visible.value) {
visible.value = true;
closePanel.value = true
closePanel.value = true
// 检查是否有可液化的对象
checkAndShowPanel();
}
setBrushIndicatorSize(size.value)
} else {
visible.value = false; // 切换到其他工具时隐藏面板
// 切换到其他工具,隐藏液化面板
@@ -1634,24 +1652,26 @@ function stopPressTimer() {
color: #333;
border: 1px solid rgba(0, 0, 0, 0.05);
padding-bottom: 12px;
&.active{
transform: translateY(100%);
> .btn{
> i{
transform: rotate(90deg);
&.active{
transform: translateY(100%);
> .btn{
> i{
transform: rotate(90deg);
}
}
}
}
> .btn{
width: 100%;
text-align: center;
cursor: pointer;
> i{
font-size: 1.4rem;
display: block;
transform: rotate(270deg);
}
width: 100%;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
> i{
font-size: 1.4rem;
transform: rotate(270deg);
}
}
}

View File

@@ -1,4 +1,5 @@
import { fabric } from "fabric-with-all";
import { OperationType } from "../utils/layerHelper";
/**
* 笔刷指示器
@@ -94,6 +95,7 @@ export class BrushIndicator {
* @private
*/
_syncCanvasProperties() {
console.log("==========","笔刷同步大小")
if (!this.staticCanvas || !this.canvas) return;
// 检查是否为笔刷或橡皮擦模式,非相关模式直接返回
@@ -103,10 +105,8 @@ export class BrushIndicator {
this.canvas.isDrawingMode &&
this.canvas.freeDrawingBrush &&
this.canvas.freeDrawingBrush.type === "eraser";
if (!isBrushMode && !isEraserMode) {
return;
}
const isLiquifyMode = this.canvas.toolId === OperationType.LIQUIFY;// 检查是否在液化模式
if ([isBrushMode,isEraserMode,isLiquifyMode].every(v => !v)) return;
let hasChanges = false;
@@ -471,8 +471,12 @@ export class BrushIndicator {
* @returns {Boolean} 是否显示
*/
_shouldShowIndicator() {
// 检查画布是否在绘图模式
if (!this.canvas.isDrawingMode) return false;
const isDrawingMode = this.canvas.isDrawingMode;// 检查画布是否在绘图模式
const isLiquifyMode = this.canvas.toolId === OperationType.LIQUIFY;// 检查是否在液化模式
// console.log(`笔刷指示器\n绘图模式:${isDrawingMode}\n液化模式:${isLiquifyMode}`)
// 检查画布是否在绘图模式OR液化模式
if ([isDrawingMode, isLiquifyMode].every(v => !v)) return false;
// 检查是否有笔刷
if (!this.canvas.freeDrawingBrush) return false;

View File

@@ -373,6 +373,8 @@ export class ToolManager {
// 设置工具特定的状态
const tool = this.tools[toolId];
if (tool && typeof tool.setup === "function") {
console.log(`画布切换工具:${tool.name}(${toolId})`)
this.canvas.toolId = toolId;
tool.setup();
}
@@ -450,6 +452,7 @@ export class ToolManager {
if (!this.canvas) return;
this.canvas.isDrawingMode = false;
this.canvas.selection = true;
}
/**
@@ -750,6 +753,7 @@ export class ToolManager {
detail: panelDetail,
})
);
this._enableBrushIndicator();
}
/**
@@ -1465,6 +1469,7 @@ export class ToolManager {
OperationType.ERASER,
OperationType.RED_BRUSH,
OperationType.GREEN_BRUSH,
OperationType.LIQUIFY,
];
return brushTools.includes(currentTool);

View File

@@ -22,13 +22,13 @@ export class EnhancedLiquifyManager {
// 是否强制使用WebGL模式
forceWebGL: options.forceWebGL || false,
// 网格大小
gridSize: options.gridSize || 15,
gridSize: options.gridSize || 8,
// 最大变形强度
maxStrength: options.maxStrength || 100,
maxStrength: options.maxStrength || 200,
// 平滑迭代次数
smoothingIterations: options.smoothingIterations || 2,
smoothingIterations: options.smoothingIterations || 1,
// 网格弹性因子
relaxFactor: options.relaxFactor || 0.25,
relaxFactor: options.relaxFactor || 0.05,
// WebGL网格精度
meshResolution: options.meshResolution || 64,
};

View File

@@ -31,10 +31,10 @@ export class LiquifyManager {
// 创建增强版液化管理器实例
this.enhancedManager = new EnhancedLiquifyManager({
// 配置选项
gridSize: options.gridSize || 15,
maxStrength: options.maxStrength || 100,
smoothingIterations: options.smoothingIterations || 2,
relaxFactor: options.relaxFactor || 0.25,
gridSize: options.gridSize || 8,
maxStrength: options.maxStrength || 200,
smoothingIterations: options.smoothingIterations || 1,
relaxFactor: options.relaxFactor || 0.05,
meshResolution: options.meshResolution || 64,
// 根据环境选择合适的渲染模式
forceCPU: true, // 默认不强制使用CPU

View File

@@ -56,9 +56,14 @@
<span class="image-name">{{ item.name || "未命名" }}</span>
</div>
</div>
<div class="image-select" v-show="selectList.includes(item.url)">
<!-- <div class="image-select" v-show="selectList.includes(item.url)">
<i class="fi fi-sr-check-circle"></i>
</div>
</div> -->
<img
src="@/assets/images/icon/selected.png"
class="image-select"
v-show="selectList.includes(item.url)"
>
</div>
</div>