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

news2024/12/24 1:53:25

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.coloradmin.cn/o/2264488.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LLMs之rStar:《Mutual Reasoning Makes Smaller LLMs Stronger Problem-Solvers》翻译与解读

LLMs之rStar:《Mutual Reasoning Makes Smaller LLMs Stronger Problem-Solvers》翻译与解读 导读:这篇论文提出了一种名为rStar的自我博弈互推理方法,用于增强小型语言模型 (SLMs) 的推理能力,无需微调或依赖更强大的模型。rStar…

Solidity 智能合约安全漏洞——普通重入攻击

普通重入攻击 重入攻击(Re-Entrancy) 一直是以太坊智能合约中最危险的漏洞之一,导致了许多大规模的资金被盗事件。比如 2016 年发生在 The DAO 项目中的 Re-Entrancy 漏洞攻击,造成价值当时 6000 万美元的以太币被盗,…

基于koa服务端脚手架搭建(文件加载器) --【elpis全栈项目笔记】

基于koa服务端脚手架(文件加载器) --【elpis-core】 前言: elpis-core 是一个项目文件加载器。基于一定的约定,将功能不同的代码分类放置到不同的目录下管理。适用于项目代码规范化、减少维护成本、沟通成本,易于扩展。(简易版的 …

AQS源码学习

一、park/unpark阻塞唤醒线程 LockSupport是JDK中用来实现线程阻塞和唤醒的工具。使用它可以在任何场合使线程阻塞,可以指定任何线程进行唤醒,并且不用担心阻塞和唤醒操作的顺序,但要注意连续多次唤醒的效果和一次唤醒是一样的。JDK并发包下…

【漏洞复现】CVE-2023-37461 Arbitrary File Writing

漏洞信息 NVD - cve-2023-37461 Metersphere is an opensource testing framework. Files uploaded to Metersphere may define a belongType value with a relative path like ../../../../ which may cause metersphere to attempt to overwrite an existing file in the d…

02-1:python入门基础Python变量与数据类型

一、Python 变量的定义 (一)定义方式 在 Python 中,变量的定义是通过赋值来实现的,其语法格式非常简洁直观,基本形式为 “变量名 值”。等号左边是你自定义的变量名,右边则是要赋给该变量的值。Python 是…

在Vue3中实现文件上传功能,结合后端API

随着现代Web应用程序的不断发展,文件上传成为了用户交互中不可或缺的一部分。在本篇博客中,我们将深入讨论如何在Vue3中实现一个文件上传功能,并与后端API进行交互。我们将使用Vue3的Composition API(setup语法糖)来构…

详细ECharts图例3添加鼠标单击事件的柱状图

<!DOCTYPE html><html><head><meta charset"UTF-8"><script src"js/echarts.js"></script> <!-- 确保路径正确 --><title>添加鼠标单击事件的柱状图</title></head><body><div id&q…

Redis Hash Tag 知识详解

一、Redis Hash Tag概述 Redis Hash Tag是Redis集群环境里用于控制数据分片的关键机制。在Redis集群中&#xff0c;数据依据键的哈希值来确定分片存储位置。Hash Tag能让用户指定键的特定部分作为哈希计算核心部分&#xff0c;进而使相关键存储于同一节点&#xff0c;这对处理…

Java 初学者的第一个 SpringBoot3.4.0 登录系统二

Java 初学者的第一个 SpringBoot3.4.0 登录系统二 SpringBoot 3.4.0 是 SpringBoot 的最新版本&#xff0c;是乐衷与新技术的 Java 初学者和程序员的选择。和 SpringBoot3.4.0 搭配的各种软件组件也是新的潮流。Java 通用代码生成器光&#xff0c;2.4.0 电音之王尝鲜版十支持新…

SSH客户端

SSH客户端 在VMware界面中操作虚拟机非常不友好&#xff0c;所以一般推荐使用专门的SSH客户端。市面上常见的有&#xff1a; Xshell&#xff1a;个人免费&#xff0c;商业收费&#xff0c;之前爆出过有隐藏后门。不推荐Finshell&#xff1a;基础功能免费&#xff0c;高级功能…

python小课堂(一)

基础语法 1 常量和表达式2 变量和类型2.1 变量是什么2.2 变量语法 3 变量的类型3.1 动态类型特性 4 注释4.1注释是什么 5 输入输出5.1 print的介绍5.2 input 6 运算符6.1 算术运算符在这里插入图片描述6.2 关系运算符6.3 逻辑运算符6.4赋值运算符 1 常量和表达式 在print()中可…

java中的方法的重载和重写、构造器

目录 方法的重载和重写、构造器1.java的修饰符&#xff1a;2.普通方法3.构造器&#xff08;也叫构造方法/构造函数&#xff09;4.方法的重载5.补充6.方法的重写7.类的执行顺序8.再看方法的重写 方法的重载和重写、构造器 1.java的修饰符&#xff1a; public修饰的代码&#xf…

Halcon例程代码解读:安全环检测(附源码|图像下载链接)

安全环检测核心思路与代码详解 项目目标 本项目的目标是检测图像中的安全环位置和方向。通过形状匹配技术&#xff0c;从一张模型图像中提取安全环的特征&#xff0c;并在后续图像中识别多个实例&#xff0c;完成检测和方向标定。 实现思路 安全环检测分为以下核心步骤&…

前端知识补充—HTML

1. HTML 1.1 什么是HTML HTML(Hyper Text Markup Language), 超⽂本标记语⾔ 超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等 标记语⾔: 由标签构成的语⾔…

springboot根据租户id动态指定数据源

代码地址 码云地址springboot根据租户id动态指定数据源: springboot根据租户id指定动态数据源,结合mybatismysql多数源下的事务管理 创建3个数据库和对应的表 sql脚本在下图位置 代码的执行顺序 先设置主数据库的数据源配置目标数据源和默认数据源有了主库的数据源&#xff…

powershell美化

powershell美化 写在前面 除了安装命令&#xff0c;其他都是测试命令&#xff0c;后续再写进配置文件 安装主题控件 安装主题oh-my-posh&#xff0c;powershell中执行 winget install JanDeDobbeleer.OhMyPosh -s winget oh-my-posh init pwsh | Invoke-Expression # 查看…

Docker监控新纪元:Prometheus引领高效容器监控革命

作者简介&#xff1a;我是团团儿&#xff0c;是一名专注于云计算领域的专业创作者&#xff0c;感谢大家的关注 •座右铭&#xff1a; 云端筑梦&#xff0c;数据为翼&#xff0c;探索无限可能&#xff0c;引领云计算新纪元 个人主页&#xff1a;团儿.-CSDN博客 目录 前言&…

arcgisPro将面要素转成CAD多段线

1、说明&#xff1a;正常使用【导出为CAD】工具&#xff0c;则导出的是CAD三维多线段&#xff0c;无法进行编辑操作、读取面积等。这是因为要素面中包含Z值&#xff0c;导出则为三维多线段数据。需要利用【复制要素】工具禁用M值和Z值&#xff0c;再导出为CAD&#xff0c;则得到…

R 语言 | 绘图的文字格式(绘制上标、下标、斜体、文字标注等)

1. 上下标 # 注意y轴标签文字 library(ggplot2) ggplot(mtcars, aes(mpg, cyl))geom_point()ylab(label bquote(O[3]~(ug / m^3)))2. 希腊字母&#xff0c;如alpha ggplot(mtcars, aes(mpg, cyl))geom_point()ylab(label bquote(O[3]~(ug / m^3)))ggtitle(expression(alpha))…