react-stretchable

基于react的拖拽缩放插件

View the Demo and its source for more

    import Zoomable from 'react-stretchable';
    
    class App extends React.Component {
      constructor(props) {
        super(props);
      }
      render() {
        const testOption = {
          zoomable: {
            width: {
              min: 200,//default 10 拉伸最小宽度
              max: 500//default 1000 拉伸最大宽度
            },
            height: {
              min: 300,//default 10 拉伸最小高度
              max: 500//default 500 拉伸最大高度
            }
          },
          onZoomStart: (result) => {
            console.log("onZoomStart", result);
          },
          onZoomEnd: (result) => {
            console.log("onZoomEnd", result);
          },
          onZooming: (result) => {
            console.log("onZooming", result);
          }
        }
        return <Zoomable style={{background: "blue"}} {...testOption}>
          <div>test</div>
        </Zoomable>;
      }
    };
    
    ReactDOM.render(
      <App />,
      document.getElementById('Test')
    );

API

参数			说明	类型	默认值
defaultPositionX			相对X轴的位移	number	0
defaultPositionY			相对Y轴的位移	number	0
fixedWidth			固定宽度，用于不拉伸宽度的情况下，一般使用非Number类型的宽度样式		null
fixedHeight			固定高度，用于不拉伸高度的情况下，一般使用非Number类型的高度样式		null
draggable	used		是否使用react-draggable拖拽功能	boolean	true
	options		react-draggable api Invalid props: [position, defaultPosition]	object	null
	handleCursor		可拖拽区域的光标类型	string	move
className			添加class样式	string	""
style			添加style属性	object	{}
zoomable	used		是否使用拉伸功能	boolean	true
	direction		可拉伸方向	array[string]	["top", "right-top", "right", "right-bottom", "bottom", "left-bottom", "left", "left-top"]
	width	min	大于内容宽度时，设置为默认宽度	number	10
		max	小于内容宽度时，设置为默认宽度	number	1000
	height	min	大于内容高度时，设置为默认高度	number	10
		max	小于内容高度时，设置为默认高度	number	500
onZoomStart			拉伸开始时调用	function(param=object{direction:方向,position:位置{x,y},width:宽度,height:高度})	-
onZooming			拉伸进行中调用	function(param=object{direction:方向,position:位置{x,y},width:宽度,height:高度})	-
onZoomEnd			拉伸结束时调用	function(param=object{direction:方向,position:位置{x,y},width:宽度,height:高度})	-