# @edv4h/usketch-shape-utils 中文文档

规范地址：https://npmcn.com/package/%40edv4h/usketch-shape-utils/

版本：2\.4\.4
npm 元数据更新时间：2026-11-10T02:55:51.368Z
中文译文更新时间：2026-11-13T07:43:23.460Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40edv4h/usketch-shape-utils
原文对照：https://npmcn.com/package/%40edv4h/usketch-shape-utils/?lang=original
项目主页：https://github.com/EdV4H/usketch#readme
源码仓库：https://github.com/EdV4H/usketch

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：77.8 kB，31 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react \>=19
- 首次发布：2026-04-22T14:23:09.859Z
- 最新版本发布：2026-11-10T02:55:50.864Z
- 近 30 天下载量：3243（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：28（近 12 个月 28 个）

## 中文简介

暂无中文简介

## 安装

```sh
npm install @edv4h/usketch-shape-utils
```

也可以使用：`pnpm add @edv4h/usketch-shape-utils`、`yarn add @edv4h/usketch-shape-utils`、`bun add @edv4h/usketch-shape-utils`

## README

# @ edv4h/ usketch- shape- utils

uSketch v2 → 形状 → {}。 サードパーティが `@acme/usketch-plugin-shape-foo` \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*。

反应 QQ 形状 QQ。

## 安装

```bash
pnpm add @edv4h/usketch-shape-utils @edv4h/usketch-shared
```

## • API

### `getBounds(data: ShapeData): BoundingBox`

形状 `ShapeDefinition.getBounds` OK,没事。

### 命中测试

| 関数 | 页:1 |
| --- | --- |
| `aabbHitTest(data, point)` | 阿拉伯裔美国人 |
| `ellipseHitTest(data, point)` | 楕円との当たり判定 |
| `lineHitTest(data, point, tolerance?)` | qq (xq 容忍度 : 4px) |
| `pointInPolygon(point, polygon)` | 任意多角形との当たり判定(三角形・六角形・星形など) |

回転に対応したい場合は、`@edv4h/usketch-shared` の `withRotation(hitTest)` でラップする。

### `createResize(minW, minH): ResizeFn`

8 方向 (`se` 编号 : `nw` 编号 : `ne` 编号 : `sw` 编号 : `e` 编号 : `w` 编号 : `n` 编号 : `s`) 缩放。

### GPU 原始语言

(原始内容存档于2017-03-21). WebGPU QQ原始版。

| 関数 | 喜欢的 |
| --- | --- |
| `rectGpuPrimitive(data)` | `rect` |
| `roundedRectGpuPrimitive(data)` | `rect`(橡皮拉迪乌斯) |
| `ellipseGpuPrimitive(data)` | `ellipse` |
| `lineGpuPrimitive(data)` | `polyline` |

## 使用例

```tsx
import { DEFAULT_STYLE, type ShapeData, withRotation } from "@edv4h/usketch-shared";
import { createResize, getBounds, pointInPolygon } from "@edv4h/usketch-shape-utils";

function getHexagonPoints(data: ShapeData) {
  const cx = data.x + data.width / 2;
  const cy = data.y + data.height / 2;
  return Array.from({ length: 6 }, (_, i) => {
    const angle = (Math.PI / 3) * i - Math.PI / 2;
    return {
      x: cx + (data.width / 2) * Math.cos(angle),
      y: cy + (data.height / 2) * Math.sin(angle),
    };
  });
}

export const hexagonDefinition = {
  render: (data: ShapeData) => (
    <polygon
      points={getHexagonPoints(data).map((p) => `${p.x},${p.y}`).join(" ")}
      fill={data.style.fill}
    />
  ),
  getBounds,
  hitTest: withRotation((data, point) => pointInPolygon(point, getHexagonPoints(data))),
  resize: createResize(10, 10),
  createDefault: ({ id, x, y }) => ({
    id,
    type: "hexagon",
    x,
    y,
    width: 120,
    height: 104,
    style: { ...DEFAULT_STYLE },
  }),
};
```

プラグインとしての組み込み方は [`apps/docs` + 作者为 +](https://github.com/EdV4H/usketch/blob/main/apps/docs/src/content/docs/plugins/authoring.md) を参照。

## 许可证

麻省理工学院

## 常见问题

### 如何安装 @edv4h/usketch-shape-utils？

在项目目录运行 npm install @edv4h/usketch-shape-utils，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @edv4h/usketch-shape-utils 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @edv4h/usketch-shape-utils 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @edv4h/usketch-shape-utils 可以商用吗？

@edv4h/usketch-shape-utils 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @edv4h/usketch-shape-utils 的下载量有多少？

根据 npm 官方下载统计，@edv4h/usketch-shape-utils 在 2026/10/13 – 2026/11/11 这 30 天内被下载 3,243 次，日均约 108 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @edv4h/usketch-shape-utils 还在维护吗？

最新版本 2\.4\.4 发布于 2026/11/10（3 天前）；至今共发布 28 个版本，其中过去 12 个月发布了 28 个；首次发布于 2026/04/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。