react使用拖拽，缩放组件，采用react-rnd解决

项目中需求，要求给商品图片添加促销标签，并且可拉伸大小，和拖拽位置
最后选择用react-rnd来实现
话不多说，直接上代码！！！

1.在项目根目录下执行以下代码，引入react-rnd

yarn add react-rnd

2.在项目中直接引用，以下是最简单的示例

import React, { Component } from 'react';
import { Rnd } from 'react-rnd';

interface State {
    /**
     * 正在操作中
     */
    isDragging: boolean;
    /**
     * 拉伸大小
     */
    size: {
        width: number;
        height: number;
    };
    /**
     * 位置
     */
    position: {
        x: number;
        y: number;
    };
}
export class ProductMainImageWatermarkRulePreview extends Component<unknown, State> {
    constructor(props: any) {
        super(props);
        this.state = {
            isDragging: false,
            size: {
                width: 100,
                height: 100,
            },
            position: {
                x: 0,
                y: 0,
            },
        };
    }
    handleDragStart = () => {
        this.setState({
            isDragging: true,
        });
    };
    handleDragStop = (e: any, d: any) => {
        this.setState({
            isDragging: false,
            position: {
                x: d.x,
                y: d.y,
            },
        });
    };
    handleResizeStart = () => {
        this.setState({
            isDragging: true,
        });
    };
    handleResizeStop = (e: any, direction: any, ref: any, delta: any, position: any) => {
        this.setState({
            isDragging: false,
            size: {
                width: ref.style.width,
                height: ref.style.height,
            },
            position: position,
        });
    };
    render() {
        const { position, isDragging, size } = this.state;
        return (
            <div style={{ width: 375, height: 375, backgroundColor: 'gray' }}>
                <Rnd
                    // default={{ x: position.x, y: position.y, width: size.width, height: size.height }}
                    // minHeight={1}
                    // maxHeight={375}
                    // minWidth={1}
                    // maxWidth={375}
                    size={size}
                    position={position}
                    bounds="parent"
                    onDragStart={this.handleDragStart}
                    onDragStop={this.handleDragStop}
                    onResizeStart={this.handleResizeStart}
                    onResizeStop={this.handleResizeStop}
                    resizeParentMore={true} // 如果需要阻止父容器跟随大小变化，可以设置为false
                    enableResizing={{
                        top: true,
                        right: true,
                        bottom: true,
                        left: true,
                        topRight: true,
                        bottomRight: true,
                        bottomLeft: true,
                        topLeft: true,
                    }}
                    resizeHandles={['se', 'sw', 'ne', 'nw']}
                    style={{ opacity: isDragging ? 0.8 : 1 }}
                    onClick={(e: any) => e.stopPropagation()}
                >
                    <div>
                        <img
                            src="https://b-puzhehei-cdn.co-mall.net/global/magic-backend/invitation-activity/button-picture.png"
                            alt=""
                            style={{ width: '100%', height: '100%' }}
                        />
                    </div>
                </Rnd>
            </div>
        );
    }
}

实现效果如下

还有一些属性，罗列出来，希望对大家有帮助～

default: { x: number; y: number; width?: number | string; height?: number | string;};                设定默认的一些属性，如初始坐标和宽高
size?: { width: (number | string), height: (number | string) };  组件的大小，即宽度与高度
position?: { x: number, y: number };  组件的坐标，即横坐标与纵坐标
resizeGrid?: [number, number];   重置大小时的增量，默认为[1, 1]
dragGrid?: [number, number];    拖拽时的增量，默认为[1, 1]
lockAspectRatio?: boolean | number;    锁定纵横比，可设置为布尔值或数字值，当设置为true时，组件会锁定纵横比，并且该值为组件初始宽高的比值；而设置为数字时，组件调整大小时会以该值作为纵横比来调整
enableResizing?: ?Enable   用以设置是否可调整大小，可从组件各个方向上或整体来设置：
disableDragging?: boolean;     是否禁用拖拽
dragAxis?: 'x' | 'y' | 'both' | 'none'    设置组件的拖拽方向
bounds?: string;    组件的边界：可设置为父组件的名称或者window、body或者一个选择器的名称(需要带上符号. or #)

方法

onResizeStart?: RndResizeStartCallback; // 开始调整大小时调用

onResize?: RndResizeCallback; // 组件调整大小时调用

onResizeStop?: RndResizeCallback; // 组件停止调整大小时调用

onDragStart: DraggableEventHandler; // 组件开始拖拽时调用

onDrag: DraggableEventHandler; // 组件拖拽时调用

onDragStop: DraggableEventHandler; // 组件停止拖拽时调用