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

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,
};