1.0.3 • Published 2 years ago

mwhiteboard v1.0.3

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

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

【注】使用黑板时不要存在滚动轴。

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.2.2

2 years ago

0.1.8

3 years ago

0.1.7

3 years ago

0.1.9

3 years ago

0.1.4

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago