react-resizable-rotatable-draggable

react-resizable-rotatable-draggable 是一个基于 React 的可调整大小、可旋转和可拖动的组件库。它提供了一个简单而强大的方式来创建可交互的元素，并将其嵌入到你的应用程序中。

特点

• 可调整大小：允许用户通过拖动边缘或角落调整元素的大小。
• 可旋转：允许用户通过拖动旋转手柄或直接在元素上滑动来旋转元素。
• 可拖动：允许用户通过鼠标或触摸拖动元素到指定位置。
• 约束和限制：可以选择在拖动、调整大小或旋转过程中添加约束和限制，例如最大/最小尺寸、角度限制等等。
• 自定义样式：提供了灵活的配置选项，以便自定义元素的样式和外观。
• 支持移动设备：适用于桌面和移动设备，具有可触摸优化的交互。

安装

通过 npm 安装：

$ npm install react-resizable-rotatable-draggable

通过 yarn 安装：

$ yarn add react-resizable-rotatable-draggable

使用示例

import React from 'react';
import ResizableRotatableDraggable from 'react-resizable-rotatable-draggable';

const MyComponent = () => {
  return (
    <ResizableRotatableDraggable
      width={200}
      height={200}
      aspectRatio={false}
      onResize={(width, height) => console.log('Resized to', width, height)}
      onRotate={(angle) => console.log('Rotated to', angle)}
      onDrag={(x, y) => console.log('Dragged to', x, y)}
    >
      <div>My Resizable Rotatable Draggable Component</div>
    </ResizableRotatableDraggable>
  );
};

export default MyComponent;

API

Props

width: number

设置组件的初始宽度。

height: number

设置组件的初始高度。

aspectRatio: boolean

设置是否保持宽高比。如果设置为 true，则在调整大小期间会保持宽高比。

onResize: function(width: number, height: number)

在调整大小时触发的回调函数。参数 width 和 height 分别是组件的宽度和高度。

onRotate: function(angle: number)

在旋转时触发的回调函数。参数 angle 是组件的旋转角度。

onDrag: function(x: number, y: number)

在拖动时触发的回调函数。参数 x 和 y 分别是组件的水平和垂直位置。

其他设置

还可以通过其他属性来自定义组件的样式和行为，如 style、minWidth、minHeight、maxWidth、maxHeight、maxRotateAngle 等等。详细的属性列表和使用说明请参考文档。

常见问题

请参考常见问题以获取常见问题和解决方案。

贡献

如有任何问题、建议或贡献，请随时提出 Issue 或创建 Pull 请求。

许可证

MIT. 详细信息请参阅 许可证文件。