diff --git a/docs/en/guide/option.md b/docs/en/guide/option.md index bd30ae8..39fcf2b 100644 --- a/docs/en/guide/option.md +++ b/docs/en/guide/option.md @@ -71,6 +71,7 @@ interface IEditorOption { zone?: IZoneOption // Zone option。{tipDisabled?:boolean;} background?: IBackgroundOption // Background option. {color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat;}。default: {color: '#FFFFFF'} lineBreak?: ILineBreakOption // LineBreak option. {disabled?:boolean; color?:string; lineWidth?:number;} + separator?: ISeparatorOption // Separator option. {lineWidth?:number; strokeStyle?:string;} } ``` diff --git a/docs/guide/option.md b/docs/guide/option.md index 3b055fc..75d1d65 100644 --- a/docs/guide/option.md +++ b/docs/guide/option.md @@ -71,6 +71,7 @@ interface IEditorOption { zone?: IZoneOption // 编辑器区域配置。{tipDisabled?:boolean;} background?: IBackgroundOption // 背景配置。{color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat;}。默认:{color: '#FFFFFF'} lineBreak?: ILineBreakOption // 换行符配置。{disabled?:boolean; color?:string; lineWidth?:number;} + separator?: ISeparatorOption // 分隔符配置。{lineWidth?:number; strokeStyle?:string;} } ``` diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index e1c2f52..fbab7c7 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -1412,11 +1412,14 @@ export class Draw { } } } else if (element.type === ElementType.SEPARATOR) { + const { + separator: { lineWidth } + } = this.options element.width = availableWidth / scale metrics.width = availableWidth - metrics.height = defaultSize + metrics.height = lineWidth * scale metrics.boundingBoxAscent = -rowMargin - metrics.boundingBoxDescent = -rowMargin + metrics.boundingBoxDescent = -rowMargin + metrics.height } else if (element.type === ElementType.PAGE_BREAK) { element.width = availableWidth / scale metrics.width = availableWidth diff --git a/src/editor/core/draw/particle/Separator.ts b/src/editor/core/draw/particle/Separator.ts index 89d0ccf..bd1093d 100644 --- a/src/editor/core/draw/particle/Separator.ts +++ b/src/editor/core/draw/particle/Separator.ts @@ -16,18 +16,20 @@ export class SeparatorParticle { y: number ) { ctx.save() - const { scale } = this.options - ctx.lineWidth = scale - if (element.color) { - ctx.strokeStyle = element.color - } - if (element.dashArray && element.dashArray.length) { + const { + scale, + separator: { lineWidth, strokeStyle } + } = this.options + ctx.lineWidth = lineWidth * scale + ctx.strokeStyle = element.color || strokeStyle + if (element.dashArray?.length) { ctx.setLineDash(element.dashArray) } - ctx.translate(0, 0.5) // 从1处渲染,避免线宽度等于3 + const offsetY = Math.round(y) // 四舍五入避免绘制模糊 + ctx.translate(0, ctx.lineWidth / 2) ctx.beginPath() - ctx.moveTo(x, y) - ctx.lineTo(x + element.width! * scale, y) + ctx.moveTo(x, offsetY) + ctx.lineTo(x + element.width! * scale, offsetY) ctx.stroke() ctx.restore() } diff --git a/src/editor/dataset/constant/Separator.ts b/src/editor/dataset/constant/Separator.ts new file mode 100644 index 0000000..f998eef --- /dev/null +++ b/src/editor/dataset/constant/Separator.ts @@ -0,0 +1,6 @@ +import { ISeparatorOption } from '../../interface/Separator' + +export const defaultSeparatorOption: Readonly> = { + lineWidth: 1, + strokeStyle: '#000000' +} diff --git a/src/editor/index.ts b/src/editor/index.ts index d0a2380..69b3f10 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -80,6 +80,8 @@ import { BackgroundRepeat, BackgroundSize } from './dataset/enum/Background' import { TextDecorationStyle } from './dataset/enum/Text' import { ILineBreakOption } from './interface/LineBreak' import { defaultLineBreak } from './dataset/constant/LineBreak' +import { ISeparatorOption } from './interface/Separator' +import { defaultSeparatorOption } from './dataset/constant/Separator' export default class Editor { public command: Command @@ -155,6 +157,10 @@ export default class Editor { ...defaultLineBreak, ...options.lineBreak } + const separatorOptions: Required = { + ...defaultSeparatorOption, + ...options.separator + } const editorOptions: DeepRequired = { mode: EditorMode.EDIT, @@ -214,7 +220,8 @@ export default class Editor { pageBreak: pageBreakOptions, zone: zoneOptions, background: backgroundOptions, - lineBreak: lineBreakOptions + lineBreak: lineBreakOptions, + separator: separatorOptions } // 数据处理 data = deepClone(data) diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index ab491ef..4019b6c 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -22,6 +22,7 @@ import { IPlaceholder } from './Placeholder' import { ITitleOption } from './Title' import { IWatermark } from './Watermark' import { IZoneOption } from './Zone' +import { ISeparatorOption } from './Separator' export interface IEditorData { header?: IElement[] @@ -87,6 +88,7 @@ export interface IEditorOption { zone?: IZoneOption background?: IBackgroundOption lineBreak?: ILineBreakOption + separator?: ISeparatorOption } export interface IEditorResult { diff --git a/src/editor/interface/Separator.ts b/src/editor/interface/Separator.ts new file mode 100644 index 0000000..e0d44a7 --- /dev/null +++ b/src/editor/interface/Separator.ts @@ -0,0 +1,4 @@ +export interface ISeparatorOption { + strokeStyle?: string + lineWidth?: number +}