# @bmunozg/react-image-area 中文文档

规范地址：https://npmcn.com/package/%40bmunozg/react-image-area/

版本：1\.2\.0
npm 元数据更新时间：2026-03-05T20:36:57.236Z
中文译文更新时间：2026-11-08T09:18:21.501Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40bmunozg/react-image-area
原文对照：https://npmcn.com/package/%40bmunozg/react-image-area/?lang=original
项目主页：https://byronmunozg.github.io/react-image-area
源码仓库：https://github.com/ByronMunozG/react-image-area

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

- 包体积（解压后）：41.3 kB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@types/react ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0，react ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2022-04-15T21:38:06.600Z
- 最新版本发布：2026-03-05T20:36:57.089Z
- 近 30 天下载量：6719（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 1 个）

## 中文简介

反应组件来选择图像的多个区域/区域.

## 安装

```sh
npm install @bmunozg/react-image-area
```

也可以使用：`pnpm add @bmunozg/react-image-area`、`yarn add @bmunozg/react-image-area`、`bun add @bmunozg/react-image-area`

## README

# 反应-图像区域

![react](https://img.shields.io/badge/react-%5E17%20%7C%20%5E18%20%7C%20%5E19-blue.svg) ![language](https://img.shields.io/badge/language-typescript-blue.svg) ![license](https://img.shields.io/badge/license-MIT-green.svg)

> 反应组件来选择图像的多个区域/区域.

[生活实例](https://byronmunozg.github.io/react-image-area/)

## :书:目录

-   [安装](https://npmcn.com/package/%40bmunozg/react-image-area/#readme-package-installation)
-   [使用量](https://npmcn.com/package/%40bmunozg/react-image-area/#readme-rocket-usage)
-   [特征](https://npmcn.com/package/%40bmunozg/react-image-area/#readme-key-features)
-   [文档](https://npmcn.com/package/%40bmunozg/react-image-area/#readme-notebook-docs)
-   [支助](https://npmcn.com/package/%40bmunozg/react-image-area/#readme-hammer_and_wrench-support)
-   [捐款](https://npmcn.com/package/%40bmunozg/react-image-area/#readme-memo-contributing)
-   [许可证](https://npmcn.com/package/%40bmunozg/react-image-area/#readme-scroll-license)

## :包装:安装

```bash
npm i @bmunozg/react-image-area
```

> **同伴依赖性 :** 反应17,18,和19都得到了支持.

## : 火箭: 用法

> 类型使用

```jsx
import { AreaSelector, IArea } from '@bmunozg/react-image-area'

const ExampleComponent = () => {
    const [areas, setAreas] = useState<IArea[]>([]);

    const onChangeHandler = (areas: IArea[]) => {
        setAreas(areas);
    }

    return (
        <AreaSelector
            areas={areas}
            onChange={onChangeHandler}
        >
            <img src='my-image.jpg' alt='my image'/>
        </AreaSelector>
    )
}

```

## : key: 特性

-   反应(可以使用像素或百分比).
-   触觉启动 .
-   最小/最大面积.
-   自定义区域渲染

## :注解本:医生

-   ### 必需的道具
    
    -   **`areas: IArea[]`**
        
        从无区域开始 :
        
        ```jsx
        // ...
        const [areas,setAreas] = useState<IArea[]>([])
        // ...
        return (
            <AreaSelector
                areas={areas}
            >
                <img src='my-image.jpg' alt='my image'/>
            </AreaSelector>
        )
        // ...
        ```
        
    -   **`onChange: (areas: IArea[]) => void`**
        
        选择区每次变化都会出现回调 .
        
        ```jsx
        // ...
        const [areas,setAreas] = useState<IArea[]>()
        // ...
        return (
            <AreaSelector
                onChange={setAreas}
            >
                <img src='my-image.jpg' alt='my image'/>
            </AreaSelector>
        )
        // ...
        ```
        
-   ### 默认道具
    
    -   **`maxAreas: number`**
        
        **默认 : `Infinity`**
        
        设定可绘制的最大区域, 默认没有限制 .
        
    -   **`unit: 'pixel' | 'percentage'`**
        
        **默认 : `pixel`**
        
        设定您要工作的单位 .
        
    -   **`minWidth: number`**
        
        **默认 : `0`**
        
        面积最小宽度.
        
    -   **`minHeight: number`**
        
        **默认 : `0`**
        
        面积很小.
        
    -   **`debug: boolean`**
        
        **默认 : `false`**
        
        显示当前区域的信息.
        
-   ### 可选道具
    
    -   **`maxWidth: number`**
        
        区域最大宽度 .
        
    -   **`maxHeight: number`**
        
        最大高度的区域.
        
    -   **`wrapperStyle: CSSProperties`**
        
        对包装元素应用样式.
        
        _已关闭的样式_数字 : `touchAction` | `boxSizing`
        
        ```js
        wrapperStyle={{
            border: '2px solid black'
        }}
        ```
        
    -   **`globalAreaStyle: CSSProperties`**
        
        对区域应用全局样式.
        
        _已关闭的样式_数字 : `position` | `touchAction` | `top` | `left` | `width` | `height` | `boxSizing`
        
        ```js
        globalAreaStyle={{
            border: '1.5px dashed blue',
            backgroundColor: 'lightblue',
            opacity: '0.5'
        }}
        ```
        
    -   **`customAreaRenderer: (areaProps: IAreaRendererProps) => ReactNode`**
        
        自定义渲染函数以显示区域内的信息 . _记住 添加密钥_
        
        ```jsx
        import { AreaSelector, IAreaRendererProps } from '@bmunozg/react-image-area'
        // ...
        const customRender = (areaProps: IAreaRendererProps) => {
            if (!areaProps.isChanging) {
                return (
                    <div key={areaProps.areaNumber}>
                        {areaProps.areaNumber}
                    </div>
                );
            }
        };
        // ...
        return (
            <AreaSelector
                {/*...*/}
                customAreaRenderer={customRender}
            >
                <img src='my-image.jpg' />
            </AreaSelector>
        );
        // ...
        ```
        
    -   **`mediaWrapperClassName: string`**
        
        申请媒体包装的类名( 儿童时通过的形象) .
        
        ```jsx
        // ...
        return (
            <AreaSelector>
                <img src="my-image.jpg" />
            </AreaSelector>
        );
        // ...
        ```
        
        _在组件内_ : 缩小:
        
        ```jsx
        // ...
        return (
            <div {/*wrapperStyle*/}>
                <div className={mediaWrapperClassName}>
                    {/*image passed as children*/}
                </div>
                {/*...Areas*/}
            </div>
        )
        //...
        ```
        

## :hammer 并 扳手:支持

请 [打开一个问题](https://github.com/ByronMunozG/react-image-area/issues/new) 页:1 支助.

## : memo: 贡献

请使用 [Github 流量](https://guides.github.com/introduction/flow/)创建分支, 添加承诺,以及 [打开拉动请求](https://github.com/ByronMunozG/react-image-area/compare/)。 。 。 .

## : 滚动: 许可证

[麻省理工学院](https://npmcn.com/package/%40bmunozg/react-image-area/LICENSE) © [拜伦穆诺兹G](https://github.com/ByronMunozG)

## 常见问题

### @bmunozg/react-image-area 是什么？

反应组件来选择图像的多个区域/区域\.

### 如何安装 @bmunozg/react-image-area？

在项目目录运行 npm install @bmunozg/react-image-area，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@types/react（^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）、react（^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bmunozg/react-image-area 支持 TypeScript 吗？

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

### @bmunozg/react-image-area 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @bmunozg/react-image-area 可以商用吗？

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

### @bmunozg/react-image-area 的下载量有多少？

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

### @bmunozg/react-image-area 还在维护吗？

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