专业的编程技术博客社区

网站首页 > 博客文章 正文

DGM.js:让智能形状与无界画布完美结合

baijin 2024-09-12 10:58:50 博客文章 5 ℃ 0 评论

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 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 -p

tailwind.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 class="text-4xl p-2 text-center">
      <a href="https://dgmjs.dev" class="underline" target="_blank">DGM.js</a> example
    </h1>
    // 添加根节点
    <div id="root" class="absolute top-16 left-8 right-8 h-96"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

然后，打开 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
      className="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/

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表