大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
什么是 DGM.jsA multi-purpose infinite canvas library supporting smart shapes, real-time collaboration, hand-drawn styles, image exports, and more.
DGM.js 是具有智能形状的无限画布，支持以下能力：
智能形状：智能形状可帮助开发者轻松创建具有复杂符号的图表，开发者还可以使用脚本、约束和扩展属性定义自己的智能形状。扩展属性：形状具有扩展属性，允许在形状中存储其他元数据，可用于脚本或约束。形状约束：约束用于定义形状的行为，例如：可以约束形状对齐、隐藏、调整大小等形状脚本：形状可以具有脚本，可用于定义形状的绘制或轮廓绘制方式，脚本以简单的 Clojure 风格 LISP 类语言编写。手绘风格：支持手绘风格形状以及实心 stype，提供如此多样化风格的原因是为了支持多保真度。最好以手绘风格绘制低保真度图片，以实心风格绘制高保真度图片。手绘风格由 roughjs 提供支持。实时协作：使用 dgmjs 的 yjs 插件在应用中启用实时协作，支持文档的实时同步以及多个光标和选择。徒手画：支持在由 perfect-freehand 提供支持的画布上徒手画，允许调整末端的细化和锥度。图像导出：画布上的形状可以以 PNG 和 SVG 格式导出，也可以复制到剪贴板以直接粘贴到其他应用中。多页：支持单个文档中的多页，每页可以具有不同的页面大小，支持无限、4:3、16:9 等暗模式：支持暗模式，所有颜色都自适应亮模式或暗模式，即使在亮模式下绘制也会自动以暗模式显示。富文本：文本形状支持富文本，因此，用户可以对文本的各个部分应用不同的样式，例如粗体、下划线、斜体，甚至不同的颜色。JSON 格式：画布上的形状可以轻松导出为 JSON 格式或从 JSON 格式导入，JSON 格式非常简单直观，因此易于处理。
目前 DGM.js 在 Github 通过 GPL-3.0 协议开源，短短时间内有超过 0.5k 的 star，是一个值得关注的前端开源项目。
如何使用 DGM.js首先使用 Vite 和 TS 实例化一个项目：
// 使用 react-tsnpm create vite@latest my-project -- --template react-tscd my-project接下来使用 TailwindCSS 用于样式设置。但是，开发者可以使用自己喜欢的任何其他样式方法，例如 CSS 或样式组件。
// npm 和 npxnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -ptailwind.config.js 配置如下:
// 创建 tailwind.config.js 文件，主要进行扫描规则、主题、插件等配置export default { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { extend: {}, }, plugins: [],};src/index.css 内容如下：
// 导入 css 样式@tailwind base;@tailwind components;@tailwind utilities;接着安装 DGM.js:
npm i @dgmjs/core @dgmjs/react在插入实际组件之前，首先更新 index.html。在这里，将简单的样式应用于将插入编辑器的区域并加载要使用的字体。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> // 加载字体文件 <link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@100..900&display=swap" rel="stylesheet" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <div>然后，打开 App.tsx 文件并插入 ：import {Editor} from "@dgmjs/core";import {DGMEditor} from "@dgmjs/react";function App() { // 实例化编辑器 const handleMount = async (editor: Editor) => { editor.newDoc(); editor.fitToScreen(); window.addEventListener("resize", () => { editor.fit(); }); }; return ( <DGMEditor Name="absolute inset-0 border rounded-lg" onMount={handleMount} /> );}export default App;DGM.js 浮动工具栏的支架组件显示在所选形状附近，以下是如何将浮动工具栏安装到编辑器的示例。
import {Editor} from "@dgmjs/core";import {DGMEditorCore, DGMFloatingToolbarHolder} from "@dgmjs/react";function MyFloatingToolbar() { return <div>my toolbar</div>;}function Editor() { const [editor, setEditor] = useState<Editor | null>(null); return ( <DGMEditorCore onMount={(editor) => setEditor(editor)} > <DGMFloatingToolbarHolder editor={editor as Editor} // 编辑器 toolbar={<MyFloatingToolbar/> // 浮动 toolbar distance={100} // 距离 onMove= (onBelow: boolean) => void } /> </DGMEditorCore> }}更多关于 DGM.js 的用法和示例可以参考文末资料，本文不再过多展开。
参考资料https://github.com/dgmjs/dgmjs
https://dgmjs.dev/api-react/dgm-floating-toolbar-holder/
https://dgmjs.dev/api-react/dgm-shape-view/
https://dgmjs.dev/
