DGM.js:让智能形状与无界画布完美结合
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
什么是 DGM.js
A 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-ts
npm create vite@latest my-project -- --template react-ts
cd my-project接下来使用 TailwindCSS 用于样式设置。但是，开发者可以使用自己喜欢的任何其他样式方法，例如 CSS 或样式组件。
// npm 和 npx
npm install -D tailwindcss postcss autoprefixer
npx 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。在这里，将简单的样式应用于将插入编辑器的区域并加载要使用的字体。
// 加载字体文件
DGM.js example
// 添加根节点
<script type="module" src="/src/main.tsx"></script>
然后，打开 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 (
DGM.js 浮动工具栏的支架组件显示在所选形状附近，以下是如何将浮动工具栏安装到编辑器的示例。
import {Editor} from "@dgmjs/core";
import {DGMEditorCore, DGMFloatingToolbarHolder} from "@dgmjs/react";
function MyFloatingToolbar() {
return my toolbar;
}
function Editor() {
const [editor, setEditor] = useState(null);
return (
setEditor(editor)}
>
<DGMFloatingToolbarHolder
editor={editor as Editor}
// 编辑器
toolbar={
}
}
更多关于 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/