十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Excalidraw虚拟白板快速上手指南:3步本地部署与手绘协作

Excalidraw虚拟白板快速上手指南:3步本地部署与手绘协作 Excalidraw虚拟白板快速上手指南3步本地部署与手绘协作【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一款开源虚拟白板提供无限画布、自然的手绘风格和多人实时协作绘图能力可以在本地快速运行并自定义主题。本指南按本地部署 → 界面认识 → 高频操作 → 进阶定制 → 协作导出的主线把常用功能逐一讲清楚。本地部署步骤克隆、装依赖、启动项目采用 monorepo 结构应用入口在excalidraw-app/核心绘图逻辑在packages/excalidraw/构建基于 Vite。运行前需先安装 Node.js 18 及以上版本和 yarn。克隆源码到本地git clone https://gitcode.com/GitHub_Trending/ex/excalidraw进入excalidraw目录安装依赖yarn install启动开发服务器yarn start启动完成后浏览器会自动打开页面看到欢迎界面即表示部署成功。若提示端口被占用可在excalidraw-app/vite.config.mts中调整端口参数后重试。首次使用欢迎界面布局与常用入口图Excalidraw 欢迎界面的三个区域——菜单、工具栏与帮助提示空白画布打开后界面按三个区域组织各功能入口位置固定熟悉一次即可快速定位左上角菜单按钮导出、偏好设置、统计面板、协作会话等全局功能顶部工具栏选择、矩形、菱形、圆形、箭头、直线、画笔、文本、框Frame等工具数字键 1–9 对应快速激活左下角缩放比例控制与撤销/重做按钮右下角问号按钮打开快捷键速查表高频操作元素编辑快捷键与视图切换日常绘图中的重复操作基本都有快捷键覆盖建议优先用键盘而不是鼠标点菜单操作快捷键撤销 / 重做CtrlZ / CtrlY复制选中元素CtrlD组合 / 取消组合CtrlG / CtrlShiftG打开本地文件CtrlO显示 / 隐藏网格Option几个提升效率的细节箭头拖动端点吸附到图形后即可建立绑定关系图形移动时箭头自动跟随画架构图时基本不用手动对齐按住空格键拖动可平移画布Ctrl滚轮缩放适合在大画布上快速巡视OptionR 进入查看模式隐藏编辑工具适合评审演示OptionZ 进入禅模式界面元素全部隐藏 在菜单中用 Option/ 可打开Stats for Nerds统计面板查看场景元素数量、画布宽高和文件体积画布元素过多导致卡顿时可先靠它判断是否需要精简。图Stats for Nerds 面板显示场景元素数、画布尺寸与存储占用进阶定制形状库、手绘风格与主题配置方法形状库Library把常用元素组合保存为库条目通过左侧面板导入团队成员可以共享同一套图标和模板避免重复绘制公式支持在文本框内输入$可进入 LaTeX 编辑数学公式与手写文字混排教学白板场景常用手绘风格所有图形默认带轻微抖动的线条接近真实板书的观感用画笔工具可以叠加更自由的笔触图Excalidraw 手绘风格的哆啦A梦示例图主题定制界面颜色方案、字体与元素样式集中在 packages/excalidraw/css/theme.scss改完重新构建即可生效多语言文案的 JSON 文件位于packages/excalidraw/locales/可按需修改本地语言包实时协作与作品导出协作是 Excalidraw 的核心能力之一在菜单中新建协作会话后把生成的链接发给对方双方即可同步编辑界面上能实时看到彼此的头像与光标位置。数据默认保存在本地浏览器中无需注册账号即可开始画图。作品完成后的导出途径导出为 PNG 或 SVG 图片直接用于文档和演示复制图片到剪贴板粘贴进聊天工具或设计稿另存为.excalidraw源文件后续继续编辑不丢失矢量信息图Excalidraw 协作白板主视觉突出让协作更简单的定位从本地部署、快捷键熟练、形状库复用到协作会话与导出以上流程覆盖了虚拟白板的大多数日常场景。如果下一步想把白板嵌入自己的 Web 应用可以查看examples/with-nextjs示例项目开发接入文档见 dev-docs/docs/excalidraw/excalidraw/development.mdx。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表