Excalidraw-画图工具

悠悠 2024-04-22 22:03 50阅读 0赞

#### 文章目录 ####

*  前言
 *  一、简介
 *  二、功能介绍
 *  三、设置字体

--------------------

## 前言 ##

今天推荐一款画图神器 `Excalidraw` ，之前画图我基本上都是用 `processon` 或者 `Axure` 等工具进行画图，直到我接触了 `Excalidraw`，真的是一发不可自拔，因为 `Excalidraw` 绘制的图片简直不要太好看了。

![在这里插入图片描述][e6df8a90852f49b1ab1301beb0ccf864.png_pic_center]

--------------------

## 一、简介 ##

`Excalidraw` 它是近两年新起的一款画图工具，基于 `Web` 的开源矢量图形编辑工具，主要包含白板、流程图的能力，简单好用。旨在帮助用户快速创建简单且美观的图形。它提供了一个简洁的绘图界面，用户可以使用鼠标或触摸屏在画布上绘制各种形状，如线条、矩形、圆形等。同时，`Excalidraw` 还支持多种颜色和线条样式，使用户能够自由地定制图形的外观。

`Excalidraw` 的特点是其简单易用和实时协作功能。用户只需打开网页，即可开始绘制图形，无需下载或安装任何软件。此外，`Excalidraw` 还支持多人同时编辑同一画布，用户可以邀请其他人加入协作，实时查看和编辑彼此的绘图内容。这使得 `Excalidraw` 成为团队协作和远程工作的理想选择。

可以直接在游览器上打开该网址：[https://excalidraw.com/][https_excalidraw.com] 进行作图

![在这里插入图片描述][1c13e4b307eb4972a02f657c57bc3b96.png]

`Excalidraw` 不仅能在游览器上进行画图，也可以在 `Obsidian` 中进行使用，只需要下载对应的插件即可。

PS：关于如何在 `Obsidian` 中使用我是不太清楚的，因为我没有用过 `Obsidian`，以下内容是针对如何在游览器上使用的教程

--------------------

## 二、功能介绍 ##

其实这款画图工具绘图的方式和其它的画图工具类似，稍微使用下就能掌握了

在工具栏中可以选择所需绘制的图形或者是其它一些功能，属性栏就是改变所选中图形或文字的样式

![在这里插入图片描述][217f51da474646f28d04a4fa62509de6.png]

素材库是存放素材的地方，可通过点击 `游览素材库` 就能看到别人提供的素材

![在这里插入图片描述][25e23d0bf1244cb1aad4924234ffdce0.png]

点击 `Add to Excalidraw` 就会添加到 `Excalidraw 素材库` 中，你可以将常用的素材放到 `个人素材库` 中方便快速使用

![在这里插入图片描述][9d860b1acd1b45f7a4a7829c7fd915b8.png]

可以将制作好的图片保存或者导出

![在这里插入图片描述][0f8b0714597a402981404f24c5c9bcc5.png]

同时还能进行团队协作

![在这里插入图片描述][de5da6b286b4443cbf4a1179547fe57c.png]

--------------------

## 三、设置字体 ##

不过在官网上进行画图有一个问题，就是中文没有与之匹配的字体，例如：

![在这里插入图片描述][a28b8819fd1841298af60222e905833f.png_pic_center]

当你的设计图上如果使用了中文，就会让人觉得很不搭，所以就会想要给中文字也设置一个字体，像这样：

![在这里插入图片描述][8859161999ec4837bcf0befe9f183b46.png_pic_center]

首先需要先下载字体，可以在网上找到很多类型的字体，这里我提供一个我目前使用的字体：

`---------------------------------------------`  
链接：[百度网盘][Link 1]  
提取码：`1ljc`  
`---------------------------------------------`

因为 `Excalidraw` 是开源的，可以直接在 `GitHub` 上下载该项目的源代码，然后再修改源代码设置中文字体，本地启动即可

**基本步骤：**

GitHub：[https://gitcode.com/excalidraw/excalidraw/tree/master][https_gitcode.com_excalidraw_excalidraw_tree_master]

![在这里插入图片描述][21d3799075774ee79b73de6524408615.png]

可以直接用 `git` 命令将源代码克隆到本地，在一个空白文件夹下打开 `git 窗口`，输入以下命令进行克隆

git init
    git clone https://gitcode.com/excalidraw/excalidraw.git

![在这里插入图片描述][f1afeb22b5cd4e82b3afcb05d3c4c794.png]

用 `vs-code` 打开项目

![在这里插入图片描述][754fefd1143b42cb82ed228544cdd6e0.png]

在 `public` 目录下创建一个`fonts` 的文件夹用于管理自己的字体，将下载好的字体放入到该文件夹下

![在这里插入图片描述][39dfe92d95c24b3eabbbcf0a2e398508.png]

`（一）注册字体`

编辑 `public/fonts.css` 文件，尾部追加内容：

@font-face {
        
      font-family: "Muyao";
      src: url("fonts/Muyao-Softbrush.ttf");
      font-display: swap;
      font-weight: 700;
    }

![在这里插入图片描述][baccf1fdd946447cb8996186c1453d03.png]

再编辑 `packages/excalidraw/index-node.ts` 文件，添加以下代码注册字体

registerFont("./public/fonts/Muyao-Softbrush.ttf", {
         family: "Muyao" });

![在这里插入图片描述][da175389ab674f02860d0dbc5343269f.png]

`（二）预加载字体资源`

编辑 `excalidraw-app/index.html` 文件，添加以下代码实现字体的预加载

![在这里插入图片描述][392c9dcd14114c18821f38e3ebbb7d2b.png]

`（三）增加字体枚举`

编辑 `packages/excalidraw/constants.ts` 文件，在 `FONT_FAMILY` 常量中加入字体的枚举

Muyao: 5,

![在这里插入图片描述][73ac05020d454515852f3178267f319b.png]

`（四）添加字体切换按钮`

最后，编辑 `package/excalidraw/actions/actionProperties.tsx`，在 `PanelComponent` 的返回值数组中加入下列元素：

{
        
            value: FONT_FAMILY.Muyao,
            text: t("labels.handDrawn"),
            icon: FreedrawIcon,
            testId: "font-moyao-normal",
          },

![在这里插入图片描述][df288645caf14e69b34d04e90a74d189.png]

完成以上修改之后进行保存就可以本地部署了

先安装相关依赖

yarn

![在这里插入图片描述][ab5cc03cfa434b37bd0d1ea644449bd3.png]

PS：这里对 `node` 版本是有要求的，如果版本过低会报错，我使用的 `node` 版本是 `v20.10.0`

启动项目

yarn start

![在这里插入图片描述][850e28a44d734932aff8dc4e503be122.png]

游览器上打开：[http://localhost:3000/][http_localhost_3000]

![在这里插入图片描述][9eba6988d3e3458a84a0bb8d9f517214.png]

就可以使用自己想要的字体了

--------------------

参考文章：

为 Excalidraw 添加中文手写字体：[https://blog.csdn.net/qq\_34802028/article/details/127927960][https_blog.csdn.net_qq_34802028_article_details_127927960]

【效率办公】Obsidain插件之Excalidraw-好用的手绘风格画图板：[https://www.bilibili.com/read/cv13794286/][https_www.bilibili.com_read_cv13794286]

[e6df8a90852f49b1ab1301beb0ccf864.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/7acf53c4a5004f1395aa7bb8b2fc81ea.png
[https_excalidraw.com]: https://excalidraw.com/
[1c13e4b307eb4972a02f657c57bc3b96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/6501add709cd49698607357b71b562c3.png
[217f51da474646f28d04a4fa62509de6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/d5071664d53c425c8e790e76d60612a5.png
[25e23d0bf1244cb1aad4924234ffdce0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/3af15f823396497eaf000aa6eb8f9baf.png
[9d860b1acd1b45f7a4a7829c7fd915b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/eba5e52dd2c543daadc38b973e6a3dd6.png
[0f8b0714597a402981404f24c5c9bcc5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/96e8b934ddfa40b2aea2ccabd4ba1761.png
[de5da6b286b4443cbf4a1179547fe57c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/f613c4e76e4c48e1b10d3938093642a3.png
[a28b8819fd1841298af60222e905833f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/7849ccb78c274c4c9266d430a02aff87.png
[8859161999ec4837bcf0befe9f183b46.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/1daa83375f5a4a8b9b3dc561c48a5d77.png
[Link 1]: https://pan.baidu.com/s/1AYbeuMS_XD7wf3jDt7unxg?pwd=1ljc
[https_gitcode.com_excalidraw_excalidraw_tree_master]: https://gitcode.com/excalidraw/excalidraw/tree/master
[21d3799075774ee79b73de6524408615.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5e0fd13713074abeb8a1f636ded074bf.png
[f1afeb22b5cd4e82b3afcb05d3c4c794.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/ce240615f5b74a3d9390bd3b50191756.png
[754fefd1143b42cb82ed228544cdd6e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/1057da48e4034a4699afe28e1078dca2.png
[39dfe92d95c24b3eabbbcf0a2e398508.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/b866f658915d4f6e8c092ef0c88e8515.png
[baccf1fdd946447cb8996186c1453d03.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/a0da6685089a4b02805118963547fbd9.png
[da175389ab674f02860d0dbc5343269f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/f55caf824eba4f149f63ad272cde6948.png
[392c9dcd14114c18821f38e3ebbb7d2b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/1c3e5f7dc6fc4a27b19f5d6d32358a83.png
[73ac05020d454515852f3178267f319b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/cac017e740704da2a7c8564e45cc85fa.png
[df288645caf14e69b34d04e90a74d189.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/81d5d868c6a7413d9d2c8c34be0041cf.png
[ab5cc03cfa434b37bd0d1ea644449bd3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/0204910e45b74277bd672fb777e59fcb.png
[850e28a44d734932aff8dc4e503be122.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5e5ee563750e48efa5103f8a255778e5.png
[http_localhost_3000]: http://localhost:3000/
[9eba6988d3e3458a84a0bb8d9f517214.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/0a5ab24ea78442119338a60a8ae8b49e.png
[https_blog.csdn.net_qq_34802028_article_details_127927960]: https://blog.csdn.net/qq_34802028/article/details/127927960
[https_www.bilibili.com_read_cv13794286]: https://www.bilibili.com/read/cv13794286/