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

feat: 添加喷枪笔刷类型，支持颗粒感和纹理效果

Browse Source
This commit is contained in:
bighuixiang
2025-08-04 23:01:39 +08:00
parent 336a982bbf
commit 24a98d215e
2 changed files with 319 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/component/Canvas/CanvasEditor/managers/brushes/brushManager.js
View File

@@ -18,6 +18,7 @@ import { CustomPenBrush } from "./types/CustomPenBrush";
import { RibbonBrush } from "./types/RibbonBrush";
import { ShadedBrush } from "./types/ShadedBrush";
import { EraserStateManager } from "../EraserStateManager";
import { SprayBrush } from "./types/SprayBrush";
// import { SketchyBrush } from "./types/SketchyBrush";
// import { SpraypaintBrush } from "./types/SpraypaintBrush";
@@ -116,6 +117,13 @@ export class BrushManager {
description: "阴影笔刷，适合创建渐变和阴影效果",
category: "基础笔刷",
});
brushRegistry.register("spray", SprayBrush, {
name: "spray",
description: "模拟喷枪效果，创建散点效果",
category: "基础笔刷",
});
// brushRegistry.register("sketchy", SketchyBrush);
// brushRegistry.register("spraypaint", SpraypaintBrush, {
// name: "Spraypaint",
@@ -123,47 +131,47 @@ export class BrushManager {
// category: "基础笔刷",
// });
// // 注册喷枪笔刷
brushRegistry.register(
"spray",
class SprayBrush extends PencilBrush {
constructor(canvas, options = {}) {
super(canvas, {
id: "spray",
name: "Spray",
description: "模拟喷枪效果，创建散点效果",
category: "基础笔刷",
...options,
});
}
// // // 注册喷枪笔刷
// brushRegistry.register(
// "spray",
// class SprayBrush extends PencilBrush {
// constructor(canvas, options = {}) {
// super(canvas, {
// id: "spray",
// name: "Spray",
// description: "模拟喷枪效果，创建散点效果",
// category: "基础笔刷",
// ...options,
// });
// }
create() {
this.brush = new fabric.SprayBrush(this.canvas);
this.configure(this.brush, this.options);
return this.brush;
}
// create() {
// this.brush = new fabric.SprayBrush(this.canvas);
// this.configure(this.brush, this.options);
// return this.brush;
// }
configure(brush, options = {}) {
super.configure(brush, options);
// configure(brush, options = {}) {
// super.configure(brush, options);
if (options.density !== undefined) {
brush.density = options.density;
}
// if (options.density !== undefined) {
// brush.density = options.density;
// }
if (options.randomOpacity !== undefined) {
brush.randomOpacity = options.randomOpacity;
}
// if (options.randomOpacity !== undefined) {
// brush.randomOpacity = options.randomOpacity;
// }
if (options.dotWidth !== undefined) {
brush.dotWidth = options.dotWidth;
}
}
},
{
name: "喷枪",
description: "模拟喷枪效果，创建散点效果",
}
);
// if (options.dotWidth !== undefined) {
// brush.dotWidth = options.dotWidth;
// }
// }
// },
// {
// name: "喷枪",
// description: "模拟喷枪效果，创建散点效果",
// }
// );
// 注册橡皮擦笔刷
brushRegistry.register(
"eraser",
@@ -380,23 +388,27 @@ export class BrushManager {
}
// 创建新笔刷实例
try {
const brushInstance = brushRegistry.createBrushInstance(brushId, this.canvas, {
color: brushId === "eraser" ? this.brushStore.state.color : undefined,
width: this.brushStore.state.size,
opacity: this.brushStore.state.opacity,
const brushInstance = brushRegistry.createBrushInstance(
brushId,
this.canvas,
{
color: brushId === "eraser" ? this.brushStore.state.color : undefined,
width: this.brushStore.state.size,
opacity: this.brushStore.state.opacity,
// 阴影相关配置
shadowEnabled: this.brushStore.state.shadowEnabled,
shadowColor: this.brushStore.state.shadowColor,
shadowWidth: this.brushStore.state.shadowWidth,
shadowOffsetX: this.brushStore.state.shadowOffsetX,
shadowOffsetY: this.brushStore.state.shadowOffsetY,
// 阴影相关配置
shadowEnabled: this.brushStore.state.shadowEnabled,
shadowColor: this.brushStore.state.shadowColor,
shadowWidth: this.brushStore.state.shadowWidth,
shadowOffsetX: this.brushStore.state.shadowOffsetX,
shadowOffsetY: this.brushStore.state.shadowOffsetY,
// 材质笔刷特有配置
textureEnabled: this.brushStore.state.textureEnabled,
texturePath: this.brushStore.state.texturePath,
textureScale: this.brushStore.state.textureScale,
});
// 材质笔刷特有配置
textureEnabled: this.brushStore.state.textureEnabled,
texturePath: this.brushStore.state.texturePath,
textureScale: this.brushStore.state.textureScale,
}
);
if (brushInstance) {
// 创建笔刷
@@ -645,7 +657,10 @@ export class BrushManager {
// 初始化橡皮擦状态管理器
if (this.canvas && this.layerManager) {
this.eraserStateManager = new EraserStateManager(this.canvas, this.layerManager);
this.eraserStateManager = new EraserStateManager(
this.canvas,
this.layerManager
);
}
}
@@ -885,7 +900,12 @@ export class BrushManager {
const imageData = ctx.getImageData(pointer.x, pointer.y, 1, 1).data;
// 将RGB转换为十六进制颜色
const color = `#${((1 << 24) + (imageData[0] << 16) + (imageData[1] << 8) + imageData[2])
const color = `#${(
(1 << 24) +
(imageData[0] << 16) +
(imageData[1] << 8) +
imageData[2]
)
.toString(16)
.slice(1)}`;