在Vue中使用Excalidraw实现在线画板
概述
Excalidraw是一个非常好用的画图板工具,但是是用React写的,本文分享一种在Vue项目中使用的方法。
效果


实现
Excalidraw简介
这篇文章(Excalidraw 完美的绘图工具:https://zhuanlan.zhihu.com/p/684940131)介绍的很全面,大家移步可以过去看看。
使用
- 官方文档:https://docs.excalidraw.com/docs
1. 引入依赖
npm install react react-dom @excalidraw/excalidraw
# 或
yarn add react react-dom @excalidraw/excalidraw
2.添加配置
修改vite.config.js,添加如下配置:
export default defineConfig({...,define: {'process.env': {}},
})
3.页面使用
在Vue文件中的使用方式如下:
<template><div class="container"><div class="header">LZUGIS<button style="float: right" @click="save">Save</button></div><div class="excalidraw" id="excalidraw"></div><div class="footer">@lzugis 2024</div></div>
</template><script>
import { createRoot } from "react-dom/client";
import React from "react";
import { Excalidraw } from "@excalidraw/excalidraw";let root = null,app = null;export default {data() {return {};},mounted() {root = createRoot(document.getElementById("excalidraw"));const elements = JSON.parse(localStorage.getItem("excalidraw-elements"));const libs = JSON.parse(localStorage.getItem("excalidraw-libs"));const state = JSON.parse(localStorage.getItem("excalidraw-state"));const {theme,activeTool,name,scrollX,scrollY,zoom,offsetLeftm,offsetTop,} = state;root.render(React.createElement(Excalidraw, {name: "我的画板",initialData: {elements: elements,libraryItems: libs,appState: {theme,activeTool,name,scrollX,scrollY,zoom,offsetLeftm,offsetTop,},},langCode: "zh-CN",onChange: this.onChange,onLibraryChange: this.onLibraryChange,excalidrawAPI: this.excalidrawAPI,// props}));},unmounted() {root.unmount();},methods: {save() {if (app) {localStorage.setItem("excalidraw-state",JSON.stringify(app.getAppState()));localStorage.setItem("excalidraw-elements",JSON.stringify(app.getSceneElements()));}},onChange(e) {localStorage.setItem("excalidraw-elements", JSON.stringify(e));},onLibraryChange(e) {localStorage.setItem("excalidraw-libs", JSON.stringify(e));},excalidrawAPI(e) {app = e;window.app = e;},},
};
</script><style scoped lang="scss">
.container {width: 100%;height: 100vh;overflow: hidden;display: flex;flex-direction: column;.header {height: 3rem;line-height: 3rem;padding: 0 1rem;font-size: 1.2rem;background-color: #038fe5;color: white;}.footer {height: 2rem;line-height: 2rem;text-align: center;background-color: #038fe5;color: white;}.excalidraw {flex-grow: 1;}
}
</style>
相关文章:
在Vue中使用Excalidraw实现在线画板
概述 Excalidraw是一个非常好用的画图板工具,但是是用React写的,本文分享一种在Vue项目中使用的方法。 效果 实现 Excalidraw简介 这篇文章(Excalidraw 完美的绘图工具:https://zhuanlan.zhihu.com/p/684940131)介绍的很全面,…...
游戏+AI的发展历程,AI技术在游戏行业的应用有哪些?
人工智能(AI)与游戏的结合,不仅是技术进步的体现,更是人类智慧的延伸。从最初的简单规则到如今的复杂决策系统,AI在游戏领域的发展历史可谓波澜壮阔。 早在2001年,就有研究指出游戏人工智能领域࿰…...
Methode Electronics EDI 需求分析
Methode Electronics 是一家总部位于美国的全球性技术公司,专注于设计和制造用于多个行业的电子和电气组件,产品涵盖汽车、工业、电信、医疗设备以及消费电子等多个领域,提供创新的解决方案。 填写Methode_EDI_Parameters_Template Methode_…...
2023AE软件、Adobe After Effects安装步骤分享教程
2023AE软件是一款由Adobe公司开发的视频编辑软件,也被称为Adobe After Effects。它在广告、电影、电视和网络视频等领域广泛应用,用于制作动态图形、特效、合成和其他视觉效果。该软件支持多种视频和音频文件格式,具有丰富的插件和预设&#…...
【前端】JavaScript 变量引用、内存与数组赋值:深入解析三种情景
博客主页: [小ᶻZ࿆] 本文专栏: 前端 文章目录 💯前言💯场景一:直接赋值与重新引用为什么结果不是 [3, 4, 5]?1. 引用与赋值的基本概念2. 图示分析 关键总结 💯场景二:引用指向的变化为什么…...
本地项目运行提示跨域问题
项目背景:我使用phpwebstudy在本地搭建了一个项目,然后前端是http://localhost:8080/ 后端我直接创建了一个本地域名,例如www.abc.com 然后vue.config.js配置如下,这个配置在我所有线上环境是没有任何问题的 devServer: {proxy…...
C++ —— string类(上)
目录 string的介绍 string类功能的使用介绍 constructor —— 构造 介绍使用(1)(2)(4) :构造、拷贝构造、带参构造 介绍(3):拷贝string类对象的一部分字符…...
React Native Mac 环境搭建
下载 Mac 版Android Studio 下载 安装 JDK 环境 Flutter 项目实战-环境变量配置一 安装 Node.js 方式一 通过Node.js 官网下载 下载完成后点击安装包进行安装 安装完成...
Python Web 开发的路径管理艺术:FastAPI 项目中的最佳实践与问题解析20241119
Python Web 开发的路径管理艺术:FastAPI 项目中的最佳实践与问题解析 引言:从路径错误到模块化管理的技术旅程 在现代 Python Web 开发中,路径管理是一个常常被忽视却非常重要的问题。尤其是在使用像 FastAPI 和 Tortoise ORM 这样的框架时…...
Rust derive macro(Rust #[derive])Rust派生宏
参考文章:附录 D:派生特征 trait 文章目录 Rust 中的派生宏 #[derive]基础使用示例:派生 Debug 派生其他常用特征示例:派生 Clone 和 Copy 派生宏的限制和自定义派生自定义派生宏上面代码运行时报错了,以下是解释 结论…...
springboot嗨玩旅游网站
摘 要 嗨玩旅游网站是一个专为旅行爱好者打造的在线平台。我们提供丰富多样的旅游目的地信息,包括景点信息、旅游线路、商品信息、社区信息、活动推广等,帮助用户轻松规划行程。嗨玩旅游网站致力于为用户提供便捷、实用的旅行服务,让每一次旅…...
杰发科技AC7840——EEP中RAM的配置
sample和手册中示例代码的sram区地址定义不一样 这个在RAM中使用没有限制,根据这个表格留下足够空间即可 比如需要4096字节的eep空间,可以把RAM的地址改成E000,即E000-EFFF,共4096bytes即可。...
从零开始的c++之旅——map_set的使用
1.序列式容器和关联式容器 序列式容器:逻辑结构为线性序列的数据结构,两个位置之间没有紧密的关系,比如两者交换一下还是序列式的容器,例如string,vector,deque,array等。 关联式容器࿱…...
Docker中的一些常用命令
find / -type f -name “文件名” 2>/dev/null 寻找所有目录中的这个文件 pwd 查看当前目录的地址 docker pull 镜像名 强制拉镜像 docker run 运行docker systemctl daemon-reload 关闭docker systemctl start docker 启动docker systemctl restart docker 重启docker /…...
自存 sql常见语句和实际应用
关于连表 查询两个表 SELECT * FROM study_article JOIN study_article_review 查询的就是两个表相乘,结果为两个表的笛卡尔积 相这样 这种并不是我们想要的结果 通常会添加一些查询条件 SELECT * FROM study_articleJOIN study_article_review ON study_art…...
python | argparse模块在命令行的使用中的重要作用
import argparseclass TestCases:def __init__(self, nameNone, expect_resultNone):self.name nameself.expect expect_resultself.parser argparse.ArgumentParser() # 创建命令解析器self.add_arguments() # 方法 : 添加命令self.args, _ self.parser.par…...
【HCIP]——OSPF综合实验
题目 实验需求 根据上图可得,实验需求为: 1.R5作为ISP:其上只能配置IP地址;R4作为企业边界路由器,出口公网地址需要通过PPP协议获取,并进行CHAP认证。(PS:因PPP协议尚未学习&#…...
PW系列工控电脑复制机:效率与精度双重提升
工控电脑复制应用:效率与精度的双重提升 随着现代企业对大数据、数据备份、和跨平台兼容性需求的快速增长,工控电脑已成为数据密集型产业的核心设备。针对工控环境中大量数据复制的特殊需求,PW系列NVMe/SATA PCIe SSD复制机(如PW…...
学习QT第二天
QT6示例运行 运行一个Widgets程序运行一个QT Quick示例 工作太忙了,难得抽空学点东西。-_-||| 博客中有错误的地方,请各位道友及时指正,感谢! 运行一个Widgets程序 在QT Creator的欢迎界面中,点击左侧的示例…...
11.20作业
题目一: 题目: // 数组的行列转置 代码: // 数组的行列转置 #include <stdio.h> int main() {int a[2][3], i, j, b[3][2];printf("输入一个两行三列的数组a:\n");for (i 0; i < 2; i)for (j 0; j < 3; j){scanf…...
【20年ETL老兵亲授】Polars 2.0清洗Pipeline黄金架构:从schema-on-read校验→增量物化→自动fallback机制的闭环设计
第一章:Polars 2.0大规模数据清洗的范式演进与核心挑战Polars 2.0标志着声明式、惰性计算与零拷贝内存管理在数据清洗场景中的深度整合。相比传统Pandas的命令式逐行处理与隐式副本机制,Polars 2.0将整个清洗流水线建模为逻辑计划(Logical Pl…...
InfluxDB服务文件被误删怎么办?记录一次完整的1.8.6版本灾难恢复过程
InfluxDB服务文件误删灾难恢复实录:从崩溃边缘到完美复原 那天下午,服务器监控大屏突然亮起一片刺眼的红色告警——InfluxDB服务全线离线。作为团队里负责时序数据库运维的老兵,我立刻意识到问题的严重性。这套运行着1.8.6版本的InfluxDB承载…...
ADRV9009+ZCU102实战:从HDL工程构建到no-OS移植的5个关键步骤
ADRV9009ZCU102全流程开发指南:从HDL工程构建到no-OS移植的深度实践 在射频系统开发领域,ADRV9009作为一款高性能射频收发器,与Xilinx ZCU102开发板的组合已成为许多硬件工程师的首选方案。本文将深入剖析五个关键环节的技术细节,…...
探索视频采集技术:OBS Studio实现高效直播录制的创新方法
探索视频采集技术:OBS Studio实现高效直播录制的创新方法 【免费下载链接】obs-studio OBS Studio - 用于直播和屏幕录制的免费开源软件。 项目地址: https://gitcode.com/GitHub_Trending/ob/obs-studio 在当今内容创作领域,视频采集技术是直播与…...
保姆级避坑指南:用Python预测波士顿房价,你的MSE为什么降不下来?
Python实战:波士顿房价预测模型MSE居高不下的7个关键排查点 当你第一次尝试用线性回归预测波士顿房价时,最令人沮丧的莫过于看着训练损失曲线反复横跳,而测试集的MSE(均方误差)却像被钉在墙上的蝴蝶标本一样纹丝不动。…...
Centos stream 9 安装后root不能远程登录问题
如果在安装Centos stream 9的时候没有"勾选允许root用户使用密码进行ssh登录",安装后使用xshell等远程工具是不能登录虚拟机或者服务器的。解决:vim /etc/ssh/sshd_config1.新增一行配置: PermitRootLogin yes2.重启ssh systemctl restart ssh…...
4G Cat.1内网穿透技术实现与优化
基于4G Cat.1的内网穿透技术实现1. 项目概述1.1 系统架构本项目实现了一个基于4G Cat.1通信模块的内网穿透解决方案,通过公网服务器中转,建立开发板与内网PC之间的TCP通信链路。系统由以下三个主要部分组成:4G终端设备:搭载Cat.1通…...
YOLOv8工业部署翻车实录:6类典型报错日志解析,附可直接复用的CI/CD流水线脚本
第一章:YOLOv8工业部署翻车实录:6类典型报错日志解析,附可直接复用的CI/CD流水线脚本模型导出阶段:ONNX Shape Inference 失败 当执行 yolo export modelyolov8n.pt formatonnx opset12 时,常见报错:Runtim…...
TranslucentTB:打造高效个性化Windows任务栏的3大核心价值与实践指南
TranslucentTB:打造高效个性化Windows任务栏的3大核心价值与实践指南 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB Windows…...
基于YOLOv12与Flask-SocketIO的番茄成熟度Web端实时检测系统设计与性能对比
1. 为什么需要番茄成熟度实时检测系统? 在农业生产中,番茄成熟度的准确判断直接影响采摘效率和果实品质。传统的人工检测方式存在几个明显痛点:首先,人工判断主观性强,不同工人对"完全成熟"的标准可能不一致…...
