duanhao/SocialNetworks_duan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update customePaint.js

Browse Source
This commit is contained in:
qumeng039@126.com 2025-08-12 08:56:18 +08:00
parent 242781ab93
commit f52589a651
1 changed files with 44 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/utils/customePaint.js
View File

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