TIP

GitHub - excalidraw/excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams

本地部署

1. 使用 git clone [email protected]:excalidraw/excalidraw.git 命令下载项目源码
2. 使用 yarn 命令下载依赖，在此过程中可能会出现如下错误：node 版本不匹配！ 那么该如何解决呢？使用 yarn config set ignore-engines true 命令忽略错误即可！再次运行 yarn 命令下载依赖，如下所示：
3. 使用 yarn start 命令运行项目，如下所示： 将会自动打开默认浏览器并访问 http://127.0.0.1:3000/，效果如下所示：

至此，Excalidraw 本地部署就圆满完成啦！🎉🎉🎉

添加字体

1. 下载字体霞鹜文楷，进入 Release 界面下载对应版本的 TTF 格式文件，

2. 将刚才下载的霞鹜文楷字体 LXGWWenKaiMono-Regular.ttf 复制到 public 目录下：

3. 注册字体：

   1. 编辑 public/font.css 文件，添加如下代码片段

      @font-face {
        font-family: "LXGWWenKai";
        src: url("LXGWWenKaiMono-Regular.ttf");
        font-display: swap;
      }

      

   2. 编辑 src/index-node.ts 文件，添加如下代码片段

      registerFont("./public/LXGWWenKaiMono-Regular.ttf", { family: "LXGWWenKai" });

      

4. 预加载字体资源，编辑 index.html 文件，在其中加入字体预加载代码，可以提高应用启动时的速度：

   <link
         rel="preload"
         href="/LXGWWenKaiMono-Regular.ttf"
         as="font"
         type="font/ttf"
         crossorigin="anonymous"
       />

   

5. 增加字体枚举，编辑 src/constant.ts 文件，在 FONT_FAMILY 常量中加入字体的枚举

   export const FONT_FAMILY = {
     Virgil: 1,
     Helvetica: 2,
     Cascadia: 3,
     LXGWWenKai: 4,
   };

   

6. 添加字体切换按钮，编辑 /src/actions/actionProperties.tsx 文件，在 PanelComponent 的返回值数组中加入下列元素

   {
       value: FONT_FAMILY.LXGWWenKai,
       text: t("labels.handDrawn"),
       icon: FreedrawIcon,
   },

   

7. 使用 npm run start 命令重新启动应用