• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

请问你在用什么工具绘图

武飞扬头像
晚天
帮助1

如果你不只闷头写代码,还需要方案设计、内部分享、向上汇报、述职答辩、追求晋升等等,绘图工具几乎是互联网从业者标配工具。好用的绘图工具,可以大幅提升绘图效率和图形效果,甚至能够让你的汇报鹤立鸡群、增色不少。

那么,弱弱的请教下,你在用什么「工具绘图」呢?欢迎大家把自己最喜欢的绘图工具回复在本文的评论区。

本文先抛砖引玉,介绍一个作者在使用,且非常喜欢的白板绘图工具 Excalidraw

Excalidraw

Excalidraw 是一个开源的无限画布的手绘效果白板绘图工具,支持多人协作和端到端加密。

学新通

作者

Excalidraw 的作者是一位目前在 Facebook 工作的法裔前端开发工程师 Vjeux。除了是 Excalidraw 的作者之外,还是 React Native、Prettier 的联合创始人,也是 CSS-IN-JS、Yoga、React Conf 的创建者。

学新通

发展趋势

Excalidraw 也是 Github 开源项目,从 2020 年开源开始,Star 数一路直线增长,目前已经积攒了 49.1k 的 Star 数。

学新通

从 npm 趋势上,我们也能看到 Excalidraw 的热度目前也处于一个爆发式增长的阶段,没有已经有接近 7w 的 npm 下载量。

学新通

效果

下面我们来看下,使用 Excalidraw 我们能够绘制怎样的效果.

首先,比较常见的,我们可以绘制手绘效果的流程图,从这张图的效果我们可以看出 Excalidraw 的手绘效果还是非常真实的。

学新通

我们还可以绘制网页的线框图、步骤图、不同形式的流程图、看板图等等;

线框图:

学新通

步骤图:

学新通

天马星空的流程图:

学新通

看板:

学新通

甚至只要发挥想象力,我们可以绘制出所有手绘等够得到的图形。比如这些火柴人。

学新通

功能介绍

对效果进行简单展示之后,我们来对 Excalidraw 的工具进行手把手的演示。接下来,我将给大家演示 Excalidraw 的布局、基础绘图、图层、批量操作、图表、快捷键、文件保存、多端能力。

布局

我们来看下 Excalidraw 的布局。

学新通

左上角是菜单栏,有打开文件、保存文件、导出图片、实时协作、重置画布、设置画布背景等功能;

顶部是工具栏,有拖动、选择、矩形、菱形、圆形、箭头、线、画笔、文本、图片、橡皮擦等功能;

右上角有实时协作、素材库功能;

左下角可以缩放画布、撤回操作和取消撤回操作;

右下角是快捷键和帮助。

基础绘图

介绍完布局,我们来实操下绘图。Excalidraw 的绘图非常简单,拿到就可以直接上手。下面,我们来绘制一个矩形,我们可以看到在左侧菜单,可以对我们刚绘制的图形进行属性设置,包括描边、背景、宽度、边框、线条风格、边角、透明度,同时我们可以可以进行图层、赋值、删除、增加链接等操作;

接下来,我们用 Excalidraw 绘制一个简单的流程图。

学新通

如果想要增加绘图效率,最好的方式就是使用快捷键。我们可以在右下角的快捷键帮助中看到所有快捷键。

学新通

此外,Excalidraw 还支持图层、批量对齐、文件保存、图片导出等能力。

自动生成图表

Excalidraw 还有一个非常值得一提的功能是基于“两列表格”自动生成图表,简直秀的飞起。

例如,我们有下列「全球公司市值排行榜」两列表格数据:

公司名称 市值 (亿美元)
Apple 2,430.92
Microsoft 1,633.23
Amazon 1,599.03
Alphabet 1,087.08
Facebook 757.89
Tencent 728.39
Alibaba 713.7
Berkshire Hathaway 613.37
Visa 438.32
Johnson & Johnson 422.63

我们复制上述两列数据黏贴到 Excalidraw 中,将会得到如下效果:

学新通

随便选择一个图表形式,即可生成如下效果:

学新通

是不是秀的飞起?再也不用使用 Excel 中生成的丑陋的图表了。

缺点

Excalidraw 的功能演示完成。整体体验下来,Excalidraw 的绘图能力是非常强大的,但是也有两个比较致命的缺点,会劝退很多人。

  1. 缺少中文手绘效果,使得使用中文绘制出的内容充满违和感;
  2. 不支持多画布能力,如果我们需要并行绘制多个画布,往往是不太可行的。但是,现实场景下,我们不可能一个个的画布绘制,往往是在绘制一个主题画布的时候,就需要绘制另一个主题的画布。

解决方案

只提问题,不提解决方案是远远不够的。这里作者针对上述两个问题,也给出了解决方案。那就是 Handraw,一个支持中文手绘效果和多画布能力的 Excalidraw 增强版。

Handraw

Handraw 是基于开源 Excalidraw 进行了「中文手绘效果」和「多画布」能力增强,并推出了免费线上服务 Handraw 和开源项目 excalidraw-cn

中文手绘效果

我们直接拿前文中的流程图做示例,分别使用 Handraw 和 Excalidraw 实现该流程图,对比效果如下,Handraw 完美支持了中文手绘效果,解决了手绘图中中文效果确是打印体这种满满违和感的问题。

学新通

多画布能力

Handraw 相较 Excalidraw 在左上侧菜单中新增了「新建画布」和「切换画布」功能,使得用户可以同时创建和绘制多个画布,相互不干扰,大大提升并行绘制效率。与此同时,也在画布左上角显示了当前画布名称,告诉用户当前编辑的画布是哪一个,避免在并行绘制过程中出现画布混淆。

学新通

总结

Excalidraw 是一个非常强大的手绘效果的白板工具,一经推出,就非常火爆、广受欢迎。但是作为中文用户,在使用中却没有中文手绘效果,这是接受不了的。另外,只有单画布能力也大大限制了我们日常的使用效率。

因此,作者基于开源 Excalidraw 进行了能力增强,并推出了免费线上服务 Handraw 和开源项目 excalidraw-cn(欢迎 star)。欢迎大家免费使用。

另外,欢迎大家把自己喜欢的绘图工具回复到评论区,大家互通有无,交流学习。

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhbkeahc
系列文章
更多 icon
同类精品
更多 icon
继续加载