在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…...
CLIP Prompt Tuning实战指南:如何用少量样本优化多模态模型性能
最近在做一个多模态内容理解的项目,用到了CLIP模型。大家都知道CLIP很强大,但真到了要让它适应我们自己的业务数据时,传统全量微调(Full Fine-tuning)那套方法就有点让人头疼了——动辄几十GB的显存需求,还…...
使用 Java 泛型创建 CSV 到对象的转换器
本文将介绍如何使用它 Java 创建一个通用的泛型 CSV 文件到 Java 对象转换器。通过泛型,我们可以避免为每个需要转换的类别编写重复的代码,以实现代码的重用和简化。本文将提供示例代码,并讨论一些关于代码设计和最佳实践的建议,以…...
智慧农业篇(一):一套大棚监控系统的架构与实战
2018年一个朋友找到我,想开发 一套完整的农业种植的智能控制监测系统,主要针对的是蔬菜大棚的智能控制;基本思路就是:给出一套让农民“坐在家里种地”的物联网方案。我们当时涉足智慧农业的初心就是:让数据替人跑腿&am…...
60个AI核心概念,不背定义,全落到工作场景!老王手把手教你建知识库、搭Agent,附原型库+PRD模板
💡 Chunking 文档分块 你的 RAG 知识库上线了,用户问一个具体问题,系统返回了一段莫名其妙的内容。一查发现,检索到的文档片段被切在了一个句子中间,上半句话在一个块里,下半句在另一个块里。模型看到半句…...
软件工程师如何转型AI工程师 第三章 技术路线的选择——不要从头学起
第三章 技术路线的选择——不要从头学起 在转型的技术路径上,我见过最多的弯路长这个样子:某个工程师下定决心要搞AI,于是买了一本《深度学习》(花书),从第一章线性代数开始硬啃,啃到反向传播…...
Ollama镜像免配置原理:daily_stock_analysis启动脚本中systemd服务注册与健康检查逻辑
Ollama镜像免配置原理:daily_stock_analysis启动脚本中systemd服务注册与健康检查逻辑 1. 项目背景与核心价值 在当今AI技术快速发展的时代,本地化部署大模型成为了许多企业和开发者的迫切需求。daily_stock_analysis镜像正是基于这一需求,…...
利用快马平台快速构建openclawskills技能分享网站原型
最近在构思一个技能分享平台openclawskills,想快速验证这个创意是否可行。传统开发流程需要搭建前后端环境、设计数据库、编写大量基础代码,耗时耗力。后来尝试用InsCode(快马)平台,发现它能大幅缩短原型开发周期,特别适合快速验证…...
ChatTTS角色系统:从技术原理到生产环境部署指南
在语音合成技术日益成熟的今天,多角色、高表现力的TTS系统已成为互动应用的关键组件。ChatTTS的角色系统允许在同一对话流中动态切换不同音色的语音输出,极大地提升了交互的自然度和沉浸感。然而,在实际生产部署中,开发者常面临一…...
LLaMA-Adapter微调终极指南:1小时掌握120万参数的高效优化技巧
LLaMA-Adapter微调终极指南:1小时掌握120万参数的高效优化技巧 【免费下载链接】LLaMA-Adapter Fine-tuning LLaMA to follow Instructions within 1 Hour and 1.2M Parameters 项目地址: https://gitcode.com/gh_mirrors/ll/LLaMA-Adapter LLaMA-Adapter是一…...
Triton内存管理完全解析:共享内存与缓存策略
Triton内存管理完全解析:共享内存与缓存策略 【免费下载链接】triton Development repository for the Triton language and compiler 项目地址: https://gitcode.com/GitHub_Trending/tri/triton Triton语言和编译器作为深度学习计算的关键基础设施…...
