二、分享jQuery+Canvas实现的手写留言板

[文章作者:磨延城 转载请注明原文出处: https://mo2g.com/view/135/ ]

上一篇文章《一、分享jQuery+Canvas实现的手写留言板》介绍了手写画板的4个基本步骤,这里再跟大家回顾一下: 1)moveTo(x,y):设定新路径的起始坐标——落笔 2)lineTo(x,y):根据两个点坐标建立直线,并保存到路径中——动笔 3)closePath():关闭当前打开的路径——抬笔 4)stroke():渲染并显示所有的路径——大功告成

上一篇文章《一、分享jQuery+Canvas实现的手写留言板》介绍了手写画板的4个基本步骤,这里再跟大家回顾一下:

1)moveTo(x,y):设定新路径的起始坐标——落笔

2)lineTo(x,y):根据两个点坐标建立直线,并保存到路径中——动笔

3)closePath():关闭当前打开的路径——抬笔

4)stroke():渲染并显示所有的路径——大功告成

接下来我们继续完善画板,根据上述的4个基本步骤,实现通过鼠标,来模拟使用毛笔进行写字。

1)落笔:点击鼠标左键

2)动笔:按住鼠标左键不放并移动鼠标

3)抬笔:释放鼠标左键

4)为了实时显示效果,每一次动笔,立刻把路径渲染显示出来

这里,我们通过jQuery的4个函数监控鼠标的按下、移动还有释放操作。

mousedown():鼠标在元素上点击后会触发。

mousemove():鼠标在元素上移动来触发,该函数还会传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标。

mouseup():在鼠标点击对象释放时触发。

mouseleave():在鼠标移出对象时触发。

基于jQuery的函数,实现如下代码。

<!DOCTYPE html>
<html>
<head>
    <title>磨途歌画板测试</title>
</head>
<body>
<canvas id="can" width="800" height="600" style="border:1px solid black">Canvas画板</canvas>
<script src="http://cdn.staticfile.org/jquery/1.7.2/jquery.min.js"></script>
<script>
var canvas = $('#can'),//获取canvas元素
    pan = canvas[0].getContext("2d"),//获取2D图像API接口
    paint = false,//鼠标左键是否在画板区域按下
    x,
    y;
pan.strokeStyle = "#000000";//设置画笔颜色
pan.lineJoin = "round";//设置画笔轨迹基于圆点拼接
pan.lineWidth = 9;//设置画笔粗细

//监控画板上的鼠标左键按下
canvas.mousedown(function(e){
    paint = true;
    x = e.offsetX;
    y = e.offsetY;
    pan.beginPath();
    pan.moveTo(x,y);
});
//移动鼠标
canvas.mousemove(function(e){
    if(paint) {
        var nx = e.offsetX,
            ny = e.offsetY;
        pan.lineTo(x, y);
        pan.stroke();
        x = nx;
        y = ny;
    }
});
//释放鼠标左键
canvas.mouseup(function(e){
    paint = false;
});
//鼠标离开画板
canvas.mouseleave(function(e){
    paint = false;
});
</script>
</body>
</html>

上述代码可以正常在谷歌浏览器运行,但是火狐浏览器就不起作用,为什么?原因就在于火狐浏览器不支持通过e.offsetX、e.offset这种方式获取鼠标坐标。所以我们需要通过别的方式,实现获取鼠标坐标的功能。

//解决火狐浏览器不支持e.offsetX
function getOffset(e) {
	var target = e.target;
	if (target.offsetLeft == undefined){
		target = target.parentNode;
	}
	var pageCoord = getPageCoord(target);
	//计算鼠标位置(触发元素与窗口的距离)
	var eventCoord = {     
		x : window.pageXOffset + e.clientX,
		y : window.pageYOffset + e.clientY
	};
	var offset = {
		offsetX: eventCoord.x - pageCoord.x,
		offsetY: eventCoord.y - pageCoord.y
	};
	return offset;
}
//计算从触发到root间所有元素的offsetLeft值之和。
function getPageCoord(element) {
	var coord = {x: 0, y: 0};
	while (element) {
		coord.x += element.offsetLeft;
		coord.y += element.offsetTop;
		element = element.offsetParent;
	}
	return coord;
}

当我们需要获取鼠标坐标的时候,就通过如下方式获取即可。

var x = (e.offsetX == undefined) ? getOffset(e).offsetX : e.offsetX,
    y = (e.offsetY == undefined) ? getOffset(e).offsetY : e.offsetY;

至于画板的橡皮擦功能等其他功能,有时间再补充了。

评论:

  1. 威客 回复2014年12月31日 14时36分
    磨者
    初次到访,博主好专业呀

  2. gotolnc 回复2015年01月24日 02时51分
    磨者
    好久开放插件呢,不错的功能。

  3. unknown 回复2015年05月31日 04时56分
    磨者
    好文章,内容惟妙惟肖.禁止此消息:nolinkok@163.com
    西门塔尔牛 http://www.xmten.com/

  4. 肉牛 回复2015年06月04日 15时24分
    磨者
    好文章,内容观念明确.禁止此消息:nolinkok@163.com
    肉牛 http://www.xmten.com/

  5. unknown 回复2015年06月05日 22时48分
    磨者
    不错的文章,内容气贯长虹.禁止此消息:nolinkok@163.com
    肉牛 http://www.xmten.com/

  6. 磨者 977 回复2017年12月04日 21时56分
    磨者

  7. 磨者 995 回复2018年05月23日 21时03分
    磨者

  8. 磨者 1009 回复2018年09月07日 14时47分
    磨者

  9. 我来说两句:

      切换  

    磨途歌检测发现,您当前使用的浏览器版本过低,要想使用画板模式,请先更新浏览器

      切换  

    磨途歌随机验证码