From a950a333a0584beed7584629b774f8f105ae2cd9 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Tue, 3 Feb 2026 10:04:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20canvas=20=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/canvasExample.vue | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/views/demo/canvasExample.vue b/src/views/demo/canvasExample.vue
index 26c212e..9f820b7 100644
--- a/src/views/demo/canvasExample.vue
+++ b/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);