Nearly Perpendicular Macaroons

    hot-zone

    3.0.1 • Public • Published

    React Hot zone

    react 热区resize组件

    Installation

    npm install hot-zone --save
    

    Usage

    import React from 'react'
    import ReactDOM from 'react-dom'
    import HotZoneWrap from 'hot-zone'
    import img from './imgs/img.jpg'
    
    class App extends React.Component {
      state = {
        coordinates: [],
      }
    
      changeCoordinate = (coordinate, index, coordinates) => {
        this.setState({
          coordinates,
        })
      }
      deleteCoordinate = (coordinate, index, coordinates) => {
        this.setState({
          coordinates,
        })
      }
      onDoubleClick = () => {
        console.log("双击事件")
      }
      render() {
        return
            <HotZoneWrap
              src={img}
              width={1000}
              coordinates={this.state.coordinates}
              onChange={this.changeCoordinate}
              onDelete={this.deleteCoordinate}
              onDoubleClick={this.onDoubleClick}
              hidden={false}
            />
          </div>
      }
    }
    
    
    ReactDOM.render(
      <div>
        <App />
      </div>,
      document.getElementById('root'),
    )

    Props

    Prop Description Type Default
    src 图片链接 string -
    coordinates 热区拖拽信息 {id, x, y, width, height, urlLink}. array []
    width 图片宽度 number(in pixel) -
    clientWidth 拖拽窗口宽度(默认 320) B端配置区 number(in pixel) -
    height 图片高度 number(in pixel) -
    hidden 热区是否显性展示 bool
    isMobile 是否支持手机端 默认false bool
    onDraw 创建新热区 funtion(coordinate , index, coordinates) -
    onDrag 拖拽事件 funtion(coordinate , index, coordinates) -
    onResize Resize事件 funtion(coordinate , index, coordinates) -
    onChange 热区变化事件 funtion(coordinate , index, coordinates) -
    onDelete 热区删除事件 funtion(coordinate , index, coordinates) -
    onDoubleClick 热区双击事件 (hiden为true时触发) onLoad(e) -

    coordinate

    Prop Description Type Default
    id id string -
    x X number(in pixel) -
    y Y number(in pixel) -
    width Width number(in pixel) -
    height Height number(in pixel) -

    Install

    npm i hot-zone

    DownloadsWeekly Downloads

    4

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    28.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • jump.npm