DGM.js：JavaScript智能形状无限画布库及其使用指南

概述

DGM.js是一个功能强大的JavaScript库，提供了一个无限画布，支持智能形状、实时协作、手绘风格等特性，适用于开发类似Excalidraw、tldraw或Miro的应用程序。 ​

主要特性

• 智能形状：​支持脚本、约束和扩展属性，允许开发者自定义形状的行为和外观。​
• 无头组件（React）：​提供与React集成的无头组件，方便在React项目中使用。​
• 无限画布：​支持无限滚动和缩放，适用于大型图表和设计。​
• 多页面支持：​允许在一个项目中创建多个页面，方便组织内容。​
• 手绘风格：​提供手绘风格的渲染选项，增强视觉表现力。​
• 实时协作：​支持多人实时协作编辑，提升团队工作效率。​
• 暗色模式：​支持自适应的暗色模式，提供更好的用户体验。​
• 导出功能：​支持将画布内容导出为PNG、SVG和PDF格式。​
• 富文本支持：​允许在画布中添加和编辑富文本内容。​
• JSON导入/导出：​支持将项目保存为JSON格式，方便数据的导入和导出。 ​

快速开始

要在项目中使用DGM.js，请按照以下步骤操作：

安装依赖：

使用npm安装DGM.js核心包：

npm install @dgmjs/core

引入并初始化：

在React组件中引入DGM.js并进行初始化：

import React, { useEffect } from 'react';
import { DGM } from '@dgmjs/core';

const MyComponent = () => {
  useEffect(() => {
    const dgm = new DGM({
      container: document.getElementById('dgm-container'),
    });
    dgm.initialize();
  }, []);

  return <div id="dgm-container" style={{ width: '100%', height: '100vh' }} />;
};

export default MyComponent;

添加形状：

使用DGM.js的API在画布上添加形状：

const shape = dgm.createShape({
  type: 'rectangle',
  x: 100,
  y: 100,
  width: 200,
  height: 100,
  fillColor: '#f0f0f0',
});
dgm.addShape(shape);

示例项目

以下是使用DGM.js构建的示例项目：

Frame0：​一个类似Sketch风格的低保真线框工具。​https://frame0.app/

DGM App：​一个功能齐全的基于Web的手绘笔记应用程序。​https://dgm.sh/home/

draw2app：​通过OpenAI将低保真草图生成Web应用程序。 ​https://draw2app.pages.dev/