Giter VIP home page Giter VIP logo

image-drag's Introduction

image-drag

图片拖拽缩放组件

NPM

NPM

Example

import React from 'react';
import ImageDrag from 'image-drag';

class Image extends React.Component {
  state = {
    isShow: false,
    isUse: true,
  }
  render() {
    const { isShow, isUse } = this.state;
    const dragProps = {
      width: 600, // can only receive number
      image: 'https://image.xx.jpg' || 'file',
      toolBar: {
        isShow,
        isUse
      }
    }
    return (<ImageDrag {...dragProps} />);
  }
}
export default Image;

CODE

API

name type desc other version
width number 图片区域宽度 默认600 v 1.0.0
height number 图片区域高度 默认400 v 1.0.0
image file or url 图片 * v 1.0.0
children dom元素 图片 *, 如果image也存在,此属性(children)优先 v 1.0.0
imgStyle object 图片样式属性 * v 1.0.0
toolBar object 工具栏配置 * v 1.0.0
dragPoint object 拖拽点配置 * v 1.0.0
tabIndex string 设置 tabIndex 属性 * v 1.2.0
onClickImage function 点击图片 function(toolInfo) v 1.0.0
onDragStart function 拖拽开始 function(toolInfo, event, [clientX, clientY]) v 1.1.0
onDragging function 拖拽中 function(imageDragStyle) v 1.1.0
onDragEnd function 拖拽结束 function(toolInfo, event, [clientX, clientY]) v 1.1.0
onFocusImage function 获取图片焦点事件 function(toolInfo) v 1.2.1
onBlurImage function 失去图片焦点事件 function(toolInfo) v 1.2.1
renderTool function 自定义工具栏显示形式 function(toolInfo),接收一个Dom元素 v 1.0.0

renderTool中传入的参数为 toolBar 中的信息, 同时会多传递一个刷新图片尺寸的函数

v 1.2.x 及以上版本中 function(toolInfo) 传递的 toolInfo 为只读属性

toolBar

name type desc other version
top number 位置属性 0 v 1.0.0
bottom number 位置属性 0 v 1.0.0
left number 位置属性 0 v 1.0.0
right number 位置属性 0 v 1.0.0
width number 拖拽后图片区域宽度 * v 1.0.0
height number 拖拽后图片区域高度 * v 1.0.0
className string toolBar样式 * v 1.0.0
isUse boolean 是否使用toolBar true v 1.0.0
isShow boolean 是否接管显示toolBar,会覆盖掉内置显示属性 false v 1.0.0
isBlock boolean 是否进行块状化布局 * v 1.0.0

dragPoint

name type desc other version
topLeftPoint object 左上角拖拽点样式 {} v 1.0.0
topRightPoint object 右上角拖拽点样式 {} v 1.0.0
bottomLeftPoint object 左下角拖拽点样式 {} v 1.0.0
bottomRightPoint object 右下角拖拽点样式 {} v 1.0.0
style object 拖拽点公共样式 * v 1.0.0

image-drag's People

Contributors

liuqing650 avatar

Watchers

 avatar  avatar

image-drag's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.