花生_TL007

这个屌丝很懒，什么也没留下！

热门标签

Excalidraw-画图工具

作者：花生_TL007 | 2024-05-29 22:11:19

踩

excalidraw

文章目录

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

前言

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

在这里插入图片描述

一、简介

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

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

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

在这里插入图片描述

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

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

二、功能介绍

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

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

同时还能进行团队协作

在这里插入图片描述

三、设置字体

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

在这里插入图片描述

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

在这里插入图片描述

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

---------------------------------------------
链接：百度网盘
提取码：1ljc
---------------------------------------------

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

基本步骤：

GitHub：https://gitcode.com/excalidraw/excalidraw/tree/master

在这里插入图片描述

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

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

在这里插入图片描述

用 vs-code 打开项目

在这里插入图片描述

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

在这里插入图片描述

（一）注册字体

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

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

在这里插入图片描述

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

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

在这里插入图片描述

（二）预加载字体资源

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

    <link
      rel="preload"
      href="fonts/Muyao-Softbrush.ttf"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
    />
1
2
3
4
5
6
7

在这里插入图片描述

（三）增加字体枚举

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

  Muyao: 5,
1

在这里插入图片描述

（四）添加字体切换按钮

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

      {
        value: FONT_FAMILY.Muyao,
        text: t("labels.handDrawn"),
        icon: FreedrawIcon,
        testId: "font-moyao-normal",
      },
1
2
3
4
5
6