绘画板 06——铅笔与自定义鼠标图标

github 地址： https://github.com/wangyuheng/painter

DEMO 地址： http://painter.crick.wang/

自定义鼠标图标

可以通过 css 设置 cursor 的方式指定鼠标图标样式

| default | 默认光标（通常是一个箭头） |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（南）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |

也可以通过 url 指定自定义的图标样式，通常为.cur 文件。

$("#svgPanel").css("cursor", "url(style/img/cur/tool_pencil.cur), auto");

auto 为指定图标不存在时，鼠标显示的样式。

铅笔

通过 svg 的 path 属性，可以绘制出鼠标移动轨迹，实现铅笔画图效果。svgjs 提供了 path()函数，值为

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Belzier curve
• T = smooth quadratic Belzier curveto
• A = elliptical Arc
• Z = closepath

所以 mousedown 时做 M+ 坐标点，mousemove 时，为 L+ 坐标点，可以指定不同的路径数据以达到不同的绘制效果，所以在构造函数中增加了一个 prefix 字段。

pencil.js 代码如下

(function() {

	var parent = null;
	var drawing = false;
	var element = null;
	var startPoint = null;

	var plot = null;
	var plotPrefix = null;
	var defaultPlotPrefix = 'L';

	function mousedown(event) {
		console.log('pencil mousedown');
		drawing = true;
		startPoint = svgDoc.transformPoint(event);
		plot = 'M' + startPoint.x + ' ' + startPoint.y;
		element = parent.path(plot).fill(GlobalStatus.getFillColor()).style("fill-opacity", GlobalStatus.getFillOpacity()).stroke({
			width: GlobalStatus.getLineSize(),
			color: GlobalStatus.getFontColor()
		});
		return false;
	}

	function mousemove(event) {
		console.log('pencil mousemove');
		if (drawing) {
			var startPoint = svgDoc.transformPoint(event);
			console.log(plot);
			plot += plotPrefix + startPoint.x + ' ' + startPoint.y;
			element.plot(plot);
		}
		return false;
	};

	function mouseup(event) {
		console.log('pencil mouseup ' + element);
		drawing = false;
		if (element.attr("d").split(plotPrefix).length > 2) {
			element.pickable();
		}
		return false;
	}

	var listener = {
		mousedown: mousedown,
		mousemove: mousemove,
		mouseup: mouseup,
	};


	var Pencil = function(parentEle, prefix) {
		parent = parentEle;
		svgDoc = parent.doc();
		DrawTool.init(svgDoc, listener);
		plotPrefix = prefix || defaultPlotPrefix;
		this.stop = function() {
			DrawTool.stop(svgDoc, listener);
		};
	};

	this.DrawTool.Pencil = Pencil;

})();

在首页监听铅笔的点击事件，并在页面加载完成后默认调用 $("#tool_pencil").click();

    $("#tool_pencil").on("click", function() {
        resetCurrentDrawTool();
        currentDrawTool = new DrawTool.Pencil(svgDoc);
        $("#svgPanel").css("cursor", "url(style/img/cur/tool_pencil.cur), auto");
    });
	

加了一个彩蛋，监听铅笔按钮的双击事件，可以绘制映射线。

    $("#tool_pencil").on("dblclick", function() {
        resetCurrentDrawTool();
        currentDrawTool = new DrawTool.Pencil(svgDoc, 'T');
        $("#svgPanel").css("cursor", "url(style/img/cur/tool_pencil.cur), auto");
    });

附

在 Tools 的 listener 方法中，都加了一个 return false; 避免事件向上传递。

在模拟的下拉列表 lizeSize 中，通过属性 data-line-size 记录 width 值，在 GlobalStatus.getLineSize()中调用。

将已选择元素抽象到在 GlobalStatus 中，并提供管理方法。

pickedElementList: [],
pushPicked: function(o){
	return this.pickedElementList.push(o);
},
removePicked: function(o) {
	return this.pickedElementList.remove(o);
},
getPickeds: function(){
	return this.pickedElementList;
}