jvs-draw

jvs-draw 是一个基于 Vue 3 和 Element Plus 开发的轻量级虚拟白板（Virtual Whiteboard）组件。它可以轻松集成到您的 Vue 3 项目中，提供流程图绘制、草图绘制和自由书画等功能。

📦 安装

首先，在您的项目中安装 jvs-draw 以及它的依赖。由于 jvs-draw 具有一些同行依赖 (peerDependencies)，您还需要确保安装了 vue, pinia 和 element-plus。

npm install jvs-draw
# 或使用 yarn
yarn add jvs-draw
# 或使用 pnpm
pnpm add jvs-draw

如果您尚未安装必需的同行依赖和样式库，请同时安装它们：

npm install vue pinia element-plus jvs-picker-color-v3 remixicon

🚀 快速上手

1. 引入样式

在项目的全局入口文件（通常是 main.ts 或 main.js）中引入必需的样式文件以及注册相关依赖。

// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

// 引入 Element Plus
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

// 引入相关外部依赖样式（图标和颜色选择器等）
import 'remixicon/fonts/remixicon.css';
import jvsPickerColorV3 from 'jvs-picker-color-v3';
import 'jvs-picker-color-v3/lib/jvs-picker-color-v3.css';

// 引入 jvs-draw 的核心样式和自建字体库 CSS
import 'jvs-draw/jvs-draw.css';

const app = createApp(App);

app.use(createPinia()); // jvs-draw 依赖 Pinia 进行状态管理
app.use(ElementPlus);
app.use(jvsPickerColorV3);

app.mount('#app');

[!IMPORTANT] 关于自定义 SVG 图标库导入说明：

组件包默认已将 CSS 字体 (iconfont.css) 打包到 jvs-draw.css 中。但如果你项目中使用了需要 SVG 多色支持的特性 (如内置的高级图形菜单图标)，你需要引入对应的 iconfont.js。 组件发行包 (dist) 内部包含了这些文件，你需要手动在你的项目的 index.html 中引入这两个脚本，或者将它们放到你项目的 public 目录下：

<script src="/[你的静态目录]/icon-fonts/iconfont.js"></script>
<script src="/[你的静态目录]/public-fonts/iconfont.js"></script>

2. 作为全局组件使用 (可选)

您可以在 main.ts 中全局注册它：

import { JvsDraw } from 'jvs-draw';

app.use(JvsDraw);

全局注册后，就可以在任何地方直接使用 <JvsDraw /> 标签。

3. 作为局部组件使用

在您的 Vue 组件（比如 App.vue 或其他视图）中引入并使用该组件。由于该组件是一个完整的白板画布，推荐将容器高度和宽度设置为 100% 或 100vh/100vw。

<template>
  <div class="whiteboard-container">
    <JvsDraw />
  </div>
</template>

<script setup lang="ts">
import { JvsDraw } from 'jvs-draw';
</script>

<style scoped>
.whiteboard-container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 防止页面出现原生滚动条 */
}
</style>

🛠️ API & 组件通信

JvsDraw 内部已经集成了完整的状态管理（基于 Pinia），画笔工具、撤销/重做、画布缩放及平移等均在组件内部完成闭环。

如果您想在外部获取或设置画布数据，您可以通过在 <JvsDraw /> 上绑定 ref 来调用组件对外暴露的方法：

<template>
  <div class="whiteboard-container">
    <JvsDraw ref="drawRef" :initialData="initialData" :loadFromLocal="false" />
    <button @click="handleGetData">获取数据</button>
    <button @click="handleSetData">应用数据</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { JvsDraw } from 'jvs-draw';

const drawRef = ref();

const initialData = { /* 画板初始数据 */ };

// 获取画板数据
const handleGetData = () => {
  if (drawRef.value) {
    const data = drawRef.value.getCanvasData();
    console.log("当前画布数据:", data.elements);
    console.log("当前画布状态:", data.appState);
  }
};

// 动态设置画板数据
const handleSetData = () => {
  if (drawRef.value) {
    const newData = { /* 新的画板数据 */ };
    drawRef.value.setCanvasData(newData);
  }
};
</script>

(注意：所有方法均需通过 ref 获取组件实例后调用，以支持多实例独立运行。)

🧩 依赖说明

• vue >= 3.x
• pinia: 状态管理
• element-plus: UI 组件库
• roughjs: 核心底层图形手绘风格渲染库
• jvs-picker-color-v3: 内部依赖的颜色取色器
• remixicon: 图标库