canvas制作绘图插件2

	
		
 
		
		
 
	
	
		
		
 
		
 
  开始绘制
 
		
 
  切换方向
 
		
 
  全部清空
 
		
		
 
		
 
  开始绘制
 
		
 
  切换方向
 
		
 
  全部清空
 
		
		
		
	

(function ($) {
	var drawLinePlug = function (ele,opts) {
		this.$ele = ele;
		this.default = {
			$start : null,
			$checkDeriction : null,
			$clear : null,
			$cxt : null,
			$callBack: function (res) {
				return res;
			}
		};
		this.options = $.extend({}, this.default, opts);
		this.ctx = document.getElementById(this.options.$cxt).getContext("2d");
		this.ctx.strokeStyle = "#f00";//颜色
    	this.ctx.lineWidth = 3;//线条粗细
    	this.obj = {};
	}
	
	drawLinePlug.prototype = {
		isDrew: false,
		deriction: -1,
		init: function () {
			var self = this;
			var options = self.options;
			options.$start.on('click', function (e) {
				self.isDrew = !self.isDrew;
				if (!!self.isDrew) {
					self.$ele.addClass("arr").removeClass("default");
					$(this).text("结束绘制");
					self.startPoint();
					
				} else {
					self.$ele.addClass("default").removeClass("arr");
					$(this).text("开始绘制");
					self.drawArrow({x: self.obj.sx,y: self.obj.sy},{x: self.obj.ex,y: self.obj.ey},self.deriction);
					self.offDrawMove();
					self.offStartPoint();
				}
			});
			self.dbClick();
			self.clearCanvas();
			self.checkDeriction();
		},
		startPoint:function () {
			var self = this;
			self.$ele.on('click',function (e) {
				self.drawMove(e.offsetX, e.offsetY);
				self.$ele.off('click');
			})
		},
		clearCanvas: function () {
			var self = this;
			var options = self.options;
			options.$clear.on('click',function () {
				self.ctx.clearRect(0, 0, 400, 400);
				self.obj = {};
			})
		},
		checkDeriction: function () {
			var self = this;
			var options = self.options;
			options.$checkDeriction.on('click',function () {
				if (!!self.obj) {
					self.deriction = (self.deriction === -1) ? 1 : -1;
					self.drawLine(self.obj.sx,self.obj.sy,self.obj.ex,self.obj.ey);
					self.drawArrow({x: self.obj.sx,y: self.obj.sy},{x: self.obj.ex,y: self.obj.ey},self.deriction);
				}
			})
		},
		offDrawMove:function () {
			this.$ele.off('mousemove');
		},
		offStartPoint: function () {
			this.$ele.off('click');
		},
		drawMove: function (sx,sy) {
			var self = this;
			self.$ele.on('mousemove' ,function (e) {
				if (!!self.isDrew) {
					self.drawLine(sx, sy, e.offsetX, e.offsetY);
				}
			});
		},
		dbClick: function () {
			var self = this;
			var options = self.options;
			self.$ele.on('dblclick', function () {
				if (!!self.isDrew) {
					self.offDrawMove();
					self.offStartPoint();
					self.isDrew = false;
					self.$ele.addClass("default").removeClass("arr");
					options.$start.text("开始绘制");
					self.drawArrow({x: self.obj.sx,y: self.obj.sy},{x: self.obj.ex,y: self.obj.ey},self.deriction);
				}
			})
		},
		drawArrow: function(beginPoint, endPoint, flag) {
			 var angle = Math.atan2(endPoint.y - beginPoint.y, endPoint.x - beginPoint.x) / Math.PI * 180,
                x3 = (14 * beginPoint.x + endPoint.x)/15,
                y3 = (14 * beginPoint.y + endPoint.y)/15,
                x4 = x3 - 30 * Math.cos(angle + 90),
                y4 = y3 + 30 * Math.sin(angle + 90);

            var arrow = [];
            arrow[0] = { x: x3, y: y3 };
            arrow[7] = { x: x3 - 15 * Math.cos(Math.PI / 180 * (angle + 90)), y: y3 - 15 * Math.sin(Math.PI / 180 * (angle + 90)) };
            arrow[8] = { x: x3 - 15 * Math.cos(Math.PI / 180 * (angle - 90)), y: y3 - 15 * Math.sin(Math.PI / 180 * (angle - 90)) };
            arrow[1] = { x: (arrow[7].x + arrow[0].x) / 2, y: (arrow[7].y + arrow[0].y) / 2 };
            arrow[2] = { x: (arrow[8].x + arrow[0].x) / 2, y: (arrow[8].y + arrow[0].y) / 2 };
            arrow[3] = { x: arrow[1].x + 5 * Math.cos(angle * Math.PI / 180), y: arrow[1].y + 5 * Math.sin(angle * Math.PI / 180) };
            arrow[4] = { x: arrow[1].x - 5 * Math.cos(angle * Math.PI / 180), y: arrow[1].y - 5 * Math.sin(angle * Math.PI / 180) };
            arrow[5] = { x: arrow[2].x + 5 * Math.cos(angle * Math.PI / 180), y: arrow[2].y + 5 * Math.sin(angle * Math.PI / 180) };
            arrow[6] = { x: arrow[2].x - 5 * Math.cos(angle * Math.PI / 180), y: arrow[2].y - 5 * Math.sin(angle * Math.PI / 180) };

            this.ctx.strokeStyle = "#26e92e";
            this.ctx.fillStyle = "#26e92e";
           	this.ctx.beginPath();
            if (flag == 1) {
            	this.obj.arrowStart={x:arrow[2].x, y:arrow[2].y};
                this.obj.arrowEnd={x:arrow[7].x,y:arrow[7].y}
                this.obj.direction = (Math.ceil((angle) / 90)) % 4;
                this.ctx.moveTo(arrow[2].x, arrow[2].y);
                this.ctx.lineTo(arrow[1].x, arrow[1].y);
                this.ctx.lineTo(arrow[4].x, arrow[4].y);
                this.ctx.lineTo(arrow[7].x, arrow[7].y);
                this.ctx.lineTo(arrow[3].x, arrow[3].y);
                this.ctx.lineTo(arrow[1].x, arrow[1].y);
            } else if (flag == -1) {
            	this.obj.arrowStart={x:arrow[1].x, y:arrow[1].y};
                this.obj.arrowEnd={x:arrow[8].x,y:arrow[8].y}
                this.obj.direction = (Math.ceil((angle+180) / 90)) % 4;
                this.ctx.moveTo(arrow[1].x, arrow[1].y);
                this.ctx.lineTo(arrow[2].x, arrow[2].y);
                this.ctx.lineTo(arrow[5].x, arrow[5].y);
                this.ctx.lineTo(arrow[8].x, arrow[8].y);
                this.ctx.lineTo(arrow[6].x, arrow[6].y);
               	this.ctx.lineTo(arrow[2].x, arrow[2].y);
            }
            this.ctx.closePath();
            this.ctx.stroke();
            this.ctx.fill();
            this.ctx.strokeStyle = "#f00";
            this.consoleInfo();
		},
		consoleInfo: function () {
			var options = this.options;
			(typeof (options.$callBack) === "function") && options.$callBack.call(this, this.obj);
		},
		drawLine: function (sx, sy, ex, ey) {
			this.ctx.clearRect(0, 0, 400, 400);//clearRect() 方法清空给定矩形内的指定像素。
	        this.ctx.beginPath();
	        this.ctx.moveTo(sx, sy);//把路径移动到画布中的指定点，不创建线条
	        this.ctx.lineTo(ex, ey);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
	        this.ctx.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
	        this.obj.sx = sx;
	        this.obj.sy = sy;
	        this.obj.ex = ex;
	        this.obj.ey = ey;
		}
		
	};
	$.fn.drawLineArr = function(options) {
		var  newDraw = new drawLinePlug(this, options);
		return newDraw.init();
	}
})(jQuery);