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

布局修改 部分bug修复

Browse Source
This commit is contained in:
X1627315083
2025-08-22 10:27:48 +08:00
parent 141821a843
commit 594bf5ce0a
275 changed files with 5675 additions and 13049 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,12 +26,14 @@ export class ToolManager {
* @param {Object} options.layerManager 图层管理实例
* @param {Object} options.brushManager 画笔管理器实例（可选，如果不提供会创建一个）
* @param {Object} options.activeTool 当前活动工具的响应式引用
* @param {Function} options.t 国际化函数
*/
constructor(options = {}) {
this.canvas = options.canvas;
this.commandManager = options.commandManager;
this.canvasManager = options.canvasManager;
this.layerManager = options.layerManager;
this.t = options.t
this.activeTool = options.activeTool || {
value: OperationType.SELECT,
};
@@ -47,6 +49,7 @@ export class ToolManager {
canvas: this.canvas,
brushSize: options.brushSize,
layerManager: this.layerManager, // 传入图层管理器引用
t:this.t
});
// 初始化笔刷指示器

21
src/component/Canvas/CanvasEditor/managers/brushes/BaseBrush.js
View File

@@ -7,11 +7,12 @@ export class BaseBrush {
* 构造函数
* @param {Object} canvas fabric画布实例
* @param {Object} options 笔刷配置选项
* @param {Object} t 翻译函数
*/
constructor(canvas, options = {}) {
this.canvas = canvas;
this.options = options;
this.t = options.t;
// 基本属性
this.id = options.id || this.constructor.name;
this.name = options.name || "未命名笔刷";
@@ -211,35 +212,35 @@ export class BaseBrush {
return [
{
id: "size",
name: "笔刷大小",
name: this.t('Canvas.BrushSize'),
type: "slider",
defaultValue: 5,
min: 0.5,
max: 100,
step: 0.5,
description: "笔刷的大小（像素）",
category: "基本",
description: this.t('Canvas.BrushDeSize'),
category: this.t('Canvas.basic'),
order: 10,
},
{
id: "color",
name: "笔刷颜色",
name: this.t('Canvas.BrushColor'),
type: "color",
defaultValue: "#000000",
description: "笔刷的颜色",
category: "基本",
description: this.t('Canvas.BrushDeColor'),
category: this.t('Canvas.basic'),
order: 20,
},
{
id: "opacity",
name: "不透明度",
name: this.t('Canvas.BrushOpacity'),
type: "slider",
defaultValue: 1,
min: 0.05,
max: 1,
step: 0.01,
description: "笔刷的不透明度",
category: "基本",
description: this.t('Canvas.BrushdeOpacity'),
category: this.t('Canvas.basic'),
order: 30,
},
];

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

@@ -33,11 +33,13 @@ export class BrushManager {
* @param {Object} options.canvas fabric.js画布实例
* @param {Object} options.brushStore 笔刷数据存储（可选）
* @param {Object} options.layerManager 图层管理器实例（可选）
* @param {Function} options.t 国际化函数
*/
constructor(options = {}) {
this.canvas = options.canvas;
this.brushStore = options.brushStore || BrushStore;
this.layerManager = options.layerManager; // 添加图层管理器引用
this.t = options.t
// 当前活动笔刷
this.activeBrush = null;
@@ -59,76 +61,89 @@ export class BrushManager {
_registerDefaultBrushes() {
// 注册铅笔笔刷
brushRegistry.register("pencil", PencilBrush, {
name: "Pencil",
name: this.t("Canvas.Pencil"),
description: "基础铅笔工具，适合精细线条绘制",
category: "基础笔刷",
t:this.t,
category: this.t('Canvas.BasicBrushes'),
});
// 注册材质笔刷
brushRegistry.register("texture", TextureBrush, {
name: "Texture",
name: this.t("Canvas.Texture"),
description: "使用纹理图片作为笔刷，支持缩放和透明度",
category: "基础笔刷",
t:this.t,
category: this.t('Canvas.BasicBrushes'),
});
// 注册集成的笔刷类型
brushRegistry.register("crayon", CrayonBrush, {
name: "Crayon",
name: this.t("Canvas.Crayon"),
description: "使用纹理图片作为笔刷，支持缩放和透明度",
category: "基础笔刷",
t:this.t,
category: this.t('Canvas.BasicBrushes'),
});
brushRegistry.register("fur", FurBrush, {
name: "Fur",
name: this.t("Canvas.Fur"),
description: "使用纹理图片作为笔刷，支持缩放和透明度",
category: "基础笔刷",
t:this.t,
category: this.t('Canvas.BasicBrushes'),
});
brushRegistry.register("ink", InkBrush, {
name: "Ink",
name: this.t("Canvas.Ink"),
description: "墨水笔刷，适合书写和绘图",
category: "基础笔刷",
t:this.t,
category: this.t('Canvas.BasicBrushes'),
});
brushRegistry.register("", LongfurBrush, {
name: "Longfur",
name: this.t("Canvas.Longfur"),
description: "长毛发笔刷，适合绘制动物毛皮、草或头发",
category: "基础笔刷",
t:this.t,
category: this.t('Canvas.BasicBrushes'),
});
brushRegistry.register("writing", WritingBrush, {
name: "Writing",
name: this.t("Canvas.Writing"),
description: "书法笔刷，模拟中国传统书法毛笔效果，具有笔锋和墨色变化",
category: "基础笔刷",
t:this.t,
category: this.t('Canvas.BasicBrushes'),
});
brushRegistry.register("marker", MarkerBrush, {
name: "Marker",
name: this.t("Canvas.Marker"),
description: "马克笔笔刷，适合粗线条和填充",
category: "基础笔刷",
t:this.t,
category: this.t('Canvas.BasicBrushes'),
});
brushRegistry.register("pen", CustomPenBrush, {
name: "Pen",
name: this.t("Canvas.Pen"),
description: "自定义钢笔笔刷，适合书写和绘图",
category: "基础笔刷",
t:this.t,
category: this.t('Canvas.BasicBrushes'),
});
brushRegistry.register("ribbon", RibbonBrush, {
name: "Ribbon",
name: this.t("Canvas.Ribbon"),
description: "丝带笔刷，适合创建流动的丝带效果",
category: "基础笔刷",
t:this.t,
category: this.t('Canvas.BasicBrushes'),
});
brushRegistry.register("shaded", ShadedBrush, {
name: "Shaded",
name: this.t("Canvas.Shaded"),
description: "阴影笔刷，适合创建渐变和阴影效果",
category: "基础笔刷",
t:this.t,
category: this.t('Canvas.BasicBrushes'),
});
brushRegistry.register("spray", SprayBrush, {
name: "spray",
name: this.t("Canvas.Spray"),
description: "模拟喷枪效果，创建散点效果",
category: "基础笔刷",
t:this.t,
category: this.t('Canvas.BasicBrushes'),
});
// brushRegistry.register("sketchy", SketchyBrush);
// brushRegistry.register("spraypaint", SpraypaintBrush, {
// name: "Spraypaint",
// description: "喷漆笔刷，模拟喷漆效果",
// category: "基础笔刷",
// t:this.t,
// category: this.t('Canvas.BasicBrushes'),
// });
// // // 注册喷枪笔刷
@@ -140,7 +155,7 @@ export class BrushManager {
// id: "spray",
// name: "Spray",
// description: "模拟喷枪效果，创建散点效果",
// category: "基础笔刷",
// category: this.t('Canvas.BasicBrushes'),
// ...options,
// });
// }

35
src/component/Canvas/CanvasEditor/managers/brushes/types/CrayonBrush.js
View File

@@ -13,9 +13,9 @@ export class CrayonBrush extends BaseBrush {
constructor(canvas, options = {}) {
super(canvas, {
id: "crayon",
name: "蜡笔",
name: options.t("Canvas.Crayon"),
description: "模拟蜡笔效果，具有颗粒感和纹理",
category: "特效笔刷",
category: options.t("Canvas.SpecialEffectsBrush"),
icon: "crayon",
...options,
});
@@ -27,6 +27,7 @@ export class CrayonBrush extends BaseBrush {
this._inkAmount = options._inkAmount || 10;
this.randomness = options.randomness || 0.5; // 随机性
this.texture = options.texture || "default"; // 纹理类型
this.t = options.t
}
/**
@@ -149,52 +150,52 @@ export class CrayonBrush extends BaseBrush {
const crayonProperties = [
{
id: "separation",
name: "颗粒分离度",
name: this.t('Canvas.ParticleSeparationDegree'),
type: "slider",
defaultValue: this._sep,
min: 0.5,
max: 10,
step: 0.5,
description: "控制蜡笔颗粒的分离程度",
category: "蜡笔设置",
description: this.t('Canvas.ParticleSeparationDegreeDescription'),
category: this.t('Canvas.PencilSettings'),
order: 100,
},
{
id: "inkAmount",
name: "墨量",
name: this.t('Canvas.TheAmountOfInk'),
type: "slider",
defaultValue: this._inkAmount,
min: 1,
max: 50,
step: 1,
description: "控制蜡笔的颜料量",
category: "蜡笔设置",
description: this.t('Canvas.TheAmountOfInkDescription'),
category: this.t('Canvas.PencilSettings'),
order: 110,
},
{
id: "randomness",
name: "随机性",
name: this.t('Canvas.randomness'),
type: "slider",
defaultValue: this.randomness,
min: 0,
max: 1,
step: 0.05,
description: "控制蜡笔纹理的随机程度",
category: "蜡笔设置",
description: this.t('Canvas.randomnessDescription'),
category: this.t('Canvas.PencilSettings'),
order: 120,
},
{
id: "texture",
name: "纹理类型",
name: this.t('Canvas.TextureType'),
type: "select",
defaultValue: this.texture,
options: [
{ value: "default", label: "默认" },
{ value: "rough", label: "粗糙" },
{ value: "smooth", label: "平滑" },
{ value: "default", label: this.t('Canvas.Default') },
{ value: "rough", label: this.t('Canvas.Rough') },
{ value: "smooth", label: this.t('Canvas.Smooth') },
],
description: "设置蜡笔的纹理类型",
category: "蜡笔设置",
description: this.t('Canvas.TextureTypeDescription'),
category: this.t('Canvas.PencilSettings'),
order: 130,
},
];

22
src/component/Canvas/CanvasEditor/managers/brushes/types/CustomPenBrush.js
View File

@@ -13,9 +13,9 @@ export class CustomPenBrush extends BaseBrush {
constructor(canvas, options = {}) {
super(canvas, {
id: "pen",
name: "钢笔",
name: options.t('Canvas.Pen'),
description: "模拟钢笔效果，具有变化的透明度",
category: "基础笔刷",
category: options.t('Canvas.BasicBrushes'),
icon: "pen",
...options,
});
@@ -115,38 +115,38 @@ export class CustomPenBrush extends BaseBrush {
const penProperties = [
{
id: "lineWidth",
name: "线条宽度",
name: this.t('Canvas.PenWidth'),
type: "slider",
defaultValue: this._lineWidth,
min: 1,
max: 10,
step: 0.5,
description: "控制钢笔线条的宽度",
category: "钢笔设置",
description: this.t('Canvas.PenWidthDescription'),
category: this.t('Canvas.PenSettings'),
order: 100,
},
{
id: "inkOpacityMin",
name: "最小墨水透明度",
name: this.t('Canvas.PenMinimumInkTransparency'),
type: "slider",
defaultValue: this.inkOpacityMin,
min: 0.1,
max: 0.5,
step: 0.05,
description: "控制钢笔墨水最小透明度",
category: "钢笔设置",
description: this.t('Canvas.PenMinimumInkTransparencyDescription'),
category: this.t('Canvas.PenSettings'),
order: 110,
},
{
id: "inkOpacityMax",
name: "最大墨水透明度",
name: this.t('Canvas.PenMaximumInkTransparency'),
type: "slider",
defaultValue: this.inkOpacityMax,
min: 0.3,
max: 1,
step: 0.05,
description: "控制钢笔墨水最大透明度",
category: "钢笔设置",
description: this.t('Canvas.PenMaximumInkTransparencyDescription'),
category: this.t('Canvas.PenSettings'),
order: 120,
},
];

22
src/component/Canvas/CanvasEditor/managers/brushes/types/FurBrush.js
View File

@@ -13,9 +13,9 @@ export class FurBrush extends BaseBrush {
constructor(canvas, options = {}) {
super(canvas, {
id: "fur",
name: "毛发笔刷",
name: options.t('Canvas.Longfur'),
description: "创建类似于毛发或草的纹理效果",
category: "特效笔刷",
category: options.t('Canvas.SpecialEffectsBrush'),
icon: "fur",
...options,
});
@@ -123,38 +123,38 @@ export class FurBrush extends BaseBrush {
const furProperties = [
{
id: "furLength",
name: "毛发长度",
name: this.t('Canvas.FurLength'),
type: "slider",
defaultValue: this.furLength,
min: 1,
max: 50,
step: 1,
description: "控制毛发的长度",
category: "毛发设置",
description: this.t('Canvas.FurLengthDescription'),
category: this.t('Canvas.FurSettings'),
order: 100,
},
{
id: "furDensity",
name: "毛发密度",
name: this.t('Canvas.FurDensity'),
type: "slider",
defaultValue: this.furDensity,
min: 0.1,
max: 1,
step: 0.05,
description: "控制毛发的密度",
category: "毛发设置",
description: this.t('Canvas.FurDensityDescription'),
category: this.t('Canvas.FurSettings'),
order: 110,
},
{
id: "furRandomness",
name: "随机性",
name: this.t('Canvas.FurRandomness'),
type: "slider",
defaultValue: this.furRandomness,
min: 0,
max: 1,
step: 0.05,
description: "控制毛发的随机分布程度",
category: "毛发设置",
description: this.t('Canvas.FurRandomnessDescription'),
category: this.t('Canvas.FurSettings'),
order: 120,
},
];

35
src/component/Canvas/CanvasEditor/managers/brushes/types/InkBrush.js
View File

@@ -13,9 +13,9 @@ export class InkBrush extends BaseBrush {
constructor(canvas, options = {}) {
super(canvas, {
id: "ink",
name: "水墨笔刷",
name: options.t('Canvas.Ink'),
description: "模拟中国传统水墨画效果，墨色深浅不一",
category: "特效笔刷",
category: options.t('Canvas.SpecialEffectsBrush'),
icon: "ink",
...options,
});
@@ -27,6 +27,7 @@ export class InkBrush extends BaseBrush {
this.splashEnabled = options.splashEnabled !== undefined ? options.splashEnabled : true;
this.splashSize = options.splashSize || 5;
this.splashDistance = options.splashDistance || 30;
this.t = options.t
}
/**
@@ -159,60 +160,60 @@ export class InkBrush extends BaseBrush {
const inkProperties = [
{
id: "inkAmount",
name: "墨量",
name: this.t('Canvas.InkAmount'),
type: "slider",
defaultValue: this._inkAmount,
min: 1,
max: 20,
step: 1,
description: "控制水墨的浓度",
category: "水墨设置",
description: this.t('Canvas.InkAmountDescription'),
category: this.t('Canvas.InkSettings'),
order: 100,
},
{
id: "range",
name: "笔触范围",
name: this.t('Canvas.InkRange'),
type: "slider",
defaultValue: this._range,
min: 5,
max: 50,
step: 1,
description: "控制水墨扩散的范围",
category: "水墨设置",
description: this.t('Canvas.InkRangeDescription'),
category: this.t('Canvas.InkSettings'),
order: 110,
},
{
id: "splashEnabled",
name: "溅墨效果",
name: this.t('Canvas.InkSplashEnabled'),
type: "checkbox",
defaultValue: this.splashEnabled,
description: "是否启用溅墨效果",
category: "水墨设置",
description: this.t('Canvas.InkSplashEnabledDescription'),
category: this.t('Canvas.InkSettings'),
order: 120,
},
{
id: "splashSize",
name: "溅墨大小",
name: this.t('Canvas.InkSize'),
type: "slider",
defaultValue: this.splashSize,
min: 1,
max: 20,
step: 1,
description: "溅墨点的大小",
category: "水墨设置",
description: this.t('Canvas.InkSizeDescription'),
category: this.t('Canvas.InkSettings'),
order: 130,
visibleWhen: { splashEnabled: true },
},
{
id: "splashDistance",
name: "溅墨距离",
name: this.t('Canvas.InkRandomness'),
type: "slider",
defaultValue: this.splashDistance,
min: 10,
max: 100,
step: 5,
description: "溅墨可扩散的最大距离",
category: "水墨设置",
description: this.t('Canvas.InkRandomnessDescription'),
category: this.t('Canvas.InkSettings'),
order: 140,
visibleWhen: { splashEnabled: true },
},

34
src/component/Canvas/CanvasEditor/managers/brushes/types/LongfurBrush.js
View File

@@ -13,9 +13,9 @@ export class LongfurBrush extends BaseBrush {
constructor(canvas, options = {}) {
super(canvas, {
id: "longfur",
name: "长毛发",
name: options.t('Canvas.Longfur'),
description: "创建流动的长毛发效果，适合绘制动物毛皮、草或头发",
category: "特效笔刷",
category: options.t('Canvas.SpecialEffectsBrush'),
icon: "longfur",
...options,
});
@@ -198,59 +198,59 @@ export class LongfurBrush extends BaseBrush {
const longfurProperties = [
{
id: "furLength",
name: "毛发长度",
name: this.t('Canvas.FurLength'),
type: "slider",
defaultValue: this.furLength,
min: 5,
max: 100,
step: 1,
description: "控制毛发的长度",
category: "长毛发设置",
description: this.t('Canvas.FurLengthDescription'),
category: this.t('Canvas.LongfurSettings'),
order: 100,
},
{
id: "furDensity",
name: "毛发密度",
name: this.t('Canvas.FurDensity'),
type: "slider",
defaultValue: this.furDensity,
min: 0.1,
max: 1,
step: 0.05,
description: "控制毛发的密度",
category: "长毛发设置",
description: this.t('Canvas.FurDensityDescription'),
category: this.t('Canvas.LongfurSettings'),
order: 110,
},
{
id: "furFlowFactor",
name: "流动系数",
name: this.t('Canvas.FlowCoefficient'),
type: "slider",
defaultValue: this.furFlowFactor,
min: 0,
max: 1,
step: 0.05,
description: "控制毛发的流动感",
category: "长毛发设置",
description: this.t('Canvas.FlowCoefficientDescription'),
category: this.t('Canvas.LongfurSettings'),
order: 120,
},
{
id: "furCurvature",
name: "弯曲度",
name: this.t('Canvas.furCurvature'),
type: "slider",
defaultValue: this.furCurvature,
min: 0,
max: 1,
step: 0.05,
description: "控制毛发的弯曲程度",
category: "长毛发设置",
description: this.t('Canvas.furCurvatureDescription'),
category: this.t('Canvas.LongfurSettings'),
order: 130,
},
{
id: "randomizeDirection",
name: "随机方向",
name: this.t('Canvas.randomizeDirection'),
type: "checkbox",
defaultValue: this.randomizeDirection,
description: "是否随机化毛发方向",
category: "长毛发设置",
description: this.t('Canvas.randomizeDirectionDescription'),
category: this.t('Canvas.LongfurSettings'),
order: 140,
},
];

30
src/component/Canvas/CanvasEditor/managers/brushes/types/MarkerBrush.js
View File

@@ -13,9 +13,9 @@ export class MarkerBrush extends BaseBrush {
constructor(canvas, options = {}) {
super(canvas, {
id: "marker",
name: "马克笔",
name: options.t("Canva.Marker"),
description: "模拟马克笔效果，具有半透明平头笔触",
category: "基础笔刷",
category: options.t("Canvas.BasicBrushes"),
icon: "marker",
...options,
});
@@ -150,40 +150,40 @@ export class MarkerBrush extends BaseBrush {
const markerProperties = [
{
id: "lineWidth",
name: "笔触宽度",
name: this.t('Canvas.MarkerWidth'),
type: "slider",
defaultValue: this._lineWidth,
min: 1,
max: 10,
step: 0.5,
description: "控制马克笔笔触的宽度",
category: "马克笔设置",
description: this.t('Canvas.MarkerWidthDescription'),
category: this.t('Canvas.MarkerSettings'),
order: 100,
},
{
id: "capStyle",
name: "笔头样式",
name: this.t('Canvas.MarkerCapStyle'),
type: "select",
defaultValue: this.capStyle,
options: [
{ value: "round", label: "圆形" },
{ value: "square", label: "方形" },
{ value: "round", label: this.t('Canvas.MarkerCapStyleRound') },
{ value: "square", label: this.t('Canvas.MarkerCapStyleSquare') },
],
description: "设置马克笔笔头的形状",
category: "马克笔设置",
description: this.t('Canvas.MarkerCapStyleDescription'),
category: this.t('Canvas.MarkerSettings'),
order: 110,
},
{
id: "blendMode",
name: "混合模式",
name: this.t('Canvas.MarkerMixedModel'),
type: "select",
defaultValue: this.blendMode,
options: [
{ value: "multiply", label: "正片叠底" },
{ value: "normal", label: "正常" },
{ value: "multiply", label: this.t('Canvas.MarkerMixedModelMultiply') },
{ value: "normal", label: this.t('Canvas.MarkerMixedModelNormal') },
],
description: "设置马克笔的颜色混合方式",
category: "马克笔设置",
description: this.t('Canvas.MarkerMixedModelDescription'),
category: this.t('Canvas.MarkerSettings'),
order: 120,
},
];

40
src/component/Canvas/CanvasEditor/managers/brushes/types/RibbonBrush.js
View File

@@ -13,9 +13,9 @@ export class RibbonBrush extends BaseBrush {
constructor(canvas, options = {}) {
super(canvas, {
id: "ribbon",
name: "飘带",
name: options.t('Canvas.Ribbon'),
description: "创建流畅的飘带状线条，具有动态宽度变化和曲线美感",
category: "特效笔刷",
category: options.t('Canvas.SpecialEffectsBrush'),
icon: "ribbon",
...options,
});
@@ -237,66 +237,66 @@ export class RibbonBrush extends BaseBrush {
const ribbonProperties = [
{
id: "ribbonWidth",
name: "飘带宽度",
name: this.t('Canvas.RibbonWidth'),
type: "slider",
defaultValue: this.ribbonWidth,
min: 5,
max: 100,
step: 5,
description: "控制飘带的最大宽度",
category: "飘带设置",
description: this.t('Canvas.RibbonWidthDescription'),
category: this.t('Canvas.RibbonSettings'),
order: 100,
},
{
id: "widthVariation",
name: "宽度变化",
name: this.t('Canvas.RibbonVariation'),
type: "slider",
defaultValue: this.widthVariation,
min: 0,
max: 1,
step: 0.05,
description: "控制飘带宽度的变化程度",
category: "飘带设置",
description: this.t('Canvas.RibbonVariationDescription'),
category: this.t('Canvas.RibbonSettings'),
order: 110,
},
{
id: "ribbonSmoothness",
name: "平滑度",
name: this.t('Canvas.RibbonSmoothness'),
type: "slider",
defaultValue: this.ribbonSmoothness,
min: 0,
max: 1,
step: 0.05,
description: "控制飘带曲线的平滑程度",
category: "飘带设置",
description: this.t('Canvas.RibbonSmoothnessDescription'),
category: this.t('Canvas.RibbonSettings'),
order: 120,
},
{
id: "gradient",
name: "启用渐变",
name: this.t('Canvas.RibbonGradient'),
type: "checkbox",
defaultValue: this.gradient,
description: "是否启用渐变效果",
category: "飘带设置",
description: this.t('Canvas.RibbonGradientDescription'),
category: this.t('Canvas.RibbonSettings'),
order: 130,
},
{
id: "gradientColor1",
name: "渐变起始颜色",
name: this.t('Canvas.RibbonGradientColor1'),
type: "color",
defaultValue: this.gradientColors[0] || "#000000",
description: "设置渐变的起始颜色",
category: "飘带设置",
description: this.t('Canvas.RibbonGradientColor1Description'),
category: this.t('Canvas.RibbonSettings'),
order: 140,
visibleWhen: { gradient: true },
},
{
id: "gradientColor2",
name: "渐变结束颜色",
name: this.t('Canvas.RibbonGradientColor2'),
type: "color",
defaultValue: this.gradientColors[1] || "#555555",
description: "设置渐变的结束颜色",
category: "飘带设置",
description: this.t('Canvas.RibbonGradientColor2Description'),
category: this.t('Canvas.RibbonSettings'),
order: 150,
visibleWhen: { gradient: true },
},

58
src/component/Canvas/CanvasEditor/managers/brushes/types/ShadedBrush.js
View File

@@ -13,9 +13,9 @@ export class ShadedBrush extends BaseBrush {
constructor(canvas, options = {}) {
super(canvas, {
id: "shaded",
name: "阴影笔",
name: options.t('Canvas.Shaded'),
description: "创建带有阴影效果的绘制，适合素描和明暗表现",
category: "绘画笔刷",
category: options.t('Canvas.PaintingBrush'),
icon: "shaded",
...options,
});
@@ -246,70 +246,70 @@ export class ShadedBrush extends BaseBrush {
const shadedProperties = [
{
id: "shadowColor",
name: "阴影颜色",
name: this.t('Canvas.ShadedColor'),
type: "color",
defaultValue: this.shadowColor,
description: "设置阴影的颜色",
category: "阴影设置",
description: this.t('Canvas.ShadedColorDescription'),
category: this.t('Canvas.ShadedSettings'),
order: 100,
},
{
id: "shadowBlur",
name: "阴影模糊",
name: this.t('Canvas.ShadedBlur'),
type: "slider",
defaultValue: this.shadowBlur,
min: 0,
max: 50,
step: 1,
description: "控制阴影的模糊程度",
category: "阴影设置",
description: this.t('Canvas.ShadedBlurDescription'),
category: this.t('Canvas.ShadedSettings'),
order: 110,
},
{
id: "shadowOffsetX",
name: "阴影X偏移",
name: this.t('Canvas.ShadedOffsetX'),
type: "slider",
defaultValue: this.shadowOffsetX,
min: -20,
max: 20,
step: 1,
description: "控制阴影的水平偏移",
category: "阴影设置",
description: this.t('Canvas.ShadedOffsetXDescription'),
category: this.t('Canvas.ShadedSettings'),
order: 120,
},
{
id: "shadowOffsetY",
name: "阴影Y偏移",
name: this.t('Canvas.ShadedOffsetY'),
type: "slider",
defaultValue: this.shadowOffsetY,
min: -20,
max: 20,
step: 1,
description: "控制阴影的垂直偏移",
category: "阴影设置",
description: this.t('Canvas.ShadedOffsetYDescription'),
category: this.t('Canvas.ShadedSettings'),
order: 130,
},
{
id: "blendMode",
name: "混合模式",
name: this.t('Canvas.ShadedBlendMode'),
type: "select",
defaultValue: this.blendMode,
options: [
{ value: "normal", label: "正常" },
{ value: "multiply", label: "正片叠底" },
{ value: "screen", label: "滤色" },
{ value: "overlay", label: "叠加" },
{ value: "darken", label: "变暗" },
{ value: "lighten", label: "变亮" },
{ value: "color-dodge", label: "颜色减淡" },
{ value: "color-burn", label: "颜色加深" },
{ value: "hard-light", label: "强光" },
{ value: "soft-light", label: "柔光" },
{ value: "difference", label: "差值" },
{ value: "exclusion", label: "排除" },
{ value: "normal", label: this.t('Canvas.ShadedMixedModelNormal') },
{ value: "multiply", label: this.t('Canvas.ShadedMixedModelMultiply') },
{ value: "screen", label: this.t('Canvas.ShadedMixedModelScreen') },
{ value: "overlay", label: this.t('Canvas.ShadedMixedModelOverlay') },
{ value: "darken", label: this.t('Canvas.ShadedMixedModelDarken') },
{ value: "lighten", label: this.t('Canvas.ShadedMixedModelLighten') },
{ value: "color-dodge", label: this.t('Canvas.ShadedMixedModelColorDodge') },
{ value: "color-burn", label: this.t('Canvas.ShadedMixedModelColorBurn') },
{ value: "hard-light", label: this.t('Canvas.ShadedMixedModelHardLight') },
{ value: "soft-light", label: this.t('Canvas.ShadedMixedModelSoftLight') },
{ value: "difference", label: this.t('Canvas.ShadedMixedModelDifference') },
{ value: "exclusion", label: this.t('Canvas.ShadedMixedModelExclusion') },
],
description: "设置阴影的混合模式",
category: "阴影设置",
description: this.t('Canvas.ShadedBlendModeDescription'),
category: this.t('Canvas.ShadedSettings'),
order: 140,
},
];

34
src/component/Canvas/CanvasEditor/managers/brushes/types/SprayBrush.js
View File

@@ -13,9 +13,9 @@ export class SprayBrush extends BaseBrush {
constructor(canvas, options = {}) {
super(canvas, {
id: "crayon",
name: "喷枪",
name: options.t('Canvas.Spray'),
description: "模拟喷枪效果，具有颗粒感和纹理",
category: "特效笔刷",
category: options.t('Canvas.SpecialEffectsBrush'),
icon: "crayon",
...options,
});
@@ -151,52 +151,52 @@ export class SprayBrush extends BaseBrush {
const crayonProperties = [
{
id: "separation",
name: "颗粒分离度",
name: this.t('Canvas.ParticleSeparationDegree'),
type: "slider",
defaultValue: this._sep,
min: 0.5,
max: 10,
step: 0.5,
description: "控制喷枪颗粒的分离程度",
category: "喷枪设置",
description: this.t('Canvas.ParticleSeparationDegree'),
category: this.t('Canvas.SpraySettings'),
order: 100,
},
{
id: "inkAmount",
name: "墨量",
name: this.t('Canvas.TheAmountOfInk'),
type: "slider",
defaultValue: this._inkAmount,
min: 1,
max: 50,
step: 1,
description: "控制喷枪的颜料量",
category: "喷枪设置",
description: this.t('Canvas.TheAmountOfInkDescription'),
category: this.t('Canvas.SpraySettings'),
order: 110,
},
{
id: "randomness",
name: "随机性",
name: this.t('Canvas.randomness'),
type: "slider",
defaultValue: this.randomness,
min: 0,
max: 1,
step: 0.05,
description: "控制喷枪纹理的随机程度",
category: "喷枪设置",
description: this.t('Canvas.randomnessDescription'),
category: this.t('Canvas.SpraySettings'),
order: 120,
},
{
id: "texture",
name: "纹理类型",
name: this.t('Canvas.TextureType'),
type: "select",
defaultValue: this.texture,
options: [
{ value: "default", label: "默认" },
{ value: "rough", label: "粗糙" },
{ value: "smooth", label: "平滑" },
{ value: "default", label: this.t('Canvas.Default') },
{ value: "rough", label: this.t('Canvas.Rough') },
{ value: "smooth", label: this.t('Canvas.Smooth') },
],
description: "设置喷枪的纹理类型",
category: "喷枪设置",
description: this.t('Canvas.TextureTypeDescription'),
category: this.t('Canvas.SpraySettings'),
order: 130,
},
];

28
src/component/Canvas/CanvasEditor/managers/brushes/types/WritingBrush.js
View File

@@ -13,9 +13,9 @@ export class WritingBrush extends BaseBrush {
constructor(canvas, options = {}) {
super(canvas, {
id: "writing",
name: "书法笔",
name: options.t('Canvas.Writing'),
description: "模拟中国传统书法毛笔效果，具有笔锋和墨色变化",
category: "特效笔刷",
category: options.t('Canvas.SpecialEffectsBrush'),
icon: "writing",
...options,
});
@@ -174,47 +174,47 @@ export class WritingBrush extends BaseBrush {
const writingProperties = [
{
id: "brushPressure",
name: "笔压感应",
name: this.t('Canvas.WritingBrushPressure'),
type: "slider",
defaultValue: this.brushPressure,
min: 0.1,
max: 1,
step: 0.05,
description: "控制笔触的力度感应",
category: "书法设置",
description: this.t('Canvas.WritingBrushPressureDescription'),
category: this.t('Canvas.WritingSettings'),
order: 100,
},
{
id: "inkAmount",
name: "墨量",
name: this.t('Canvas.WritingAmount'),
type: "slider",
defaultValue: this.inkAmount,
min: 1,
max: 50,
step: 1,
description: "控制笔触中的墨水量",
category: "书法设置",
description: this.t('Canvas.WritingAmountDescription'),
category: this.t('Canvas.WritingSettings'),
order: 110,
},
{
id: "brushTaperFactor",
name: "笔锋系数",
name: this.t('Canvas.WritingPenTipCoefficient'),
type: "slider",
defaultValue: this.brushTaperFactor,
min: 0,
max: 1,
step: 0.05,
description: "控制笔锋的尖锐程度",
category: "书法设置",
description: this.t('Canvas.WritingPenTipCoefficientDescription'),
category: this.t('Canvas.WritingSettings'),
order: 120,
},
{
id: "enableInkDripping",
name: "墨滴效果",
name: this.t('Canvas.WritingDropEffect'),
type: "checkbox",
defaultValue: this.enableInkDripping,
description: "是否启用墨滴效果",
category: "书法设置",
description: this.t('Canvas.WritingDropEffectDescription'),
category: this.t('Canvas.WritingSettings'),
order: 130,
},
];