Skip to content

Commit 36f1ecc

Browse files
huanghaiyanghuanghaiyang
committed
refactor(渲染): 重构蒙版渲染任务以支持动态样式配置
- 将硬编码的样式配置改为通过构造函数参数传递 - 在MaskRenderer中统一处理样式缩放逻辑 - 更新ElementStyles类型定义以支持文本样式 - 修改CanvasUtils.drawCommonRotateText方法以使用样式中的文本配置 - 移除MaskStyles中不再使用的样式常量 ``` 这个提交信息遵循了以下原则： 1. 使用refactor类型，因为这是对现有代码结构的重构 2. 添加了scope(渲染)以明确修改范围 3. 描述简明扼要，说明了主要修改内容 4. 在body中列出了关键修改点，没有重复描述 5. 使用中文并保持简洁
1 parent 6d42239 commit 36f1ecc

File tree

12 files changed

+64
-61
lines changed

12 files changed

+64
-61
lines changed

‎src/modules/elements/ElementRect.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default class ElementRect extends Element implements IElementRect {
2626
}
2727

2828
get cornersEnable(): boolean {
29-
return true;
29+
return this.status === ElementStatus.finished;
3030
}
3131

3232
get cornerControllers(): ICornerController[] {

‎src/modules/render/mask/task/MaskTaskBase.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import RenderTaskBase from "@/modules/render/RenderTaskBase";
2+
import { ElementStyles } from "@/styles/ElementStyles";
23
import { IMaskModel } from "@/types/IModel";
34
import { IMaskTask } from "@/types/IRenderTask";
45

@@ -7,11 +8,14 @@ export default abstract class MaskTaskBase extends RenderTaskBase implements IMa
78
model: IMaskModel;
89
// 画布
910
canvas: HTMLCanvasElement;
11+
// 样式
12+
styles?: ElementStyles;
1013

11-
constructor(model: IMaskModel, canvas: HTMLCanvasElement) {
14+
constructor(model: IMaskModel, canvas: HTMLCanvasElement, styles?: ElementStyles) {
1215
super();
1316
this.model = model;
1417
this.canvas = canvas;
18+
this.styles = styles;
1519
}
1620

1721
destroy(): Promise<void> {

‎src/modules/render/mask/task/MaskTaskCircleTransformer.ts

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import ElementUtils from "@/modules/elements/utils/ElementUtils";
22
import MaskTaskBase from "@/modules/render/mask/task/MaskTaskBase";
3-
import { ControllerStyle } from "@/styles/MaskStyles";
43
import CanvasUtils from "@/utils/CanvasUtils";
54

65
export default class MaskTaskCircleTransformer extends MaskTaskBase {
@@ -9,17 +8,8 @@ export default class MaskTaskCircleTransformer extends MaskTaskBase {
98
*/
109
async run(): Promise<void> {
1110
if (!this.canvas || !this.model) return;
12-
13-
let { point } = this.model;
14-
11+
let { point, radius } = this.model;
1512
if (!point) return;
16-
let { radius } = this.model;
17-
// 描边样式
18-
const strokeStyle = { ...ControllerStyle.strokes[0] };
19-
// 保证描边宽度在不同缩放下保持一致
20-
strokeStyle.width /= CanvasUtils.scale;
21-
// 填充样式
22-
const fillStyle = { ...ControllerStyle.fills[0] };
2313
// 保证半径在不同缩放下保持一致
2414
radius /= CanvasUtils.scale;
2515
// 转换为舞台坐标
@@ -33,7 +23,7 @@ export default class MaskTaskCircleTransformer extends MaskTaskBase {
3323
rx: radius,
3424
ry: radius,
3525
},
36-
fillStyle,
26+
this.styles?.fills[0],
3727
);
3828

3929
// 绘制描边
@@ -44,7 +34,7 @@ export default class MaskTaskCircleTransformer extends MaskTaskBase {
4434
rx: radius,
4535
ry: radius,
4636
},
47-
strokeStyle,
37+
this.styles?.strokes[0],
4838
);
4939
}
5040
}

‎src/modules/render/mask/task/MaskTaskCursorPosition.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import MaskTaskBase from "@/modules/render/mask/task/MaskTaskBase";
22
import CanvasUtils from "@/utils/CanvasUtils";
3-
import { CursorPositionStyle } from "@/styles/MaskStyles";
43
import ElementUtils from "@/modules/elements/utils/ElementUtils";
54

65
export default class MaskTaskCursorPosition extends MaskTaskBase {
@@ -15,6 +14,6 @@ export default class MaskTaskCursorPosition extends MaskTaskBase {
1514
if (!point) return;
1615
// 转换为舞台坐标
1716
point = ElementUtils.calcStageRelativePoint(point);
18-
await CanvasUtils.drawCommonRotateTextWithScale(this.canvas, text, point, CursorPositionStyle, CursorPositionStyle.fills[0]);
17+
await CanvasUtils.drawCommonRotateTextWithScale(this.canvas, text, point, this.styles);
1918
}
2019
}

‎src/modules/render/mask/task/MaskTaskIndicator.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import MaskTaskBase from "@/modules/render/mask/task/MaskTaskBase";
22
import CanvasUtils from "@/utils/CanvasUtils";
3-
import { SelectionIndicatorBgStyle, SelectionIndicatorStyle, SelectionIndicatorTextStyle } from "@/styles/MaskStyles";
43
import ElementUtils from "@/modules/elements/utils/ElementUtils";
54
import CommonUtils from "@/utils/CommonUtils";
65
import ElementRenderHelper from "@/modules/elements/utils/ElementRenderHelper";
@@ -17,7 +16,7 @@ export default class MaskTaskIndicator extends MaskTaskBase {
1716
async run(): Promise<void> {
1817
if (!this.canvas || !this.model) return;
1918
let { text, point, angle } = this.model;
20-
let { width, fontBoundingBoxDescent, fontBoundingBoxAscent } = CanvasUtils.measureText(this.canvas.getContext("2d"), text, SelectionIndicatorStyle);
19+
let { width, fontBoundingBoxDescent, fontBoundingBoxAscent } = CanvasUtils.measureText(this.canvas.getContext("2d"), text, this.styles);
2120
let height = fontBoundingBoxDescent + fontBoundingBoxAscent + Padding * 2;
2221
width += Padding * 2;
2322
width /= CanvasUtils.scale;
@@ -32,7 +31,7 @@ export default class MaskTaskIndicator extends MaskTaskBase {
3231
point,
3332
);
3433
const renderOptions = { angle };
35-
CanvasUtils.drawInnerArcPathFillWithScale(this.canvas, renderRect, arcPoints, SelectionIndicatorBgStyle, renderOptions);
36-
CanvasUtils.drawCommonRotateTextWithScale(this.canvas, text, MathUtils.translate(point, { x: 0, y: 1 }), SelectionIndicatorStyle, SelectionIndicatorTextStyle, renderOptions);
34+
CanvasUtils.drawInnerArcPathFillWithScale(this.canvas, renderRect, arcPoints, this.styles.fills[0], renderOptions);
35+
CanvasUtils.drawCommonRotateTextWithScale(this.canvas, text, MathUtils.translate(point, { x: 0, y: 1 }), this.styles, renderOptions);
3736
}
3837
}

‎src/modules/render/mask/task/MaskTaskPath.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import MaskTaskBase from "@/modules/render/mask/task/MaskTaskBase";
22
import CanvasUtils from "@/utils/CanvasUtils";
3-
import { SelectionStyle } from "@/styles/MaskStyles";
43
import { DrawerMaskModelTypes } from "@/types";
54
import { ElementStyles } from "@/styles/ElementStyles";
65
import ElementUtils from "@/modules/elements/utils/ElementUtils";
@@ -12,7 +11,6 @@ export default class MaskTaskPath extends MaskTaskBase {
1211
async run(): Promise<void> {
1312
if (!this.canvas || !this.model) return;
1413

15-
const { width } = SelectionStyle.strokes[0];
1614
const specialStyles: ElementStyles = {};
1715
let { points } = this.model;
1816
points = ElementUtils.calcStageRelativePoints(points);
@@ -27,11 +25,8 @@ export default class MaskTaskPath extends MaskTaskBase {
2725
CanvasUtils.drawPathWithScale(
2826
this.canvas,
2927
points,
30-
{},
31-
{
32-
...SelectionStyle.strokes[0],
33-
width: width / CanvasUtils.scale,
34-
},
28+
specialStyles.fills?.[0] ?? this.styles.fills[0],
29+
this.styles.strokes[0],
3530
{
3631
isFold: typeof this.model.element?.isFold === "undefined" ? true : this.model.element?.isFold,
3732
},

‎src/modules/render/mask/task/MaskTaskTransformer.ts

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import MaskTaskBase from "@/modules/render/mask/task/MaskTaskBase";
22
import CanvasUtils from "@/utils/CanvasUtils";
33
import CommonUtils from "@/utils/CommonUtils";
4-
import { TransformerSize, ControllerStyle } from "@/styles/MaskStyles";
4+
import { TransformerSize } from "@/styles/MaskStyles";
55
import ElementUtils from "@/modules/elements/utils/ElementUtils";
66

77
export default class MaskTaskTransformer extends MaskTaskBase {
@@ -10,7 +10,6 @@ export default class MaskTaskTransformer extends MaskTaskBase {
1010
*/
1111
async run(): Promise<void> {
1212
if (!this.canvas || !this.model) return;
13-
const { width } = ControllerStyle.strokes[0];
1413
let { point, leanYAngle, actualAngle } = this.model;
1514
point = ElementUtils.calcStageRelativePoint(point);
1615

@@ -27,11 +26,8 @@ export default class MaskTaskTransformer extends MaskTaskBase {
2726
leanYAngle,
2827
},
2928
),
30-
ControllerStyle.fills[0],
31-
{
32-
...ControllerStyle.strokes[0],
33-
width: width / CanvasUtils.scale,
34-
},
29+
this.styles.fills[0],
30+
this.styles.strokes[0],
3531
{
3632
calcVertices: false,
3733
},

‎src/modules/render/renderer/drawer/MaskRenderer.ts

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { IDrawerMask } from "@/types/IStageDrawer";
1313
import { IMaskRenderer } from "@/types/IStageRenderer";
1414
import { IMaskModel, IRotationModel } from "@/types/IModel";
1515
import { IRenderTask } from "@/types/IRenderTask";
16-
import { DefaultControllerRadius, SelectionIndicatorMargin } from "@/styles/MaskStyles";
16+
import { ControllerStyle, DefaultControllerRadius, SelectionIndicatorMargin, SelectionIndicatorStyle, SelectionStyle } from "@/styles/MaskStyles";
1717
import MaskTaskCursorPosition from "@/modules/render/mask/task/MaskTaskCursorPosition";
1818
import { CreatorCategories, CreatorTypes } from "@/types/Creator";
1919
import MaskTaskCircleTransformer from "@/modules/render/mask/task/MaskTaskCircleTransformer";
@@ -32,6 +32,8 @@ import { TextSelectionCursorType } from "@/types/IText";
3232
import ElementTaskTextHighlightUnderline from "@/modules/render/shield/task/ElementTaskTextHighlightUnderline";
3333
import { StageShieldElementsStatus } from "@/types/IStageShield";
3434
import GlobalConfig from "@/config";
35+
import { ElementStyles } from "@/styles/ElementStyles";
36+
import LodashUtils from "@/utils/LodashUtils";
3537

3638
/**
3739
* 蒙版渲染器
@@ -46,6 +48,20 @@ export default class MaskRenderer extends BaseRenderer<IDrawerMask> implements I
4648
*/
4749
private _lastSelectionRendered = false;
4850

51+
/**
52+
* 获取控制器样式
53+
*
54+
* @param styles 原始样式
55+
* @returns 处理后的样式
56+
*/
57+
private _getStyle(styles: ElementStyles): ElementStyles {
58+
const result = LodashUtils.jsonClone(styles) as ElementStyles;
59+
result.strokes.forEach((item) => {
60+
item.width /= GlobalConfig.stageParams.scale;
61+
});
62+
return result;
63+
}
64+
4965
/**
5066
* 执行蒙版渲染的主流程
5167
* 1. 创建渲染任务队列
@@ -178,8 +194,7 @@ export default class MaskRenderer extends BaseRenderer<IDrawerMask> implements I
178194
};
179195

180196
// 创建并返回渲染任务
181-
const task = new MaskTaskCursorPosition(model, this.canvas);
182-
return task;
197+
return new MaskTaskCursorPosition(model, this.canvas, SelectionIndicatorStyle);
183198
}
184199

185200
/**
@@ -197,7 +212,7 @@ export default class MaskRenderer extends BaseRenderer<IDrawerMask> implements I
197212
models.forEach(model => {
198213
if (model?.points?.length > 0) {
199214
// 创建缩放适配的路径任务
200-
const task = new MaskTaskPath(model, this.canvas);
215+
const task = new MaskTaskPath(model, this.canvas, this._getStyle(SelectionStyle));
201216
tasks.push(task);
202217
}
203218
});
@@ -228,9 +243,9 @@ export default class MaskRenderer extends BaseRenderer<IDrawerMask> implements I
228243
.map(model => {
229244
switch (model.element.transformerType) {
230245
case TransformerTypes.circle:
231-
return new MaskTaskCircleTransformer(model, this.canvas);
246+
return new MaskTaskCircleTransformer(model, this.canvas, this._getStyle(ControllerStyle));
232247
case TransformerTypes.rect:
233-
return new MaskTaskTransformer(model, this.canvas);
248+
return new MaskTaskTransformer(model, this.canvas, this._getStyle(ControllerStyle));
234249
default:
235250
return null;
236251
}
@@ -262,7 +277,7 @@ export default class MaskRenderer extends BaseRenderer<IDrawerMask> implements I
262277
type: DrawerMaskModelTypes.transformer,
263278
radius: DefaultControllerRadius,
264279
};
265-
return new MaskTaskCircleTransformer(model, this.canvas);
280+
return new MaskTaskCircleTransformer(model, this.canvas, this._getStyle(ControllerStyle));
266281
}
267282
return null;
268283
})
@@ -327,7 +342,7 @@ export default class MaskRenderer extends BaseRenderer<IDrawerMask> implements I
327342
type: DrawerMaskModelTypes.indicator,
328343
text: `${element.width} x ${element.height}`,
329344
};
330-
return new MaskTaskIndicator(model, this.canvas);
345+
return new MaskTaskIndicator(model, this.canvas, SelectionIndicatorStyle);
331346
}
332347

333348
/**
@@ -343,7 +358,7 @@ export default class MaskRenderer extends BaseRenderer<IDrawerMask> implements I
343358
type: DrawerMaskModelTypes.cursor,
344359
radius: DefaultControllerRadius,
345360
};
346-
return new MaskTaskCircleTransformer(model, this.canvas);
361+
return new MaskTaskCircleTransformer(model, this.canvas, this._getStyle(ControllerStyle));
347362
}
348363
}
349364

@@ -438,6 +453,6 @@ export default class MaskRenderer extends BaseRenderer<IDrawerMask> implements I
438453
type: DrawerMaskModelTypes.transformer,
439454
radius: DefaultControllerRadius,
440455
};
441-
return new MaskTaskCircleTransformer(model, this.canvas);
456+
return new MaskTaskCircleTransformer(model, this.canvas, this._getStyle(ControllerStyle));
442457
}
443458
}

‎src/styles/ElementStyles.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export type FillStyle = {
7171
// 描边样式定义
7272
export type StrokeStyle = FillStyle & {
7373
type?: StrokeTypes;
74-
width: number;
74+
width?: number;
7575
};
7676

7777
// 文本垂直对齐方式
@@ -154,6 +154,8 @@ export type ElementStyles = FontStyle & {
154154
strokes?: StrokeStyle[];
155155
// 填充
156156
fills?: FillStyle[];
157+
// 文本
158+
text?: StrokeStyle[];
157159
};
158160

159161
// 默认描边类型，分为内描边，平分线宽，外描边

‎src/styles/MaskStyles.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ElementStyles, FillStyle, StrokeTypes } from "@/styles/ElementStyles";
1+
import { ElementStyles, FillStyle, StrokeStyle, StrokeTypes } from "@/styles/ElementStyles";
22

33
// 鼠标样式画布尺寸
44
export const MinCursorMXD = 2;
@@ -75,27 +75,27 @@ export const ControllerStyle: ElementStyles = {
7575
],
7676
};
7777

78-
// 指示器样式
79-
export const SelectionIndicatorStyle: ElementStyles = {
80-
fontSize: SelectionIndicatorFontSize,
81-
fontFamily: SelectionIndicatorFontFamily,
82-
textAlign: SelectionIndicatorTextAlign,
83-
textBaseline: SelectionIndicatorTextBaseline,
84-
};
85-
8678
// 指示器背景色
8779
export const SelectionIndicatorBgStyle: FillStyle = {
8880
color: SelectionIndicatorFillColor,
8981
colorOpacity: SelectionIndicatorFillColorOpacity,
9082
};
9183

9284
// 指示器文本颜色
93-
export const SelectionIndicatorTextStyle: FillStyle = {
85+
export const SelectionIndicatorTextStyle: StrokeStyle = {
9486
color: SelectionIndicatorTextColor,
9587
colorOpacity: SelectionIndicatorTextColorOpacity,
9688
};
9789

98-
export const CursorPositionStyle = SelectionIndicatorStyle;
90+
// 指示器样式
91+
export const SelectionIndicatorStyle: ElementStyles = {
92+
fontSize: SelectionIndicatorFontSize,
93+
fontFamily: SelectionIndicatorFontFamily,
94+
textAlign: SelectionIndicatorTextAlign,
95+
textBaseline: SelectionIndicatorTextBaseline,
96+
fills: [SelectionIndicatorBgStyle],
97+
text: [SelectionIndicatorTextStyle],
98+
};
9999

100100
export const CursorSize = 20;
101101

0 commit comments

Comments
 (0)