在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>

原文地址：https://blog.csdn.net/GISShiXiSheng/article/details/143918346

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！