d8d-design-canvas (中文版)

一个 React 组件,用于创建可缩放、可平移的画布,其中包含可拖动的项目。

English

安装

npm install d8d-design-canvas

使用方法

import React from "react";
import { Canvas, CanvasItem } from "d8d-design-canvas";
import "d8d-design-canvas/dist/style.css"; // 导入样式

function App() {
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <Canvas>
        <CanvasItem initialX={0} initialY={0}>
          <div style={{ width: 100, height: 100, backgroundColor: "blue" }} />
        </CanvasItem>
        <CanvasItem initialX={200} initialY={100}>
          <div style={{ width: 150, height: 80, backgroundColor: "green" }} />
        </CanvasItem>
      </Canvas>
    </div>
  );
}
export default App;

特性

• 可缩放的画布 (Ctrl + 鼠标滚轮 或 触摸屏双指缩放)
• 可平移的画布 (空格键 + 鼠标拖动 或 触摸屏拖动)
• 画布内可拖动的项目
• 自适应屏幕功能，支持排除特定元素
• 支持移动设备
• 支持键盘快捷操作 (复制、粘贴、剪切、删除)
• 矩形绘制模式
• 矩形选择模式
• 支持拖放功能，可获取放置位置的坐标

自定义选项

Canvas组件支持以下属性:

• controlledScale: 控制缩放比例的外部状态
• onScaleChange: 缩放比例变化时的回调函数
• onCopy: 复制操作的回调函数
• onPaste: 粘贴操作的回调函数
• onCut: 剪切操作的回调函数
• onDelete: 删除操作的回调函数
• zoomPanelClassName: 自定义缩放面板的CSS类名
• drawMode: 是否启用矩形绘制模式
• selectMode: 是否启用矩形选择模式
• onDrawComplete: 矩形绘制完成时的回调函数
• onSelectComplete: 矩形选择完成时的回调函数
• onContextMenu: 右键菜单事件的回调函数
• onDrop: 元素放置时的回调函数，提供放置位置的坐标

自适应屏幕功能

Canvas组件提供了一个 handleFitToScreen 函数，可以通过 ref 访问。这个函数可以将画布内容调整到最佳的缩放和位置，以适应屏幕。

import React, { useRef } from 'react';
import { Canvas, CanvasRef } from 'd8d-design-canvas';

function App() {
  const canvasRef = useRef<CanvasRef>(null);

  const handleFit = () => {
    canvasRef.current?.handleFitToScreen();
  };

  const handleFitExclude = () => {
    canvasRef.current?.handleFitToScreen('transform-layer');
  };

  return (
    <div>
      <Canvas ref={canvasRef}>
        {/* 画布内容 */}
      </Canvas>
      <button onClick={handleFit}>适应屏幕</button>
      <button onClick={handleFitExclude}>适应屏幕（排除特定元素）</button>
    </div>
  );
}

右键菜单

在画布上右键点击时，会触发 onContextMenu 事件。你可以通过这个事件来显示自定义的右键菜单。

<Canvas
  onContextMenu={(event) => {
    event.preventDefault();
    // 处理右键菜单逻辑
    console.log('右键菜单');
  }}
>
  {/* 子组件 */}
</Canvas>

矩形绘制和选择模式

要启用矩形绘制或选择模式，可以这样设置：

<Canvas
  drawMode={true}
  onDrawComplete={(rect) => {
    console.log('绘制的矩形:', rect);
    // 处理绘制完成的矩形数据
  }}
  selectMode={true}
  onSelectComplete={(rect) => {
    console.log('选择的区域:', rect);
    // 处理选择完成的区域数据
  }}
>
  {/* 子组件 */}
</Canvas>

在绘制或选择模式下，用户可以在画布上拖动鼠标来创建一个矩形。操作完成后，相应的回调函数将被触发，提供矩形的坐标和尺寸信息。

拖放功能

Canvas组件支持拖放功能，可以通过 onDrop 事件获取放置位置的坐标。

<Canvas
  onDrop={(event, position) => {
    console.log('元素被放置在:', position);
    // 处理放置逻辑
  }}  
>
  {/* 子组件 */}
</Canvas>

许可证

MIT