diff --git a/src/editor/core/draw/particle/CheckboxParticle.ts b/src/editor/core/draw/particle/CheckboxParticle.ts index 2635d9b..d6d6ba1 100644 --- a/src/editor/core/draw/particle/CheckboxParticle.ts +++ b/src/editor/core/draw/particle/CheckboxParticle.ts @@ -12,10 +12,28 @@ export class CheckboxParticle { } public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) { - const { checkbox: { gap } } = this.options - const { metrics } = element - ctx.rect(x + gap, y - metrics.height, metrics.width - gap * 2, metrics.height) + const { checkbox: { gap, lineWidth } } = this.options + const { metrics, checkbox } = element + // left top 四舍五入避免1像素问题 + const left = Math.round(x + gap) + const top = Math.round(y - metrics.height + lineWidth) + const width = metrics.width - gap * 2 + const height = metrics.height + ctx.save() + ctx.beginPath() + ctx.translate(0.5, 0.5) + ctx.lineWidth = lineWidth + ctx.rect(left, top, width, height) ctx.stroke() + // 绘制勾选状态 + if (checkbox?.value) { + ctx.moveTo(left + 2, top + 7) + ctx.lineTo(left + 6, top + 12) + ctx.lineTo(left + 12, top + 3) + ctx.stroke() + } + ctx.closePath() + ctx.restore() } } \ No newline at end of file diff --git a/src/editor/dataset/constant/Checkbox.ts b/src/editor/dataset/constant/Checkbox.ts index bcb5aa6..52e223b 100644 --- a/src/editor/dataset/constant/Checkbox.ts +++ b/src/editor/dataset/constant/Checkbox.ts @@ -3,5 +3,6 @@ import { ICheckboxOption } from '../../interface/Checkbox' export const defaultCheckboxOption: Readonly> = { width: 14, height: 14, - gap: 5 + gap: 5, + lineWidth: 1 } \ No newline at end of file diff --git a/src/editor/interface/Checkbox.ts b/src/editor/interface/Checkbox.ts index 0da022b..b07c50f 100644 --- a/src/editor/interface/Checkbox.ts +++ b/src/editor/interface/Checkbox.ts @@ -7,4 +7,5 @@ export interface ICheckboxOption { width?: number; height?: number; gap?: number; + lineWidth?: number; } \ No newline at end of file