颜色

src/utils/customePaint.js

@@ -56,14 +56,41 @@ export const paintNodeFunction = function (ctx, onlyShape) {
     ctx.restore();
 
     // 2) 同色半透明边框（描边，不是挖空）
-    ctx.save();
+    // ctx.save();
-    ctx.beginPath();
+    // ctx.beginPath();
     const rRing = rFill + ringGap + ringWidth / 2;
-    ctx.arc(0, 0, rRing, 0, Math.PI * 2);
+    // ctx.arc(0, 0, rRing, 0, Math.PI * 2);
-    ctx.lineWidth = ringWidth;
+    // ctx.lineWidth = ringWidth;
-    ctx.setLineDash([]); // 确保这里是实线
+    // ctx.setLineDash([]); // 确保这里是实线
-    ctx.strokeStyle = `rgba(${this.fillColor}, ${this.alpha * ringAlphaFactor})`;
+    // ctx.strokeStyle = `rgba(${this.fillColor}, ${this.alpha * ringAlphaFactor})`;
-    ctx.stroke();
+    // ctx.stroke();
+    // ctx.restore();
+    ctx.save();
+    const rInner = rFill + ringGap;
+    const rOuter = rInner + ringWidth;
+
+    // 甜甜圈路径：外圈顺时针 + 内圈逆时针
+    ctx.beginPath();
+    ctx.arc(0, 0, rOuter, 0, Math.PI * 2, false);
+    ctx.arc(0, 0, rInner, 0, Math.PI * 2, true);
+
+    // 径向渐变：从内缘 rInner 到 外缘 rOuter
+    const g = ctx.createRadialGradient(0, 0, rInner, 0, 0, rOuter);
+
+    // ——方案A：同色渐变（随 fillColor 和 this.alpha）——
+    const a0 = Math.min(1, this.alpha * 0.8); // 内缘更实
+    const a1 = Math.min(1, this.alpha * 0.5); // 中间半透明
+    // g.addColorStop(0.00, `rgba(${this.fillColor}, ${a0})`);
+    // g.addColorStop(0.37, `rgba(${this.fillColor}, ${a1})`);
+    // g.addColorStop(1.00, `rgba(${this.fillColor}, 0)`);
+
+    // ——如果你想用你给的蓝青色渐变（覆盖上面三行），用下面三行——
+    g.addColorStop(0.00, 'rgba(229,249,255,1)');
+    g.addColorStop(0.37, 'rgba(190,255,219,0.5)');
+    g.addColorStop(1.00, 'rgba(0,0,0,0)');
+
+    ctx.fillStyle = g;
+    ctx.fill();  // 内外方向相反，默认非零规则即可得到“环”
     ctx.restore();
 
     // 3) 外圈虚线（同色）