Excalidraw白板工具和快捷键

1- 📝 Excalidraw 简介

  • 🔗 Excalidraw 是一个开源的无限画布的手绘效果白板绘图工具，支持多人协作和端到端加密。
  • ✍️ Excalidraw 的作者是一位目前在 Facebook 工作的法裔前端开发工程师 Vjeux。
    • 除了是 Excalidraw 的作者之外，还是 React Native、Prettier 的联合创始人，
    • 也是 CSS-IN-JS、Yoga、React Conf 的创建者。
  • 🌟 Excalidraw 也是 Github 开源 项目，从 2020 年开源开始，Star 数一路直线增长。截止今天 (2024-06-16) 已达 75.7K。
  • 🤖 值得一说的是 excalidraw 里还增加了 AI 功能，可以根据文字生成控件或者流程图。

23 种设计模式

23种设计模式

1.1- 📝 中文手绘效果

有开源作者基于 excalidraw，二次开发增强了 " 中文手绘效果 " 和 " 多画布 " 能力，分别创建了 handraw 和 revezone，后者还增加了目录和多标签功能。

👀 字体效果对比（这样看自我感觉还是 handraw 舒服点，revezone 的多目录和多标签看起来也不错）：

1.2- 📷 字体效果对比

字体效果对比

1.3- 🔧 另外用之前画的一张流程图做效果对比

1.3.1- Excalidraw 神彩

excalidraw示意图

1.3.2- Handraw 手绘

上面的 .excalidraw 文件直接拖到网页打开：

handraw示意图

🔗 详情可参考：Handraw: 支持中文手写效果的 Excalidraw
🔗 详情可参考：Handraw： 支持中文手写效果的 Excalidraw

1.3.3- Revezone 里维佐内

revezone示意图

🔗 详情可参考：Revezone: 换个姿势使用Excalidraw手绘效果白板

Excalidraw https://excalidraw.com/ ，手绘风格，简单漂亮，但是它的在线版本不支持中文手写体，并且画好的结果经常就丢了，不方便在本地备份;

2- 🔍 快捷键

2.1- 📝 工具快捷键

  • R → Rectangle，矩形
  • D → Diamond，菱形
  • O → Oval，椭圆
  • A → Arrow，箭头
  • T → Text，文字 T → 文本，
  • P → Pan，画笔
  • E → Eraser，擦除 Eraser →， 擦除
  • F → Full screen，全屏 F → 全屏，全屏
  • Shift + H → Flip horizontal，水平翻转
  • Shift + H → 水平翻转，水平翻转
  • Shift + V → Flip vertical，垂直翻转
  • Shift + V → 垂直翻转，垂直翻转

2.2- 📝 鼠标快捷键 - Shift

长按 Shift 再执行某项操作：

  • Shift + 拖动元素 → 水平或纵向移动
  • Shift + 画矩形 → 正方形
  • Shift + 画菱形 → 正方形
  • Shift + 画椭圆 → 正圆
  • Shift + 拖动图形控制点 → 等比例缩放
  • Shift + 画箭头/划线 → 特定角度箭头/直线
  • Shift + 拖动直线控制点变为孤形 → 特定位置

2.3- 📝 鼠标快捷键 - Alt

长按 Alt （Mac 下是 Option，Windows 下是 Alt）再执行某项操作：

  • Alt + 画矩形/菱形/椭圆 → 从中心缩放
  • Alt + 拖动矩形/菱形/椭圆控制点 → 从中心缩放
  • Alt + Shift + 拖动矩形/菱形/椭圆控制点 → 从中心等比缩放
  • Alt + 拖动图形 → 复制出同样图形并移动

2.4- 📝 快速选择颜色

选中图形后通过快捷键 G（Background）或者 S （Stroke）调出颜色选择面板，每种颜色对应的快捷键刚好是左手键盘区域。

2.5- 📝 成组与取消成组

  • 成组与取消成组：将多个元素合并成组后，就可以像操作单个图形一样来操作图组了。
    • （Mac 下为 Command，Windows 下为 Ctrl）
  • Ctrl + G → 合并成组
  • Ctrl + Shift → 取消成组
  • Ctrl + 鼠标单击 → 选中子级图形

2.6- 📝 Vimium 插件快捷键冲突说明

  • Chrome 浏览器开启了 Vimium 插件，有些键冲突。
    • 在设置中的 Custom key mappings 里去掉相关快捷键：
unmap a
unmap d
unmap e
unmap q
unmap r
unmap t
unmap v
unmap g
unmap s

3- 🔍 参考资料

➊ 风靡科技圈的白板工具 Excalidraw 上手教程
➋ Handraw: 支持中文手写效果的 Excalidraw
➌ Revezone: 换个姿势使用Excalidraw手绘效果白板