feat:draw checkbox select state

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 { checkbox: { gap, lineWidth } } = this.options
-    const { metrics } = element
+    const { metrics, checkbox } = element
-    ctx.rect(x + gap, y - metrics.height, metrics.width - gap * 2, metrics.height)
+    // 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()
   }
 
 }

src/editor/dataset/constant/Checkbox.ts

@@ -3,5 +3,6 @@ import { ICheckboxOption } from '../../interface/Checkbox'
 export const defaultCheckboxOption: Readonly<Required<ICheckboxOption>> = {
   width: 14,
   height: 14,
-  gap: 5
+  gap: 5,
+  lineWidth: 1
 }

src/editor/interface/Checkbox.ts

@@ -7,4 +7,5 @@ export interface ICheckboxOption {
   width?: number;
   height?: number;
   gap?: number;
+  lineWidth?: number;
 }