样式修改
This commit is contained in:
parent
61f6626610
commit
cdbfb491b8
|
|
@ -32,11 +32,53 @@ export const paintNodeFunction = function (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()
|
||||
// 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();
|
||||
|
||||
// 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)
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const defaultConfig = {
|
|||
textOffsetY: 10
|
||||
},
|
||||
shape: "circle",
|
||||
size: 60,
|
||||
size: 15,
|
||||
borderColor: "200,50,50",
|
||||
borderWidth: 0,
|
||||
|
||||
|
|
@ -265,9 +265,9 @@ const clusterAnalyze = () => {
|
|||
clusterNodesMap.get(cluster).push(node)
|
||||
})
|
||||
let colorMap = {
|
||||
0: "50,141,120", // 绿色
|
||||
1: "133,129,48", // 黄色
|
||||
6: "12,112,144" // 蓝色
|
||||
0: "75,241,184", // 绿色
|
||||
1: "250,222,37", // 黄色
|
||||
6: "69,192,242" // 蓝色
|
||||
}
|
||||
clusterNodesMap.forEach((nodes, cluster) => {
|
||||
const color = colorMap[cluster]
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user