diff --git a/src/utils/customePaint.js b/src/utils/customePaint.js index f056019..8868cc0 100644 --- a/src/utils/customePaint.js +++ b/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()