visualization-design/src/views/EnvArea/pens/monitorPoint.ts

import { getFont, Pen } from "@meta2d/core";

export interface MonitorPointPen extends Pen {
  pointName?: string;
  pointTemperature?: string;
  pointHumidity?: string;
}

export function monitorPoint(
  ctx: CanvasRenderingContext2D,
  pen: MonitorPointPen
): void {
  const { x, y, width, height } = pen.calculative.worldRect;
  const { pointName, pointTemperature, pointHumidity } = pen;
  const isLock = meta2d.data().locked;
  const isNormal = true;
  ctx.save();

  // 状态图标中心坐标
  const iconX = x + width / 2;
  const iconY = y + height / 2;
  const iconColor = !isLock || isNormal ? "103, 194, 58" : "245, 108, 108"; // 正常状态 - 绿色、异常状态 - 红色

  // 绘制三个同心圆
  // 最大圆（直径24）
  ctx.beginPath();
  ctx.arc(iconX, iconY, 12, 0, Math.PI * 2);
  ctx.fillStyle = `rgba(${iconColor}, 0.3)`;
  ctx.fill();

  // 中圆（直径12）
  ctx.beginPath();
  ctx.arc(iconX, iconY, 6, 0, Math.PI * 2);
  ctx.fillStyle = `rgba(${iconColor}, 0.6)`;
  ctx.fill();

  // 最小圆（直径6）
  ctx.beginPath();
  ctx.arc(iconX, iconY, 3, 0, Math.PI * 2);
  ctx.fillStyle = `rgba(${iconColor}, 1)`;
  ctx.fill();

  ctx.font = getFont({
    fontWeight: "500",
    fontSize: 12,
    lineHeight: 22,
  });

  ctx.fillStyle = "rgba(0, 0, 0, 0.65)";
  ctx.textBaseline = "middle";

  // 绘制右侧文字
  if (!isLock) {
    ctx.fillText(pointName, iconX + 25, iconY);
  }

  // 绘制下方文字
  if (isLock && !isNormal) {
    ctx.textAlign = "center";
    ctx.fillText(`${pointTemperature}℃｜${pointHumidity}%`, iconX, iconY + 35);
  }

  ctx.restore();
}

export const monitorPointData: MonitorPointPen = {
  name: "monitorPoint",
  width: 214,
  height: 140,
  pointTemperature: "-",
  pointHumidity: "-",
};