72 lines
1.9 KiB
JavaScript
72 lines
1.9 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()
|
||
|
|
} 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);
|
||
|
|
}
|