Update customePaint.js
This commit is contained in:
		
							parent
							
								
									242781ab93
								
							
						
					
					
						commit
						f52589a651
					
				| 
						 | 
				
			
			@ -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) //调用内部方法绘制文字
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue
	
	Block a user