异常-颜色

src/utils/customePaint.js

@@ -51,15 +51,72 @@ export const paintNodeFunction = (storeId) => {
       ctx.restore()
 
       // 2) 同色半透明边框（描边，不是挖空）
-      ctx.save()
-      ctx.beginPath()
       const rRing = rFill + ringGap + ringWidth / 2
-      ctx.arc(0, 0, rRing, 0, Math.PI * 2)
-      ctx.lineWidth = ringWidth
-      ctx.setLineDash([]) // 确保这里是实线
-      ctx.strokeStyle = `rgba(${this.fillColor}, ${this.alpha * ringAlphaFactor})`
-      ctx.stroke()
-      ctx.restore()
+      ctx.save();
+      const rInner = rFill + ringGap;
+      const rOuter = rInner + ringWidth;
+      // 一个小工具函数，复用甜甜圈路径
+      const ringPath = () => {
+        ctx.beginPath();
+        ctx.arc(0, 0, rOuter, 0, Math.PI * 2, false);
+        ctx.arc(0, 0, rInner, 0, Math.PI * 2, true);
+      };
+      // 选择配色方案
+      const fc = (this.fillColor || "").replace(/\s+/g, "");
+      const isMint = fc === "75,241,184";
+      const isBlue = fc === "69,192,242";
+      const isRed = fc === "255,50,60";
+      const isYellow = fc === "250,222,37";
+
+      // 默认都按照 SVG：每层 0.24 透明度（再乘整体 alpha）
+      const layerAlpha = 0.24 * (this.alpha ?? 1);
+      // --- 第 2-1 层：线性渐变 (#0FE9BE -> #91FFB2), fill-opacity=0.24 ---
+      ringPath();
+      let lg = ctx.createLinearGradient(-rOuter, 0, rOuter, 0);
+      if(isMint){
+        lg.addColorStop(0, '#0FE9BE');
+        lg.addColorStop(1, '#91FFB2');
+      }else if(isBlue){
+        lg.addColorStop(0, "#009DFF");
+        lg.addColorStop(1, "#00FFF2");
+      }else if(isRed){
+        lg.addColorStop(0, '#FF0000');
+        lg.addColorStop(1, '#FF0909');
+      }else if(isYellow){
+        lg.addColorStop(0, '#FFDA09');
+        lg.addColorStop(1, '#FFDA09');
+      }
+      ctx.globalAlpha = 0.24 * (this.alpha ?? 1); // 与节点整体透明度相乘
+      ctx.fillStyle = lg;
+      ctx.fill();
+      // --- 第 2-2 层：径向渐变 (E6F9FF -> BEFFDB(0.5) -> 透明), fill-opacity=0.24 ---
+      // 参照 SVG 的 gradientTransform(translate(35.15,12.16) 相对圆心(20,16)):
+      // 约等于中心点在右上方 (≈ 0.95R, -0.24R)，半径≈1.52R
+      ringPath();
+      const cx = 0.95 * rOuter;
+      const cy = -0.24 * rOuter;
+      let rg = ctx.createRadialGradient(cx, cy, 0, cx, cy, 1.52 * rOuter);
+      if(isMint){
+        rg.addColorStop(0.0,  'rgba(230,249,255,1)');    // #E6F9FF
+        rg.addColorStop(0.3693,'rgba(190,255,219,0.5)'); // #BEFFDB @ 0.5
+        rg.addColorStop(1.0,  'rgba(0,0,0,0)');
+      }else if(isBlue){
+        rg.addColorStop(0.0,  'rgba(229,249,255,1)');   
+        rg.addColorStop(0.3693,'rgba(141,255,253,0.5)');
+        rg.addColorStop(1.0,  'rgba(0, 0, 0, 0)');
+      }else if(isRed){
+        rg.addColorStop(0.0,  'rgba(255,255,255,1)');   
+        rg.addColorStop(0.3693,'rgba(255,200,200,0.5)');
+        rg.addColorStop(1.0,  'rgba(0, 0, 0, 0)');
+      }else if(isYellow){
+        rg.addColorStop(0.0,  'rgba(229,249,255,1)');   
+        rg.addColorStop(0.3693,'rgba(254,255,200,0.5)');
+        rg.addColorStop(1.0,  'rgba(0, 0, 0, 0)');
+      }
+      ctx.globalAlpha = 0.24 * (this.alpha ?? 1);
+      ctx.fillStyle = rg;
+      ctx.fill();
+      ctx.restore();
 
       // 3) 外圈虚线（同色）
       ctx.save()