ss_new_ui_skin_and_page/ss/py/Draw.js

var Draw = function(canvas) {
	this.canvas = canvas;
	this.width = canvas.width;
	this.height = canvas.height;
	this.context = canvas.getContext('2d');
	this.mousedownPoint = null;
	this.beforMousemovePoint = null;
	this.drawFlag = false;
	this.isDraw = false; //记录该canvas是否有写
	this.timeoutObject = null; //记录cavas的setTimeOut
	var $this = this;
	this.context.lineWidth = 3;

	$(canvas).on('mousedown', function(event) {
		$this.mousedownPoint = $this.toCanvasCoord(event.clientX, event.clientY);
		$this.drawFlag = true;
	});

	$(canvas).on('mousemove', function(event) {
		if ($this.drawFlag) {
			if (!$this.beforMousemovePoint) {
				$this.beforMousemovePoint = $this.toCanvasCoord(event.clientX, event.clientY);
				$this.context.beginPath();
				$this.context.moveTo($this.mousedownPoint.x, $this.mousedownPoint.y);
				$this.context.lineTo($this.beforMousemovePoint.x, $this.beforMousemovePoint.y);
				$this.context.stroke();
				
			} else {
				$this.context.beginPath();
				$this.context.moveTo($this.beforMousemovePoint.x, $this.beforMousemovePoint.y);
				var point = $this.toCanvasCoord(event.clientX, event.clientY);
				$this.context.lineTo(point.x, point.y);
				$this.context.stroke();
				$this.beforMousemovePoint = point;
			}
			$this.isDraw = true;
			
		}
	});

	$(canvas).on('mouseup', function(event) {
		$this.drawFlag = false;
		$this.mousedownPoint = null;
		$this.beforMousemovePoint = null;
	});

	$(canvas).on('mouseleave', function(event) {
		if ($this.drawFlag) {
			$this.drawFlag = false;
			$this.mousedownPoint = null;
			$this.beforMousemovePoint = null;
		}
	});
	//新增加事件
	$(canvas).bind('touchstart', function(event) {
		event.preventDefault();
		var touch = event.originalEvent.targetTouches[0];
		
        mouseX =touch.clientX;
        mouseY =touch.clientY;
		$this.mousedownPoint = $this.toCanvasCoord(mouseX, mouseY);
		$this.drawFlag = true;
	});
	$(canvas).bind('touchmove', function(event) {
			event.preventDefault();
			var touch = event.originalEvent.targetTouches[0];
		
			mouseX =touch.clientX;
			mouseY =touch.clientY;
			console.log(mouseX+'top:'+mouseY);
			if ($this.drawFlag) {
				if (!$this.beforMousemovePoint) {
					$this.beforMousemovePoint = $this.toCanvasCoord(mouseX, mouseY);
					$this.context.beginPath();
					$this.context.moveTo($this.mousedownPoint.x, $this.mousedownPoint.y);
					$this.context.lineTo($this.beforMousemovePoint.x, $this.beforMousemovePoint.y);
					$this.context.stroke();
				} else {
					$this.context.beginPath();
					$this.context.moveTo($this.beforMousemovePoint.x, $this.beforMousemovePoint.y);
					var point = $this.toCanvasCoord(mouseX, mouseY);
					$this.context.lineTo(point.x, point.y);
					$this.context.stroke();
					$this.beforMousemovePoint = point;
				}
				$this.isDraw = true;
			}	
			
		});
	
		$(canvas).bind('touchend', function(event) {
			event.preventDefault();
			$this.drawFlag = false;
			$this.mousedownPoint = null;
			$this.beforMousemovePoint = null;
			if ($this.drawFlag) {
				$this.drawFlag = false;
				$this.mousedownPoint = null;
				$this.beforMousemovePoint = null;
			}
		});
	
	
}

Draw.prototype = {
	toCanvasCoord: function(x, y) {
		var point = {};
		var coord = this.canvas.getBoundingClientRect();
		point.x = x - coord.left;
		point.y = y - coord.top;
		return point;
	},
	erase: function() {
		this.context.clearRect(0, 0, this.width, this.height);
	}
};