114 lines
3.5 KiB
JavaScript
114 lines
3.5 KiB
JavaScript
//自定义绘制节点的方法
|
||
export const paintNodeFunction = function (ctx, onlyShape) {
|
||
//默认绘制数据类型图片
|
||
if (this.properties.typeIcon) {
|
||
if (this.selected || this.showSelected) {
|
||
this.drawShape(ctx, onlyShape)
|
||
}
|
||
|
||
if (this.alpha < 1) {
|
||
ctx.save()
|
||
ctx.globalAlpha = this.alpha
|
||
ctx.drawImage(
|
||
this.properties.typeIcon,
|
||
-this.width / 2,
|
||
-this.height / 2,
|
||
this.width,
|
||
this.height
|
||
)
|
||
ctx.restore()
|
||
} else {
|
||
ctx.drawImage(
|
||
this.properties.typeIcon,
|
||
-this.width / 2,
|
||
-this.height / 2,
|
||
this.width,
|
||
this.height
|
||
)
|
||
}
|
||
} else {
|
||
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）
|
||
|
||
// 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)
|
||
ctx.lineWidth = 12
|
||
ctx.setLineDash([4, 4])
|
||
ctx.strokeStyle = `rgba(${this.fillColor},${this.alpha * 0.6})`
|
||
ctx.stroke()
|
||
}
|
||
|
||
this.paintText(ctx) //调用内部方法绘制文字
|
||
}
|
||
|
||
//自定义连线的方法
|
||
export const paintLineFunction = function (ctx, needHideText) {
|
||
this.drawOriginalLine(ctx, needHideText) //内置默认的绘制方法
|
||
|
||
//指定路径，用于鼠标检测选中
|
||
this.path = [
|
||
{ x: this.source.cx, y: this.source.cy },
|
||
{ x: this.target.cx, y: this.target.cy }
|
||
]
|
||
|
||
// //绘制路径
|
||
ctx.beginPath()
|
||
ctx.moveTo(this.source.cx, this.source.cy)
|
||
ctx.lineTo(this.target.cx, this.target.cy)
|
||
this.setLineStyle(ctx)
|
||
ctx.stroke()
|
||
|
||
// //绘制连线上文字（内部方法）
|
||
this.paintTextOnLineWithAngle(ctx, this.source, this.target)
|
||
}
|