反应-图像区域

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

生活实例

:书:目录

• 安装
• 使用量
• 特征
• 文档
• 支助
• 捐款
• 许可证

:包装:安装

npm i @bmunozg/react-image-area

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

: 火箭: 用法

类型使用

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[]

    从无区域开始 :

    // ...
    const [areas,setAreas] = useState<IArea[]>([])
    // ...
    return (
        <AreaSelector
            areas={areas}
        >
            <img src='my-image.jpg' alt='my image'/>
        </AreaSelector>
    )
    // ...
    

  • onChange: (areas: IArea[]) => void

    选择区每次变化都会出现回调 .

    // ...
    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

    wrapperStyle={{
        border: '2px solid black'
    }}
    

  • globalAreaStyle: CSSProperties

    对区域应用全局样式.

    已关闭的样式数字 : position | touchAction | top | left | width | height | boxSizing

    globalAreaStyle={{
        border: '1.5px dashed blue',
        backgroundColor: 'lightblue',
        opacity: '0.5'
    }}
    

  • customAreaRenderer: (areaProps: IAreaRendererProps) => ReactNode

    自定义渲染函数以显示区域内的信息 . 记住 添加密钥

    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

    申请媒体包装的类名( 儿童时通过的形象) .

    // ...
    return (
        <AreaSelector>
            <img src="my-image.jpg" />
        </AreaSelector>
    );
    // ...
    

    在组件内 : 缩小:

    // ...
    return (
        <div {/*wrapperStyle*/}>
            <div className={mediaWrapperClassName}>
                {/*image passed as children*/}
            </div>
            {/*...Areas*/}
        </div>
    )
    //...
    

:hammer 并 扳手:支持

请 打开一个问题 页:1 支助.

: memo: 贡献

请使用 Github 流量创建分支, 添加承诺,以及 打开拉动请求。 。 。 .

: 滚动: 许可证

麻省理工学院 © 拜伦穆诺兹G