feat: canvas 示例

src/views/demo/canvasExample.vue

@@ -51,9 +51,18 @@ const startDraw = function () {
         if (custom) {
             // === custom 为 true 时 (最外层) ===
             // 绘制虚线边框，且在每个角留出空隙给文字
-            const gap = 55; // 避让距离，根据文字大小调整
+            const gap = 40; // 基础避让距离
 
             for (let i = 0; i < 6; i++) {
+                // 针对特定边调整 gap，实现"往下延伸"的效果
+                let startGap = gap;
+                let endGap = gap;
+
+                // i=1: 定期寿险(下) -> 储蓄养老(上)。往下延伸 = 减少起点的 gap
+                if (i === 1) startGap -= 15;
+                // i=4: 重疾险(上) -> 意外险(下)。往下延伸 = 减少终点的 gap
+                if (i === 4) endGap -= 15;
+
                 // 当前顶点 (起点)
                 const angle1 = (Math.PI / 3) * i + Math.PI / 2;
                 const x1 = centerX + radius * Math.cos(angle1);
@@ -69,16 +78,16 @@ const startDraw = function () {
                 const dy = y2 - y1;
                 const dist = Math.sqrt(dx * dx + dy * dy);
 
-                // 只有当边长大于 2*gap 时才绘制，防止交叉
-                if (dist > 2 * gap) {
+                // 只有当边长大于 gap 之和时才绘制
+                if (dist > startGap + endGap) {
                     const ux = dx / dist;
                     const uy = dy / dist;
 
                     // 计算避让后的起点和终点
-                    const sx = x1 + ux * gap;
-                    const sy = y1 + uy * gap;
-                    const ex = x2 - ux * gap;
-                    const ey = y2 - uy * gap;
+                    const sx = x1 + ux * startGap;
+                    const sy = y1 + uy * startGap;
+                    const ex = x2 - ux * endGap;
+                    const ey = y2 - uy * endGap;
 
                     ctx.moveTo(sx, sy);
                     ctx.lineTo(ex, ey);