feat(views): 支持绘制“无监测点房间”控件

src/views/EnvArea/pens/monitorNoRoom.ts

@@ -0,0 +1,59 @@
+import { Pen } from "@meta2d/core";
+
+export function monitorNoRoom(ctx: CanvasRenderingContext2D, pen: Pen): void {
+  const radius = pen.calculative.borderRadius;
+  const {
+    x: rectX,
+    y: rectY,
+    width: rectWidth,
+    height: rectHeight,
+  } = pen.calculative.worldRect;
+
+  ctx.save();
+
+  // 条纹参数
+  const stripeSpacing = 12;
+  const stripeColor = "#d4d8d7";
+
+  // 1. 绘制灰色背景
+  ctx.beginPath();
+  ctx.roundRect(rectX, rectY, rectWidth, rectHeight, radius);
+  ctx.fillStyle = "#f1f1f1";
+  ctx.fill();
+
+  // 2. 创建裁剪区域
+  ctx.beginPath();
+  ctx.roundRect(rectX, rectY, rectWidth, rectHeight, radius);
+  ctx.clip();
+
+  // 3. 计算斜线参数（修正方向算法）
+  const diagonal = Math.sqrt(rectWidth ** 2 + rectHeight ** 2);
+  const bStep = stripeSpacing * Math.sqrt(2); // 修正步长算法
+
+  // 4. 动态计算绘制范围（解决窄矩形问题）
+  const startB = rectY - rectX - diagonal * 2; // 扩展起始位置
+  const endB = rectY + rectHeight + rectX + diagonal * 2; // 扩展结束位置
+
+  // 5. 绘制斜线（修正坐标计算）
+  ctx.strokeStyle = stripeColor;
+  ctx.lineWidth = 6;
+
+  for (let b = startB; b <= endB; b += bStep) {
+    ctx.beginPath();
+    ctx.moveTo(rectX - diagonal, -(rectX - diagonal) + b);
+    ctx.lineTo(
+      rectX + rectWidth + diagonal,
+      -(rectX + rectWidth + diagonal) + b
+    );
+    ctx.stroke();
+  }
+
+  ctx.restore();
+}
+
+export const monitorNoRoomData = {
+  name: "monitorNoRoom",
+  width: 214,
+  height: 140,
+  borderRadius: 12,
+};

src/views/EnvArea/pens/register.ts

@@ -1,6 +1,8 @@
-import { register } from "@meta2d/core";
+import { register, registerCanvasDraw } from "@meta2d/core";
 import { monitorRoom } from "./monitorRoom";
+import { monitorNoRoom } from "./monitorNoRoom";
 
 export function registerAreaPens() {
   register({ monitorRoom });
+  registerCanvasDraw({ monitorNoRoom });
 }