Mwhiteboard NPM

mwihitebard

插件安装

npm install mwhiteboard --save

插件使用

<template>
    <div class="white-board-box" ref="whiteboardBox">
        <WhiteBoard :options="options" ref="whiteboard" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import WhiteBoard, { OPTION_TYPE } from "mwhiteboard";

const whiteboard = ref();
const whiteboardBox = ref();
const options = ref({
    offsetX: 0,
    offsetY: 0
});

const resize = () => {
    // 窗口发生变化重新计算距离
    const { x, y } = whiteboardBox.value.getBoundingClientRect();
    options.value = {
        offsetX: x,
        offsetY: y
    };
}

onMounted(() => {
    // 初始化黑板
    resize();
    window.addEventListener("resize", resize);
    whiteboard.value.setOptionType(OPTION_TYPE.PEN);
});
</script>

<style>
.white-board-box {
    width: 100%;
    height: 600px;
}
</style>

黑板操作模式

export enum OPTION_TYPE {
    PEN = "PEN", // 画笔
    MOUSE = "MOUSE", // 移动和缩放
    CLEAR = "CLEAR", // 清空画板
    ERASER = "ERASER", // 橡皮擦
    COMPASS = "COMPASS", // 圆规
    RULER = "RULER", // 直尺
    PROTRACTOR = "PROTRACTOR", // 量角器
}

黑板属性

属性	描述	类型	默认
options	配置参数(浏览器可视区域左上角距离)	{ offsetX: number; offsetX: number; }	{ offsetX: 0, offsetY: 0 }

黑板事件

事件名	描述	回调参数
scrollChange	当发生滚动是触发回调	(scroll: { scrollX: number, scrollY: number })
zoomChange	当发生缩放是触发回调	(zoom: number)
closeTool	当工具关闭是触发	-

黑板开放的方法

方法	描述	类型
setScroll	设置画布上下左右的滑动	(x: number, y: number) => void
setZoom	设置画布缩放(最小0.1)	(zoom: number) => void
setOptionType	设置绘制的模式	(type: OPTION_TYPE) => void
setToolTypes	设置工具	(type: OPTION_TYPE) => void
setLineWidth	设置画笔粗细	(width: number) => void
setDrawColor	设置画笔颜色	(color: string) => void
render	绘制渲染	() => void
getElements	获取绘制元素集合	() => IElement[]
setElements	设置绘制元素集合	(elements: IElement[]) => void
reset	复位	() => void
clear	清空元素	() => void
undo	撤销	() => void
redo	恢复	() => void
canUndo	是否允许撤销	boolean
canRedo	是否允许恢复	boolean