文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Excalidraw, 一款超赞的开源白板工具

2024-11-30 01:24

关注

今天和大家安利一款超赞的开源项目, 基于这个项目我们可以轻松定制自己的白板, 思维导图, 原型草图设计, 流程图工具等, 它就是——Excalidraw。

接下来我会和大家介绍一下这款开源项目的功能特点, 如何二次开发, 以及如何使用我改造好的成品快速部署到自己的服务器上。

效果演示:

在线地址: https://board.dooring.vip。

开源地址: https://gitee.com/lowcode-china/excalidraw-mini。

功能介绍

首先 Excalidraw 的技术栈采用 Vite + React + TypeScript + Yarn + Husky, 目前开源 star 已经有 66k+, 还是非常受开发者喜欢的。

这里先介绍一下我使用完这款开源项目的一个功能总结:

虽然这款工具界面设计的非常简洁, 但是却可以做出非常精美的作品, 比如架构图(Dooring的架构就是用它画的~):

业务流程 & 设计思路。

思维导图:

当然我们还能发挥想象, 应用在更多的场景. 我之前写的很多技术文章里的架构图, 流程图, 都是用它来设计的, 偶尔也会用它来设计一下产品草图, 非常方便。

二次开发

接下来就到了技术小伙伴最关注的环节了,如何使用它, 二次开发自己的白板应用。

安装

首先我们需要在自己的项目里安装它:

yarn add react react-dom @excalidraw/excalidraw

接下来写一个简单的demo:

function App() {
  return (
    <>
      
      
); }

预览效果如下:

当然如果觉得它默认的主题色不符合自己的业务场景, 我们还能自定义主图风格:

.custom-styles .excalidraw {
  --color-primary: #fcc6d9;
  --color-primary-darker: #f783ac;
  --color-primary-darkest: #e64980;
  --color-primary-light: #f2a9c4;
}

.custom-styles .excalidraw.theme--dark {
  --color-primary: #d494aa;
  --color-primary-darker: #d64c7e;
  --color-primary-darkest: #e86e99;
  --color-primary-light: #dcbec9;
}

excalidraw 组件还提供了很多自定义的属性, 可以让我们轻松扩展和定制, 比如我们想扩展右侧功能按钮, 可以用如下的代码:

function App() {
  return (
    
{ return ( ); }} />
); }

这里我们用到了它的 renderTopRightUI 属性, 类型是一个函数, 我们在函数里返回我们想要定制的组件按钮即可, 效果如下:

当然还有很多可定制的属性, 大家也可以自行探索, 我把我自己定制好的一套白板发布到 gitee 上了, 包括中文支持, 欢迎页面, 页面控件等, 感兴趣的也可以直接基于我的项目二次开发. 如下:

在线地址: https://board.dooring.vip。

开源地址: https://gitee.com/lowcode-china/excalidraw-mini。

来源:趣谈前端内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯