时间戳

首页 > 解决方案 > 如何使用反应拖放使 SVG 组件调整大小

reactjs - 如何使用反应拖放使 SVG 组件调整大小

问题描述

在此先感谢，现在正在使用 React DND 为容器中的 svg 形状启用拖放功能。我想使用鼠标调整任何形状的大小（从 4 个侧面中的任何一个拖动）。如何使用 React 拖放库完成此功能。据我所知，我已经理解使用 React Drag and Drop 只能移动内容。我还尝试在拖放中使用库React Re Resizable 。但由于组件处理 SVG 库，Resizable 库不起作用。

是否有任何解决此问题的方法，或者任何用于调整形状/svg 组件大小的 React 库。

以下是沙箱网址和代码

import React from "react";
import { render } from "react-dom";
import { Resizable } from "re-resizable";

const style = {
  background: "#f0f0f0"
};

const App = () => (
  <svg>
    <Resizable
      style={style}
      defaultSize={{
        width: 200,
        height: 200
      }}
    >
      <rect height={200} width={200} />
    </Resizable>
  </svg>
);

render(<App />, document.getElementById("root"));


https://codesandbox.io/s/reverent-liskov-hcq75?fontsize=14&hidenavigation=1&theme=dark

标签： reactjsreact-dnd

解决方案

推荐阅读