HotRegion 热区

类型定义

HotRegion 类型定义

export type HotRegion = {
  title: string;
  id: string;
  rect: {
    // 以下数值均为宽度的百分比（小数计）
    x: number;
    y: number;
    width: number;
    height: number;
  };
  actions: Action[];
  color: string;
};

字段说明

字段	类型	必选	描述
title	string	是	热区的标题，用于描述其用途或内容。
id	string	是	热区的唯一标识符。
rect	object	是	定义热区的位置和大小（基于图片宽度的百分比，小数形式）。
actions	Action[]	是	绑定到热区的动作列表（点击或其他交互时触发）。
color	string	是	热区的显示颜色（用于可视化标识，如 '#FF0000' 或 'rgba(255, 0, 0, 0.5)'）。

rect 字段说明

字段	类型	必选	描述
x	number	是	热区左上角的水平位置（基于图片宽度的百分比，如 0.1 表示 10%）。
y	number	是	热区左上角的垂直位置（基于图片宽度的百分比）。
width	number	是	热区的宽度（基于图片宽度的百分比）。
height	number	是	热区的高度（基于图片宽度的百分比）。

---

示例

基本热区定义

const hotRegion: HotRegion = {
  title: "点击查看详情",
  id: "hot-region-1",
  rect: {
    x: 0.2, // 水平位置 20%
    y: 0.3, // 垂直位置 30%
    width: 0.4, // 宽度 40%
    height: 0.2, // 高度 20%
  },
  actions: [
    { type: "navigate", target: "detail-page" }, // 假设 `Action` 类型已定义
  ],
  color: "#FF0000", // 红色
};

---

注意事项

1. 百分比单位
   • rect 中的 x、y、width、height 均为图片宽度的百分比，值为 0 到 1 之间的小数。
2. 颜色格式
   • color 支持 CSS 颜色值（如十六进制、RGB、RGBA）。
3. 交互动作
   • actions 需根据实际业务需求定义（如跳转页面、打开链接、触发函数等）。

其他类型引用

• Action