前言
之前看到系统自带的画图工具， 感觉挺有意思， 于是用react和canvas实现了个简易画图工具， 不用react也行， 我主要是因为在原来的项目里写的， 所以用了react。
这里是线上地址： Paint
源码在项目下的Library中： 源码
实现
画笔功能
<canvas
id="canvas"
onMouseDown={mouseEvent}
onMouseMove={mouseEvent}
onMouseUp={mouseEvent}
>
</canvas>
首先给canvas添加mousedown, mousemove, mouseup三个监听事件。
当鼠标按下的时候，将isDraw开关打开，鼠标抬起时将其关闭， 这样就能控制mousemove了， 不然一进入canvas的区域就会触发mousemove事件。
这里为了简洁都监听的是mouseEvent事件， 在事件内部根据event.type来触发不同的逻辑。
来捋一捋画笔的思路：
-
鼠标按下， 将isDraw开关打开；
-
拖住鼠标滑动触发
mousemove事件 -
记录下鼠标点击的位置信息， 我这里用的是一个二维数组， 分别记录X轴和Y轴
-
初始化画笔的颜色和粗度以及形状
-
开始画线， 获取数组里鼠标画过的位置信息， 每两点之间进行一次描边， 这样点点连接就成了线
-
鼠标抬起， 将
isDraw关闭， 禁止触发mousemove
大体思路就是这样， 下面是代码实现：
const mouseEvent = (e) => {
let ctx = canvas2D.getContext('2d')
e.persist()
if (e.type === 'mousedown') {
switch (active) {
case 'spray':
return canvas2D.style.backgroundColor = color
default:
isDraw = true
arr = []
return
}
}
if (e.type === 'mousemove' && isDraw) {
arr.push([e.pageX - canvas2D.offsetLeft, e.pageY - document.querySelector('.admin-box').offsetTop - 40])
switch (active) {
case 'pen':
ctx.strokeStyle = color
ctx.lineJoin = "round";
ctx.lineWidth = 5;
ctx.beginPath();
arr.length > 1 && ctx.moveTo(arr[arr.length - 2][0], arr[arr.length - 2][1]);
ctx.lineTo(arr[arr.length - 1][0], arr[arr.length - 1][1]);
ctx.closePath();
ctx.stroke(); //描边
return
default:
return
}
}
if (e.type === 'mouseup') {
setCanvasUrl(url => {
url.push(canvas2D.toDataURL())
return url
})
isDraw = false
}
}
橡皮擦
橡皮擦这里比较取巧， 是用背景色覆盖掉了画笔的颜色，这样看起来就像擦除了一样。 思路和画笔的思路是一样的， 只是将颜色改成了背景色
case 'eraser':
ctx.strokeStyle = canvas2D.style.backgroundColor || '#ccc'
ctx.lineJoin = "round";
ctx.lineWidth = 50;
ctx.beginPath();
arr.length > 1 && ctx.moveTo(arr[arr.length - 2][0], arr[arr.length - 2][1]);
ctx.lineTo(arr[arr.length - 1][0], arr[arr.length - 1][1]);
ctx.closePath();
ctx.stroke(); //描边
return
油漆桶
这个最简单， 获取到颜色板中的颜色， 将背景色替换掉就ok了
画矩形
画矩形要用到clearRect和strokeRect两个方法， 它们接受4个参数， 分别是起点坐标X， Y和矩形的长， 宽。
思路：
每次触发mousemove其实都会画矩形， 但我们可以在每次画矩形前清空之前的区域。
clearRect就是清空矩形内的痕迹
这样看起来就像是我们画了一个矩形
case 'rectangle':
let left = arr[0][0]
let top = arr[0][1]
let prewidth = arr.length > 1 && arr[arr.length - 2][0] - left
let preheight = arr.length > 1 && arr[arr.length - 2][1] - top
let width = arr[arr.length - 1][0] - left
let height = arr[arr.length - 1][1] - top
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.clearRect(left, top, prewidth, preheight)
ctx.strokeRect(left, top, width, height);
return
撤回上一步功能
这个要用到canvas的drawImage和toDataURL两个方法。
思路：
-
在每次操作之后， 将canvas通过
toDataURL方法转成img存起来，push到数组中 -
点击recall时， 通过
drawImage方法加载上次操作时的canvas图形。 -
移除数组最后的数据， 方便下次执行recall操作。
-
判断数组是否已清空， 清空了就不再让操作了
代码如下：
const recallClick = (e) => {
let ctx = canvas2D.getContext('2d')
let step = canvasUrl.length - 1
if (step >= 0) {
step--;
ctx.clearRect(0, 0, 1000, 1000);
let canvasPic = new Image();
canvasPic.src = canvasUrl[step];
canvasPic.addEventListener('load', () => {
ctx.drawImage(canvasPic, 0, 0);
});
setCanvasUrl(canvasUrl => {
canvasUrl.pop()
return canvasUrl
})
} else {
console.log('不能再继续撤销了');
}
}
下载功能
通过toDataURL获取当前canvas的图形。
创建一个a标签， 将地址赋给它， 执行点击事件下载。这个实现比较简陋， 但这是一般的思路， 也可以根据场景进行弹窗， 修改下载的相关信息。
代码如下：
const downloadImg = () => {
var url = canvas2D.toDataURL('image/png');
var a = document.createElement('a');
document.body.appendChild(a);
a.href = url;
a.download = '我的绘画';
a.target = '_blank';
a.click();
}
颜色选择器
这里使用的是react-color插件。
结束
到这里，简易画板的思路就交代清楚了， 后续各位还可以在这个基础上开发更多的功能。
fighting~
