diff --git a/src/utils/customePaint.js b/src/utils/customePaint.js index e04b6f6..17ce9ab 100644 --- a/src/utils/customePaint.js +++ b/src/utils/customePaint.js @@ -30,63 +30,53 @@ export const paintNodeFunction = function (ctx, onlyShape) { this.drawShape(ctx, onlyShape) } - //按节点类型绘制节点边框 - if (this.properties.type != "normal") { - // ctx.beginPath() - // ctx.arc(0, 0, this.radius + 6, 0, Math.PI * 2) - // ctx.lineWidth = 8 - // ctx.strokeStyle = `rgba(${this.fillColor},${this.alpha * 0.4})` - // ctx.stroke() - // 半径 & 样式参数(按需调整) - // ===== 三层:实心圆 + 半透明边框 + 外圈虚线 ===== - const rFill = this.radius; // 实心圆半径 - const ringWidth = 15; // 半透明边框的宽度 - const ringGap = 0; // 实心与半透明边框之间的间隙(需要留缝就调大) - const outerGap = 0; // 半透明边框与虚线之间的间隙 - const dashWidth = 2; // 虚线线宽 - const dash = 2, gap = 4; // 虚线样式 - const ringAlphaFactor = 0.5; // 半透明边框的相对透明度(相对于 this.alpha) + // ctx.beginPath() + // ctx.arc(0, 0, this.radius + 6, 0, Math.PI * 2) + // ctx.lineWidth = 8 + // ctx.strokeStyle = `rgba(${this.fillColor},${this.alpha * 0.4})` + // ctx.stroke() + // 半径 & 样式参数(按需调整) + // ===== 三层:实心圆 + 半透明边框 + 外圈虚线 ===== + const rFill = this.radius // 实心圆半径 + const ringWidth = 15 // 半透明边框的宽度 + const ringGap = 0 // 实心与半透明边框之间的间隙(需要留缝就调大) + const outerGap = 0 // 半透明边框与虚线之间的间隙 + const dashWidth = 2 // 虚线线宽 + const dash = 2, + gap = 4 // 虚线样式 + const ringAlphaFactor = 0.5 // 半透明边框的相对透明度(相对于 this.alpha) - // 1) 中间实心圆(填充) - ctx.save(); - ctx.beginPath(); - ctx.arc(0, 0, rFill, 0, Math.PI * 2); - ctx.fillStyle = `rgba(${this.fillColor}, ${this.alpha})`; - ctx.fill(); - ctx.restore(); + // 1) 中间实心圆(填充) + ctx.save() + ctx.beginPath() + ctx.arc(0, 0, rFill, 0, Math.PI * 2) + ctx.fillStyle = `rgba(${this.fillColor}, ${this.alpha})` + ctx.fill() + 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(); + // 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() - // 3) 外圈虚线(同色) - ctx.save(); - ctx.beginPath(); - const rDash = rRing + ringWidth / 2 + outerGap + dashWidth / 2; - ctx.arc(0, 0, rDash, 0, Math.PI * 2); - ctx.lineWidth = dashWidth; - ctx.setLineDash([dash, gap]); - ctx.lineCap = 'round'; - ctx.strokeStyle = `rgba(${this.fillColor}, ${this.alpha})`; - ctx.stroke(); - ctx.setLineDash([]); // 清理,避免影响后续绘制 - ctx.restore(); - - } else { - ctx.beginPath() - ctx.arc(0, 0, this.radius + 8, 0, Math.PI * 2) - ctx.lineWidth = 12 - ctx.setLineDash([4, 4]) - ctx.strokeStyle = `rgba(${this.fillColor},${this.alpha * 0.6})` - ctx.stroke() - } + // 3) 外圈虚线(同色) + ctx.save() + ctx.beginPath() + const rDash = rRing + ringWidth / 2 + outerGap + dashWidth / 2 + ctx.arc(0, 0, rDash, 0, Math.PI * 2) + ctx.lineWidth = dashWidth + ctx.setLineDash([dash, gap]) + ctx.lineCap = "round" + ctx.strokeStyle = `rgba(${this.fillColor}, ${this.alpha})` + ctx.stroke() + ctx.setLineDash([]) // 清理,避免影响后续绘制 + ctx.restore() this.paintText(ctx) //调用内部方法绘制文字 }