轻松地构建一个画板或批注功能,在现有的dom的基础上
- 支持自定义画笔
- 支持设置颜色
- 支持撤消和重做
- 支持序列化和反序列化
- 内置铅笔、直线、矩形、椭圆、橡皮擦等画笔
var div = document.getElementById("root")
// 在div上添加画板,画板会自动适应div的位置和大小
var drawer = new paint.Drawer(div)
// 为画板添加菜单,你也可以用自己的菜单
var menu = new paint.Menu(drawer).addPens().undo().scale().moveable()
*dom
: 要添加到哪个元素上,实际上会: dom.appendChild(canvas)
config
:
{
penClass,// 默认画笔
initStyle: { // 初始画板属性
fillStyle: "red",
strokeStyle: "red"
}
}
禁用画板,预览模式,不能编辑
启用画板
设置画笔
pen
: 画笔类或者画笔名,不传参数启用默认画笔
获取画板的Context2D
获取画板的canvas
设置画笔颜色
*color
: 颜色 red #f00 rgba(0,0,0,0)
相当于
var ctx = drawer.getCtx()
ctx.fillStyle=color
ctx.strokeStyle=color
获取画板在页面中的位置
return: {top,left,bottom,right}
将画板数据序列化为json字符串
从json字符串中恢复画板数据
*json
: json字符串或数据数组
撤销
test
: test为true时,不会实际操作, 返回是否可以撤销
重做
test
: test为true时,不会实际操作, 返回是否可以重做
刷新画板,强制重绘
缩放dom和画板,实际上会修改dom.style.transform
*n
: 缩放倍数
相当于canvas.toDataURL()
通过画笔名,获取画笔,不存在时返回铅笔
*key
: 画笔名
添加或修改画笔
*key
: 画笔名
*penClass
: 画笔类,参见下面penClass介绍
获取画笔类的画笔名
获取所有画笔的画笔名
可以通过创建画笔类来创建自定义画笔
下面以自定义一个打勾的画笔为例
/**
* 画笔构造函数
* @param {function} render 渲染当前作画数据
* @param {function} resolve 作画完成,提交本次作画数据
*/
function oPen(render, resolve) {
// 当鼠标按下时触发,bx,by 起点相对于画板的坐标
this.begin = function(bx, by) {
render([bx, by]);
};
// 当鼠标按下移动时触发,ex,ey 终点相对于画板的坐标
this.move = function(bx, by, ex, ey) {
render([bx, by, ex, ey]);
};
// 当鼠标释放时触发
this.end = function(bx, by, ex, ey) {
resolve([bx, by, ex, ey]);
};
}
// 鼠标按下时进入画板区域触发this.begin
oPen.moveBegin = true;
// 鼠标移出画板区域触发this.end
oPen.outEnd = false;
// 鼠标在画板区域时的光标样式
oPen.cursor = 'auto';
// 重点:将数据绘制到画板上
oPen.render = function(ctx, data) {
if (data && data.length >= 2) {
// 起点与终点距离越大,字体越大
var dis = 16 + (data.length === 4 ? Math.sqrt(pow2(data[0] - data[2]) + pow2(data[1] - data[3])) : 0)
ctx.font = `${dis}px serif`
ctx.fillText("√", data[0], data[1] + dis / 2);
}
};
提示1: 为了序列化时节省空间,render和resolve返回的数据必须是数组,数组中可以有其它类型的数据
提示2: 为了缩放后作画位置不变,bx,by,ex,ey实际为相对于画板万分比,在penClass.render时data中恢复为实际坐标;为了正确地恢复数据,请保证render和resolve返回的数据中x轴的下标为偶数,y轴的下标为奇数