@seewod/mycanvas v1.0.3

一个绘图白板库

正在编写中。。。

概述

🏷️是什么？

workboard 是一个用于快速制作绘图白板的js库，目前仅限于pc浏览器（监听鼠标操作）。

🏷️怎么用？

workboard使用一个DOM元素为参数创建实例，在该DOM元素内创建一个canvas元素。

通过调用workboard的相关属性方法、监听workboard事件，在该canvas上进行绘图，修改图形样式。

🏷️有哪些特性？

• 目前支持绘制 【矩形、菱形、三角形、圆形、线段、箭头、文字、图片】
• 画板尺寸无限
• 画布可缩放、平移、旋转
• 画板数据导出、导入
• 阅览模式

安装

npm i workboard

使用

<div id="container"></div>

import workboard from 'workboard';

//使用一个DOM元素为容器创建 workboard实例
let app = new workboard({
    styleTheme: {...}, //一个样式的对象 可选（不传入 使用默认样式）
	container:document.getElementById('container')
})

//监听app事件绑定
app.on('workStateChange',(workstate) => {})
app.on('scaleChange',(workstate) => {})
...
app.on('activeEChange',(element)=>{})

//通过设置workstate，在不同工作状态下使用鼠标、键盘进行各项操作

• 注意：画板会自适应外部容器变化，无需担心外部容器尺寸改变！

参考手册

主要

坐标轴相关

元素属性

元素样式

事件

每一个与用户交互的参数，都设置了事件，可以通过事件监听，来获取相关参数信息

元素：

设置属性必须

workState：

selection：该状态下，可以使用鼠标来选择、调整元素

creating： 该状态下，可以使用鼠标操作 创建元素

readonly：该状态下，鼠标的一些操作能够更好的帮助您进行阅览画板

元素创建方式：

基础图形类、线段类：鼠标按下拖动创建

文字类：点击 画板输入文字来创建，双击文字、即可编辑文字

图片类：点击画板选择图片来创建

样式主题

样式主题 描述了在初始绘制元素时，元素呈现的样式

​ MarqueeStrokeStyle :"#666",

​ noteColor: "#ffe952"

组件数据导出样式：

{
    projectName: ‘xxx’,
    projectDes: 'xxx',
    projectData: 'xxx',
}