hsq-pro/src/components/vent/camera/regionDraw.ts

/** 区域形状选项 */
export interface RegionShape {
  key: string;
  label: string;
}

/** 左侧操作面板区域配置 */
export interface RegionSection {
  key: string;
  title: string;
  /** 区域默认颜色 */
  color: string;
  /** 是否显示「修改」按钮 */
  showModify?: boolean;
  /** 是否显示 I/O 范围（闯入区域） */
  showIoRange?: boolean;
  /** 是否为测温区域（纠正系数 / 温度） */
  thermal?: boolean;
  shapes: RegionShape[];
}

/** 区域可编辑状态 */
export interface RegionState {
  /** 编号（对应预置位编号） */
  no: number;
  /** 当前选择的区域形状，空串表示未选择 */
  shape: string;
  /** 区域颜色 */
  color: string;
  /** I/O 起始值 */
  ioStart: string;
  /** I/O 结束值 */
  ioEnd: string;
  /** 测温纠正系数 */
  k: number;
  /** 测温温度值 */
  temp: string;
}

/** 像素坐标点 */
export interface PxPoint {
  x: number;
  y: number;
}

/** 绘制点（归一化 0-1 + 像素坐标） */
export interface DrawPoint {
  x: number;
  y: number;
  px: number;
  py: number;
}

/** 矩形图形 */
export interface RectData {
  no: number;
  region: string;
  type: 'rect';
  x: number;
  y: number;
  w: number;
  h: number;
  px: number;
  py: number;
  pw: number;
  ph: number;
}

/** 线图形 */
export interface LineData {
  no: number;
  region: string;
  type: 'line';
  points: [DrawPoint, DrawPoint];
}

/** 多边形图形 */
export interface PolyData {
  no: number;
  region: string;
  type: 'poly' | 'polyEdge';
  points: DrawPoint[];
}

/** 绘制图形 */
export type DrawItem = RectData | LineData | PolyData;

/** 可在画面上直接绘制的形状 */
export const drawableShapes = ['rect', 'line', 'poly', 'polyEdge'];

/** 是否为可绘制形状 */
export function isDrawableShape(shape: string) {
  return drawableShapes.includes(shape);
}

/** 绘制提示文案 */
export function shapeTip(shape: string) {
  if (shape === 'rect') return '矩形：在右侧画面拖拽绘制，松手自动保存坐标';
  if (shape === 'line') return '线：在右侧画面点击起点，拖到终点松手保存';
  if (shape === 'poly') return '多边形：在右侧画面单击添加顶点，双击结束保存';
  if (shape === 'polyEdge') return '多边形边界：在右侧画面单击添加顶点，双击结束保存';
  return '';
}