Tool之Excalidraw:Excalidraw(开源的虚拟手绘风格白板)的简介、安装和使用方法、艾米莉应用之详细攻略

Tool之Excalidraw:Excalidraw(开源的虚拟手绘风格白板)的简介、安装和使用方法、艾米莉应用之详细攻略

目录

Excalidraw 简介

1、Excalidraw 的主要特点:

Excalidraw 安装和使用方法

1、Excalidraw的安装

T1、使用 npm 安装:

T2、使用 yarn 安装:

Excalidraw 案例应用


Excalidraw 简介

Excalidraw是一个开源的虚拟手绘风格白板,支持协作和端到端加密。你可以用它创建漂亮的手绘风格图表、线框图或任何你想要的东西。它是一个免费且开源的无限画布白板,具有手绘风格、暗模式、可定制性、图片支持、形状库支持、本地化(i18n)支持等特性。

Excalidraw 支持导出为 PNG、SVG 和剪贴板格式,并使用开放格式——将绘图导出为 .excalidraw JSON 文件。它提供丰富的工具,例如矩形、圆形、菱形、箭头、线条、自由绘制、橡皮擦等,并支持箭头绑定和带标签的箭头,以及撤销/重做、缩放和平移功能。

Excalidraw.com 网站是一个展示 Excalidraw 功能的最小化应用,其源码也包含在这个仓库中。该应用具有PWA支持(离线工作)、实时协作、端到端加密和本地优先支持(自动保存到浏览器)等功能,并支持生成可共享的只读链接。 未来,这些功能将作为插件添加到 npm 包中。

GitHub地址:https://github.com/excalidraw/excalidraw

1、Excalidraw 的主要特点:

Excalidraw 结合了手绘风格的直观易用性与强大的协作和导出功能,使其成为一个功能丰富且易于使用的虚拟白板工具。

>> 手绘风格:Excalidraw 的核心特点是其手绘风格的界面和绘图体验,让用户感觉像是在用笔在白板上作画。

>> 虚拟白板:它是一个虚拟白板,允许用户在数字环境中进行绘图和协作。

>> 无限画布:提供无限大的画布空间,用户无需担心空间限制。

>> 开源免费:Excalidraw 是一个开源项目,并且完全免费使用。

>> 协作功能:支持实时协作,多个用户可以同时在同一个画布上进行编辑。

>> 端到端加密:确保用户数据的安全性和隐私性。

>> 可定制性:允许用户自定义设置和扩展功能。

>> 图片支持:支持插入和编辑图片。

>> 形状库支持:提供各种形状库,方便用户快速创建图表。

>> 多语言支持:支持多种语言,方便全球用户使用。

>> 多种导出格式:支持导出为 PNG、SVG 和剪贴板格式,以及 .excalidraw JSON 文件。

>> 丰富的工具:提供多种绘图工具,例如矩形、圆形、箭头、线条、自由绘制、橡皮擦等,并支持箭头绑定和带标签的箭头。

>> 撤销/重做:支持撤销和重做操作,方便用户修改错误。

>> 缩放和平移:支持缩放和平移功能,方便用户查看和编辑大型图表。

>> PWA 支持:Excalidraw.com 版本支持渐进式网络应用 (PWA),可以在离线状态下工作。

>> 本地优先支持:自动保存到浏览器,避免数据丢失。

>> 可共享链接:可以生成可共享的只读链接,方便与他人分享作品。

Excalidraw 安装和使用方法

1、Excalidraw的安装

以下说明适用于将 Excalidraw 集成到您自己的应用程序时安装 Excalidraw npm 包。要运行本地开发环境,请参考开发指南。

T1、使用 npm 安装:

npm install react react-dom @excalidraw/excalidraw

T2、使用 yarn 安装:

yarn add react react-dom @excalidraw/excalidraw

Excalidraw 案例应用

Excalidraw 已经被许多公司和项目集成使用,包括:Google Cloud、Meta、CodeSandboxObsidian、Excalidraw、Replit、Slite、Notion、HackerRank以及许多其他公司和项目,这些案例展示了 Excalidraw 在不同场景下的应用,例如团队协作、流程图绘制、思维导图创作等。 更多集成案例可参考 GitHub 项目页面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/494105.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式之【观察者模式】

观察者模式: 应用于发布-订阅消息模型中,订阅者订阅一个主题后,当有新消息到达时,所有订阅者都会收到通知。 主要关注的是对象之间的通信。是一种对象之间的一对多关系,多个对象依赖于一个对象,当被依赖的…

页面无滚动条,里面div各自有滚动条

一、双滚动条左右布局 实现效果 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Doc…

(Z Shell)zsh: no matches found: ? 使用单引号包裹

文章目录 dgqdgqdeMac-mini ProductAuthentication % git commit -m "open-type"{{isCodeValid ? getPhoneNumber : none}}"" zsh: no matches found: ?git commit -m open-type"{{isCodeValid ? getPhoneNumber : none}}"你遇到的 zsh: no m…

鸿蒙元服务从0到上架【第二篇】

第一招&#xff1a;在AppGallery后台下载对应的证书等文件 AppGallery后台 新增发布证书&#xff0c;具体操作可查看申请发布证书 申请发布Profile证书 第二招&#xff1a;在IDE中填写 第三招&#xff1a;打包【⚠️发布上架的只能是Build App】 终端展示这一片绿&#xf…

网络安全概论——身份认证

一、身份证明 身份证明可分为以下两大类 身份验证——“你是否是你所声称的你&#xff1f;”身份识别——“我是否知道你是谁&#xff1f;” 身份证明系统设计的三要素&#xff1a; 安全设备的系统强度用户的可接受性系统的成本 实现身份证明的基本途径 所知&#xff1a;个…

【学习记录】浏览器指纹相关学习记录(指纹介绍、获取指纹、修改指纹、随机指纹保护隐私等)

用途 不需要用户登录&#xff0c;可以识别是同一个用户&#xff0c;用于反爬虫广告推送等一类的场景 指纹在线查询地址 http://www.fingerprintbrowser.com/ CreepJS 浏览器指纹在线检测网站:代理IP防关联伪装度查询工具 IP检测大师 【自动化】Python SeleniumUtil 工具 开…

redis数据转移

可能有时候因为硬件的原因我们我们需要更换服务器&#xff0c;如果更换服务器的话&#xff0c;那我们redis的数据该怎样转移呢&#xff0c;按照一下步骤即可完成redis数据的转移 1.进入redis客户端 2.使用 bgsave命令进行数据的备份&#xff0c;此命令完成后会在你的redis安装目…

【MySQL】数据库 Navicat 可视化工具与 MySQL 命令行基本操作

&#x1f4af; 欢迎光临清流君的博客小天地&#xff0c;这里是我分享技术与心得的温馨角落 &#x1f4af; &#x1f525; 个人主页:【清流君】&#x1f525; &#x1f4da; 系列专栏: 运动控制 | 决策规划 | 机器人数值优化 &#x1f4da; &#x1f31f;始终保持好奇心&…

腾讯云智能结构化OCR:以多模态大模型技术为核心,推动跨行业高效精准的文档处理与数据提取新时代

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大三学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…

登山第十六梯:深度恢复——解决机器人近视问题

文章目录 一 摘要 二 资源 三 内容 一 摘要 深度感知是基于 3D 视觉的机器人技术的一个重要问题。然而&#xff0c;现实世界的主动立体或 ToF 深度相机经常会产生嘈杂且深度不完整&#xff0c;从而成为机器人性能的瓶颈。在这项工作中&#xff0c;提出了 一个基于学习的立体…

Leetcode中最常用的Java API——util包

前言&#xff1a;在刷力扣的时候是核心代码模式&#xff0c;笔试的时候很可能是ACM模式&#xff0c;需要自己完成导包、定义和自行设计输出&#xff0c;所以一些常用的类和方法需要先导入相应的API包&#xff0c;java.util就是最常用到的包&#xff0c;因为它包含集合这个大框架…

JVM对象分配内存如何保证线程安全?

大家好&#xff0c;我是锋哥。今天分享关于【JVM对象分配内存如何保证线程安全&#xff1f;】面试题。希望对大家有帮助&#xff1b; JVM对象分配内存如何保证线程安全&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在JVM中&#xff0c;对象的内存分配…

前端使用 Konva 实现可视化设计器(20)- 性能优化、UI 美化

这一章主要分享一下使用 Konva 遇到的性能优化问题&#xff0c;并且介绍一下 UI 美化的思路。 至少有 2 位小伙伴积极反馈&#xff0c;发现本示例有明显的性能问题&#xff0c;一是内存溢出问题&#xff0c;二是卡顿的问题&#xff0c;在这里感谢大家的提醒。 请大家动动小手&a…

AIGC-------AI生成内容如何赋能AR和VR体验?

AI生成内容如何赋能AR和VR体验 引言 增强现实&#xff08;AR&#xff09;和虚拟现实&#xff08;VR&#xff09;技术近年来蓬勃发展&#xff0c;为用户提供了沉浸式的体验。这些技术已经广泛应用于游戏、教育、医疗、建筑等领域。然而&#xff0c;AR和VR体验的质量与内容的丰富…

VLM--CLIP作分类任务的损失函数

info_nce_loss 这个是clip作对比学习的损失函数 各个博客上都有详细介绍了&#xff0c;我这里就不赘述 def info_nce_loss(image_features, text_features,logit_scale,labels, temperature0.07):batch_size image_features.shape[0]image_features image_features / image…

【模型压缩】原理及实例

在移动智能终端品类越发多样的时代&#xff0c;为了让模型可以顺利部署在算力和存储空间都受限的移动终端&#xff0c;对模型进行压缩尤为重要。模型压缩&#xff08;model compression&#xff09;可以降低神经网络参数量&#xff0c;减少延迟时间&#xff0c;从而实现提高神经…

leetcode-128.最长连续序列-day14

为什么我感觉上述代码时间复杂度接近O(2n), 虽然有while循环&#xff0c;但是前面有个if判断&#xff0c;能进入while循环的也不多&#xff0c;while循环就相当于两个for循环&#xff0c;但不是嵌套类型的&#xff1a; 变量作用域问题&#xff1a;

Burp与其他安全工具联动及代理设置教程

Burp Suite 是一款功能强大的 Web 安全测试工具&#xff0c;其流量拦截和调试功能可以与其他安全工具&#xff08;如 Xray、Yakit、Goby 等&#xff09;实现联动&#xff0c;从而提升渗透测试的效率。本文将详细讲解 Burp 与其他工具联动的原理以及代理设置的操作方法&#xff…

文件操作(File类)

目录 一、初识文件 二、File类 常用方法 一、初识文件 我们目前是如何存储数据的?弊端是什么? int a 1; int[] arr new int[5];我们这些数据是在内存中存储的&#xff0c;是不能够长久保存的。 那么&#xff0c;我们的计算机当中有没有一块硬件可以长久存储数据的? 磁…

Ubuntu硬盘分区及挂载(命令行)

文章目录 一、简介二、硬盘分区三、格式化分区四、自动挂载分区五、调整分区大小小结 一、简介 创建磁盘分区首先需要找出Linux系统中的物理磁盘&#xff0c;在Linux中采用了一种标准格式来为硬盘分配设备名称。 SATA驱动器和SCSI驱动器&#xff1a;设备命名格式为/dev/sdx&a…