feat: 完成图形涂色绘制

miniprogram/service/drawShape.ts

@@ -103,11 +103,24 @@ function drawParallelogram(ctx: RenderingContext, x: number, y: number, width: n
 
 // 绘制菱形
 function drawDiamond(ctx: RenderingContext, x: number, y: number, size: number, fillColor: string) {
+    // 参考SVG: <polygon points="50,15 70,50 50,85 30,50"/>
+    // 以(x, y)为中心，size为半高，按SVG比例映射四个点
+    // SVG中心(50,50)，顶点(50,15)，右(70,50)，下(50,85)，左(30,50)
+    // 计算比例
+    // 顶点: (0, -0.7*size)
+    // 右:   (0.4*size, 0)
+    // 下:   (0, 0.7*size)
+    // 左:   (-0.4*size, 0)
+    const topY = y - size * 0.7;
+    const rightX = x + size * 0.4;
+    const bottomY = y + size * 0.7;
+    const leftX = x - size * 0.4;
+
     ctx.beginPath();
-    ctx.moveTo(x, y - size);
-    ctx.lineTo(x + size, y);
-    ctx.lineTo(x, y + size);
-    ctx.lineTo(x - size, y);
+    ctx.moveTo(x, topY);         // 顶点
+    ctx.lineTo(rightX, y);       // 右
+    ctx.lineTo(x, bottomY);      // 下
+    ctx.lineTo(leftX, y);        // 左
     ctx.closePath();
     if (fillColor !== 'transparent') {
         ctx.fillStyle = fillColor;