HTML5 CANVAS 绘图

2019独角兽企业重金招聘Python工程师标准>>>

/**
 * 依赖jquery1.7.2
 */

(function($) {
	var mark = window.mark = {
		tempData : null,
		show : function() {
			this.util.preventScroll();

			if (!$("#markContainer")[0]) {
				this.container.init();
			}
			this.container.show();
		},
		close : function() {
			this.container.close();
		},
		remove : function() {
			this.save();
			this.container.remove();
		},
		save : function() {
			var canvas = this.util.getCanvas();
			if (null != canvas) {
				this.tempData = canvas.toDataURL();
			}
		},
		saveToServer : function() {
			this.serverUtil.save();
		},
		rotate : function() {
			this.save();
			var canvas = this.util.getCanvas();
			if (null != this.tempData && null != canvas) {
				// canvas.clearRect(0, 0, canvas.width, canvas.height);
				canvas.width = this.util.getPhotoSwipeImageWidth();
				canvas.height = this.util.getPhotoSwipeImageHeight();
				$(canvas).css({
					marginLeft : this.util.getPhotoSwipeImageLeft()
				});
				var context = canvas.getContext("2d");
				var image = new Image();
				image.onload = function() {
					context.drawImage(image, 0, 0, canvas.width, canvas.height);
				};
				image.src = this.tempData;
			}
		},
		next : function() {
			var pageNo = mark.util.getPhotoswipeImgIdx() + 1;
			if (pageNo > pageSum) {
				pageNo = 1;
			}
			mark.refreshData(pageNo);

			setTimeout(function() {
				mark.resize();
			}, 100);
		},
		previous : function() {
			var pageNo = mark.util.getPhotoswipeImgIdx() - 1;
			if (pageNo == 0) {
				pageNo = pageSum;
			}
			mark.refreshData(pageNo);

			setTimeout(function() {
				mark.resize();
			}, 100);
		},
		refreshData : function(pageNo) {
			mark.util.clearCanvas();
			var canvas = this.util.getCanvas();
			var data = this.serverUtil.getSpecPageMarkNoteData(pageNo);
			var context = canvas.getContext("2d");
			var image = new Image();
			image.onload = function() {
				context.drawImage(image, 0, 0, canvas.width, canvas.height);
			};
			image.src = data;
		},
		resize : function() {
			$("#" + this.const.MARKCONTAINER_ID).css("top", 0);
			$("#" + this.const.TB_TOOLBAR_ID).css("top", 0);
		}
	};
	/* 常量 */
	mark.const = {
		// 容器ID
		MARKCONTAINER_ID : "markContainer",
		// 画布
		CANVAS_ID : "canvas",
		// 工具栏和工具ID
		TB_TOOLBAR_ID : "toolbar",
		TB_LINE_ID : "line",
		TB_LINECHANGER_ID : "lineChanger",
		TB_COLORPICKER_ID : "colorPicker",
		TB_PEN_ID : "pen",
		TB_ERASE_ID : "erase",
		TB_COLOR_ID : "color",
		TB_HAND_ID : "hand",
		TB_UNDO_ID : "undo",
		TB_REDO_ID : "redo",
		TB_SAVE_ID : "save",
		TB_CLOSE_ID : "close",
		TB_SPLIT_ID : "split",
		TB_EMAIL_ID : "email",
		TB_TIP_ID : "tip",
		// 线条宽度
		LINEWIDTH : [ 1, 2, 3, 4, 5, 6 ],
		// 颜色
		COLOR : [ 'rgb(192, 80, 77)', 'rgb(155, 187, 89)',
				'rgb(128, 100, 162)', 'rgb(0, 0, 0)', 'rgba(255,250,0, 0.05)' ],
		ERASE_COLOR : "rgba(0,0,0,)",
		ERASE_LINE_WIDTH : 20,
		ERASE_OPERATION : "destination-out",
		// 动画速度
		ANIMAL_TIME : 200,
		ANIMAL_LEN : 50
	};

	mark.styleUtil = {
		getToolStyle : function(toolName, direction) {
			var styleValue = "float:" + direction
					+ ";padding-left:48px;height:50px;"
					+ "background-image:url(../images/canvas/" + toolName
					+ ".png); background-repeat:no-repeat;";

			return styleValue;
		},
		getCanvasStyle : function() {
			return "border :1px solid black; margin-left:"
					+ mark.util.getPhotoSwipeImageLeft() + "px;";
		}
	};
	/* 样式 */
	mark.style = {
		/*
		 * containerStyle : "position: absolute; border:1px solid red; top:0px; " +
		 * "left :" + $(".ps-carousel-item-1 img").position().left +
		 * +"z-index:2000;display:none;",
		 */
		containerStyle : "position: absolute; top:0px; z-index:1500;display:none;width:100%;height:2000px;",

		toolbarStyle : "position:absolute;top:0px;float:right;width:100%;height:52px;"
				// "background-image:url(../images/canvas/toolbar.png);background-repeat:repeat-x;",
				+ "background-color : black;",
		splitStyle : "float:left;padding-left:10px;",

		lineStyle : mark.styleUtil.getToolStyle(mark.const.TB_LINE_ID, "left"),
		lineChangerStyle : "background-color:silver; position:absolute;)",
		lineChangerElemetnStyle : "margin:2px;height:44px; border : 1px solid white;",

		colorStyle : mark.styleUtil
				.getToolStyle(mark.const.TB_COLOR_ID, "left"),
		colorPickerStyle : "background-color:silver; position:absolute;)",
		colorPickerElemetnStyle : "margin:2px;height:44px; border : 1px solid white;",

		penStyle : mark.styleUtil.getToolStyle(mark.const.TB_PEN_ID, "left"),
		eraseStyle : mark.styleUtil
				.getToolStyle(mark.const.TB_ERASE_ID, "left"),
		handStyle : mark.styleUtil.getToolStyle(mark.const.TB_HAND_ID, "left"),
		undoStyle : mark.styleUtil.getToolStyle(mark.const.TB_UNDO_ID, "left"),
		redoStyle : mark.styleUtil.getToolStyle(mark.const.TB_REDO_ID, "left"),
		saveStyle : mark.styleUtil.getToolStyle(mark.const.TB_SAVE_ID, "left"),
		closeStyle : mark.styleUtil
				.getToolStyle(mark.const.TB_CLOSE_ID, "left"),
		emailStyle : mark.styleUtil
				.getToolStyle(mark.const.TB_EMAIL_ID, "left"),
		tipStyle : "color : white;line-height:50px;vertical-align:center;",
		getInstanceStyle : function(toolId) {
			return this[toolId + "Style"];
		}
	};
	/* 和服务器数据交互 */
	mark.serverUtil = {

		/* 将数据保存到服务器 */
		save : function() {
			var fileId = mark.util.getQueryString("fileId");
			var pageNo = Code.PhotoSwipe.instances[0].carousel.currentCacheIndex + 1;
			var markData = mark.util.getCanvas().toDataURL();
			var noteData = "";
			service.saveMarkNote(fileId, pageNo, markData, noteData,
					function(data) {
						$("#" + mark.const.TB_TIP_ID).show();
						if (data > 0) {
							$("#" + mark.const.TB_TIP_ID).html("保存成功！");
						} else {
							$("#" + mark.const.TB_TIP_ID).html("保存失败，请联系管理员！");
						}
						setTimeout(function() {
							$("#" + mark.const.TB_TIP_ID).fadeOut(1000);
						}, 2000);
					});
			mark.container.needSave = false;
		},
		getMarkNoteData : function(column) {
			var serverData = null;
			var fileId = mark.util.getQueryString("fileId");
			var pageNo = Code.PhotoSwipe.instances[0].carousel.currentCacheIndex + 1;
			DWREngine.setAsync(false);
			service.getMarkNoteData(fileId, pageNo, column, function(data) {
				if ("" != data) {
					serverData = data;
				}
			});
			DWREngine.setAsync(true);
			return serverData;
		},
		getSpecPageMarkNoteData : function(pageNo) {
			var serverData = null;

			var fileId = mark.util.getQueryString("fileId");
			DWREngine.setAsync(false);
			service.getMarkNoteData(fileId, pageNo, "mark", function(data) {
				if ("" != data) {
					serverData = data;
				}
			});
			DWREngine.setAsync(true);
			return serverData;
		},
		getEmailAddr : function() {
			var emailAddr = null;
			var fileId = mark.util.getQueryString("fileId");
			DWREngine.setAsync(false);
			service.getEmailAddr(fileId, function(data) {
				if ("" != data) {
					emailAddr = data;
				}
			});
			DWREngine.setAsync(true);
			return emailAddr;
		},
		saveEmailAddr : function(emailValue) {
			var fileId = mark.util.getQueryString("fileId");
			service.saveEmailAddr(fileId, emailValue, function(data) {
				if (data) {

				}
			});
		}
	};

	/* 工具 */
	mark.util = {
		// 保存恢复操作数据
		dataUndoContainer : [],
		// 保存重做操作数据
		dataRedoContainer : [],
		getDomWidth : function(dom) {
			return dom.attr("clientWidth");
		},
		getDomHeight : function(dom) {
			return dom.attr("clientHeight");
		},
		createElement : function(tagName, id) {
			var newDom = $(document.createElement(tagName));
			newDom.attr("id", id);

			return newDom;
		},
		createElement : function(tagName, id, style, dom) {
			var newDom = $(document.createElement(tagName));
			newDom.attr("id", id);
			newDom.attr("style", style);
			if (null != dom) {
			}
			return newDom;
		},
		getElementTop : function(elementId) {
			return $("#" + elementId).position().top;
		},
		getToolInstance : function(toolId, text, bindEvent) {
			var style = mark.style.getInstanceStyle(toolId);
			var instance = this.createElement("div", toolId, style, null);
			if ("" != text) {
				instance.html(text);
			}
			if (bindEvent) {
				instance.bind("click", {
					toolId : toolId,
					toolType : toolId + "Click"
				}, mark.event.onToolbarClick);
			}
			return instance;
		},
		showDetailTools : function(toolId) {
			if (!$("#" + toolId)[0]) {
				var detailTools = mark.toolbar[toolId].getInstance();
				$("#" + mark.const.MARKCONTAINER_ID).append(detailTools);
				$("#" + toolId).hide();
			}
			if ("none" == $("#" + toolId).css("display")) {
				$("#" + toolId).slideDown(mark.const.ANIMAL_TIME);
			} else {
				$("#" + toolId).slideUp(mark.const.ANIMAL_TIME);
			}
		},
		hideDetailTools : function(toolId) {
			var tools = $("#" + toolId);
			if (tools) {
				if ("none" != tools.css("display")) {
					tools.slideUp(mark.const.ANIMAL_TIME);
				}
			}
		},
		setCurrentToolStyle : function(toolId) {
			var toolDivs = $("#" + mark.const.TB_TOOLBAR_ID + " DIV");
			$.each(toolDivs, function(i, dom) {
				if (toolId == $(dom).attr("id")) {
					$(dom).css("background-color", "silver");
				} else {
					$(dom).css("background-color", "");
				}
			});
		},
		/* 压入一个图像数据 */
		pushUndoData : function(data) {
			this.dataUndoContainer.push(data);
		},
		/* 弹出一个图像数据 */
		popUndoData : function() {
			if (this.dataUndoContainer.length > 0) {
				return this.dataUndoContainer.pop();
			} else {
				return null;
			}
		},
		pushRedoData : function(data) {
			this.dataRedoContainer.push(data);
		},
		popRedoData : function(data) {
			if (this.dataRedoContainer.length > 0) {
				return this.dataRedoContainer.pop();
			} else {
				return null;
			}
		},
		getCanvas : function() {
			return document.getElementById(mark.const.CANVAS_ID);
		},
		getContext : function() {
			return mark.util.getCanvas().getContext("2d");
		},
		clearCanvas : function() {
			mark.util.getContext().clearRect(0, 0, mark.util.getCanvas().width,
					mark.util.getCanvas().height);
		},
		preventScroll : function() {
			document.body.addEventListener('touchmove',
					mark.event.preventDefaultEventListener, false);
		},
		/* 和photoswipe插件相关的东西 */
		getPhotoSwipeImageWidth : function() {
			return $(".ps-carousel-content img")[1].width;
		},
		getPhotoSwipeImageHeight : function() {
			return $(".ps-carousel-content img")[1].height;
		},
		getPhotoSwipeImageLeft : function() {
			return $($(".ps-carousel-content img")[1]).position().left;
		},
		getPhotoswipeImgIdx : function() {
			return (mark.util.getPhotoSwipeInstance().carousel.currentCacheIndex + 1);
		},
		getPhotoSwipeInstance : function() {
			return window.Code.PhotoSwipe.instances[0];
		},
		getQueryString : function(name) {
			var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
			if (reg.test(location.href))
				return unescape(RegExp.$2.replace(/\+/g, " "));
			return "";
		}
	};

	/* 画布操作 */
	mark.drawer = {
		// 绘图操作类型
		operation : "",
		context : null,
		getContext : function() {
			return mark.util.getCanvas().getContext("2d");
		},
		draw : {
			startTime : null,
			startX : 0,

			sourceY : 0,
			saveUndoData : function(canvas) {
				var data = canvas.toDataURL();
				mark.util.pushUndoData(data);
			},
			saveRedoData : function(canvas) {
				var data = canvas.toDataURL();
				mark.util.pushRedoData(data);
			},
			touchstart : function(coors, len) {
				if (len == 2) {
					var toolId = mark.toolbar.currentToolId = mark.const.TB_HAND_ID;
					mark.util.setCurrentToolStyle(toolId);
				}

				var markContainerTop = mark.util
						.getElementTop(mark.const.MARKCONTAINER_ID);
				this.sourceY = coors.y - markContainerTop;
				this.context = mark.drawer.getContext();
				if (mark.toolbar.currentToolId == mark.const.TB_PEN_ID) {
					// this.saveUndoData(canvas);
					this.context.lineWidth = (undefined == mark.canvas.lineWidth ? 1
							: mark.canvas.lineWidth);
					this.context.strokeStyle = (undefined == mark.canvas.lineColor ? "BLACK"
							: mark.canvas.lineColor);
					this.context.lineCap = "round";
					this.context.iineJoin = "round";
					this.context.globalCompositeOperation = "source-over";
					this.context.beginPath();
					this.context.moveTo(coors.x, this.sourceY);
					mark.canvas.paint = true;
					mark.canvas.erase = false;
					mark.canvas.drag = false;
				} else if (mark.toolbar.currentToolId == mark.const.TB_ERASE_ID) {
					// this.saveRedoData(canvas);
					this.context.lineWidth = mark.const.ERASE_LINE_WIDTH;
					this.context.strokeStyle = mark.const.ERASE_COLOR;
					this.context.globalCompositeOperation = mark.const.ERASE_OPERATION;
					this.context.beginPath();
					this.context.moveTo(coors.x, this.sourceY);
					mark.canvas.paint = false;
					mark.canvas.drag = false;
					mark.canvas.erase = true;
				} else if (mark.toolbar.currentToolId == mark.const.TB_HAND_ID) {
					mark.canvas.paint = false;
					mark.canvas.erase = false;
					mark.canvas.drag = true;

					this.startX = coors.x;
					this.startTime = new Date();

				}
			},
			touchmove : function(coors, len) {
				var markContainerTop = mark.util
						.getElementTop(mark.const.MARKCONTAINER_ID);
				if (mark.canvas.paint || mark.canvas.erase) {
					this.context.lineTo(coors.x, coors.y - markContainerTop);
					this.context.stroke();
				} else if (mark.canvas.drag) {
					Code.PhotoSwipe.instances[0].destroyZoomPanRotate();
					$($(".ps-carousel-content img")[1]).css(
							{
								top : (coors.y - this.sourceY) > 0 ? 0
										: coors.y - this.sourceY,
							});

					var markContainer = $("#" + mark.const.MARKCONTAINER_ID);
					var markTop = markContainer.position().top;
					var toolbarTop = markTop < 0 ? 0 - markTop : 0;

					markContainer.css({
						top : (coors.y - this.sourceY) > 0 ? 0 : coors.y
								- this.sourceY,
					});

					$("#" + mark.const.TB_TOOLBAR_ID).css({
						top : toolbarTop
					});
				}
			},
			touchend : function(coors, len) {
				if (mark.canvas.paint) {
					mark.container.needSave = true;
					// this.saveUndoData(canvas);
					this.touchmove(coors, len);
					mark.canvas.paint = false;
				} else if (mark.canvas.erase) {
					mark.container.needSave = true;
					// this.saveUndoData(canvas);
					this.touchmove(coors, len);
					mark.canvas.erase = false;
					this.context.globalCompositeOperation = "source-over";
				} else if (mark.canvas.drag) {
					if (len >= 1) {
						mark.util.preventScroll();
						mark.toolbar.currentToolId = mark.const.TB_PEN_ID;
						mark.util
								.setCurrentToolStyle(mark.toolbar.currentToolId);
					}
					this.endTime = new Date();
					if (this.endTime - this.startTime < 300) {
						if (coors.x - this.startX < -(mark.const.ANIMAL_LEN)) {
							mark.event.checkStateAndShowNext();
						} else if (coors.x - this.startX > mark.const.ANIMAL_LEN) {
							mark.event.checkStateAndShowPrevious();
						} else if (coors.x == this.startX) {
							if (coors.x < window.innerWidth / 2) {
								mark.event.checkStateAndShowPrevious();
							} else {
								mark.event.checkStateAndShowNext();
							}
						}
					}
				}
				this.touchmove(coors, len);
				mark.canvas.drag = false;
			}
		},
		action : function(event) {
			var touchLen = event.originalEvent.touches.length
					|| event.originalEvent.changedTouches.length;
			var touch = event.originalEvent.touches[0]
					|| event.originalEvent.changedTouches[0];
			var coors = {
				x : touch.pageX - mark.util.getPhotoSwipeImageLeft(),
				y : touch.pageY
			};
			if (mark.toolbar.currentTool == mark.const.TB_PEN) {
				mark.drawer.draw[event.type](coors, touchLen);
			} else if (mark.toolbar.currentTool == mark.const.TB_ERASE) {
				mark.drawer.erase[event.type](coors, toucheLen);
			}
		}
	};
	/* 事件 */
	mark.event = {
		/* 事件 名称组成 id+Click */
		lineClick : function(event) {
			mark.util.showDetailTools(mark.const.TB_LINECHANGER_ID);
			mark.util.hideDetailTools(mark.const.TB_COLORPICKER_ID);
		},
		linePickerClick : function(event) {
			// $("#" + mark.const.TB_COLOR_ID).css("background-color",
			// "silver");
			mark.canvas.lineWidth = event.data.lineWidth;
			$("#" + mark.const.TB_LINECHANGER_ID).slideUp(
					mark.const.ANIMAL_TIME);
			// 选择完成后，将工具栏工具设置成画笔
			mark.toolbar.currentToolId = mark.const.TB_PEN_ID;
			mark.util.setCurrentToolStyle(mark.toolbar.currentToolId);
		},
		colorClick : function(event) {
			mark.util.showDetailTools(mark.const.TB_COLORPICKER_ID);
			mark.util.hideDetailTools(mark.const.TB_LINECHANGER_ID);
		},
		colorPickerClick : function(event) {
			// $("#" + mark.const.TB_COLOR_ID).css("background-color",
			// "silver");
			mark.canvas.lineColor = event.data.color;
			$("#" + mark.const.TB_COLORPICKER_ID).slideUp(
					mark.const.ANIMAL_TIME);
			// 选择完成后，将工具栏工具设置成画笔
			mark.toolbar.currentToolId = mark.const.TB_PEN_ID;
			mark.util.setCurrentToolStyle(mark.toolbar.currentToolId);
		},
		penClick : function(event) {
			mark.util.preventScroll();
			mark.toolbar.currentToolId = mark.const.TB_PEN_ID;
			mark.util.hideDetailTools(mark.const.TB_COLORPICKER_ID);
			mark.util.hideDetailTools(mark.const.TB_LINECHANGER_ID);
		},
		eraseClick : function(event) {
			mark.util.preventScroll();
			mark.toolbar.currentToolId = mark.const.TB_ERASE_ID;
			mark.util.hideDetailTools(mark.const.TB_COLORPICKER_ID);
			mark.util.hideDetailTools(mark.const.TB_LINECHANGER_ID);
		},
		handClick : function(event) {
			/*
			 * document.body.removeEventListener('touchmove',
			 * mark.event.preventDefaultEventListener);
			 */
			mark.util.hideDetailTools(mark.const.TB_COLORPICKER_ID);
			mark.util.hideDetailTools(mark.const.TB_LINECHANGER_ID);
		},
		undoClick : function(event) {
			if (mark.util.dataUndoContainer.length > 0) {
				var data = mark.util.popUndoData();
				if (null != data) {
					mark.util.pushRedoData(data);
				}
			}

			var undoContainerLen = mark.util.dataUndoContainer.length;
			var imageData = null;
			if (undoContainerLen > 0) {
				imageData = mark.util.dataUndoContainer[undoContainerLen - 1];
			}

			var canvas = document.getElementById(mark.const.CANVAS_ID);
			var context = canvas.getContext("2d");

			if (null != imageData) {
				var image = new Image();
				image.onload = function() {
					context.clearRect(0, 0, canvas.width, canvas.height);
					context.drawImage(image, 0, 0, canvas.width, canvas.height);
				};
				image.src = imageData;
			} else {
				context.clearRect(0, 0, canvas.width, canvas.height);
			}
		},
		redoClick : function(event) {
			if (mark.util.dataRedoContainer.length > 0) {
				var data = mark.util.popRedoData();
				if (null != data) {
					mark.util.pushUndoData(data);
					var canvas = document.getElementById(mark.const.CANVAS_ID);
					var context = canvas.getContext("2d");
					var image = new Image();
					image.onload = function() {
						context.clearRect(0, 0, canvas.width, canvas.height);
						context.drawImage(image, 0, 0, canvas.width,
								canvas.height);
					};
					image.src = data;
				}
			}
		},
		emailClick : function(evnet) {
			// 读取数据库中存储的email地址
			var emailAddr = mark.serverUtil.getEmailAddr();
			var emailValue = window.prompt("请输入您的EMAIL地址,\n会议结束后由系统发送到您的邮箱！",
					emailAddr);
			if (emailValue != emailAddr && emailValue != null) {
				mark.serverUtil.saveEmailAddr(emailValue);
			}
		},
		saveClick : function(event) {
			mark.saveToServer();
		},
		closeClick : function(event) {
			mark.util.hideDetailTools(mark.const.TB_COLORPICKER_ID);
			mark.util.hideDetailTools(mark.const.TB_LINECHANGER_ID);

			if (mark.container.needSave) {
				if (confirm("推出前需要保存当前批注么？")) {
					mark.saveToServer();
					mark.close();
				} else {
					mark.close();
				}
			} else {
				mark.close();
			}

		},
		/* 工具栏事件统一入口 */
		onToolbarClick : function(event) {
			// var toolId = event.data.toolId;
			var toolId = mark.toolbar.currentToolId = event.data.toolId;
			mark.util.setCurrentToolStyle(toolId);
			var toolType = event.data.toolType;
			mark.event[toolType](event);
		},

		onContainerRotate : function(event) {
			mark.rotate();
		},
		preventDefaultEventListener : function(event) {
			event.preventDefault();
		},
		/* 图片和笔记同事操作事件 */
		photoAndMarkNext : function() {
			mark.util.getPhotoSwipeInstance().carousel.next();
			mark.next();
		},
		photoAndMarkPrevious : function() {
			mark.util.getPhotoSwipeInstance().carousel.previous();
			mark.previous();
		},
		checkStateAndShowNext : function() {
			if (mark.container.needSave) {
				if (window.confirm("是否需要保存当前笔记？")) {
					mark.saveToServer();
				}
			}
			mark.event.photoAndMarkNext();
			mark.container.needSave = false;
		},
		checkStateAndShowPrevious : function() {
			if (mark.container.needSave) {
				if (window.confirm("是否需要保存当前笔记？")) {
					mark.saveToServer();
				}
			}
			mark.event.photoAndMarkPrevious();
			mark.container.needSave = false;
		}
	};
	/* 容器 */
	mark.container = {
		needSave : false,
		instance : {},
		id : mark.const.MARKCONTAINER_ID,
		style : mark.style.containerStyle,
		init : function() {
			var container = mark.util.createElement("div", this.id, this.style,
					null);
			var canvas = mark.canvas.getCanvas();
			var toolbar = mark.toolbar.getToolBar();
			container.append(canvas);
			container.append(toolbar);
			this.instance = container;
			$("body").append(container);
			// window.onorientationchange = mark.event.onContainerRotate;
		},
		show : function() {
			this.instance.fadeIn(mark.const.ANIMAL_TIME);
			var markServerData = mark.serverUtil.getMarkNoteData("mark");
			if (markServerData != null) {

				var context = mark.drawer.getContext();
				var image = new Image();
				image.onload = function() {
					context.drawImage(image, 0, 0, mark.util
							.getPhotoSwipeImageWidth(), mark.util
							.getPhotoSwipeImageHeight());
				};
				image.src = markServerData;
			} else {
				mark.util.clearCanvas();
			}

			mark.toolbar.currentToolId = mark.const.TB_PEN_ID;
			mark.util.setCurrentToolStyle(mark.toolbar.currentToolId);
		},
		close : function() {
			if (this.instance) {
				this.instance.fadeOut(mark.const.ANIMAL_TIME, function() {
					// this.instance.remove();
				});
			}
		},
		remove : function() {
			this.instance.remove();
		}
	};
	/* 画布 */
	mark.canvas = {
		paint : false,
		erase : false,
		drag : false,
		lineWidth : 1,
		lineColor : "BLACK",
		lineCap : "round",
		id : mark.const.CANVAS_ID,
		// style : mark.sytle.getCanvasStyle(),
		getCanvas : function() {
			var canvas = mark.util.createElement("canvas", this.id,
					mark.styleUtil.getCanvasStyle(), null);
			canvas.attr("width", mark.util.getPhotoSwipeImageWidth());
			canvas.attr("height", mark.util.getPhotoSwipeImageHeight());

			canvas.bind("touchstart", mark.drawer.action);
			canvas.bind("touchmove", mark.drawer.action);
			canvas.bind("touchend", mark.drawer.action);

			return canvas;
		}
	};
	/* 工具栏 */
	mark.toolbar = {
		currentToolId : mark.const.TB_HAND_ID,
		id : mark.const.TB_TOOLBAR_ID,
		style : mark.style.toolbarStyle,
		split : {
			id : mark.const.TB_SPLIT_ID,
			style : mark.style.splitStyle,
			getInstance : function() {
				var instance = mark.util.createElement("div", this.id,
						this.style, null);
				return instance;
			}
		},
		line : {
			id : mark.const.TB_LINE_ID,
			text : "",
			getInstance : function() {
				return mark.util.getToolInstance(this.id, this.text, true);
			}
		},
		lineChanger : {
			id : mark.const.TB_LINECHANGER_ID,
			style : mark.style.lineChangerStyle,
			getInstance : function() {
				var lineChanger = mark.util.createElement("div", this.id,
						this.style, null);

				var lineChangerElementStyle = mark.style.lineChangerElemetnStyle;
				$.each(mark.const.LINEWIDTH, function(i, width) {
					var tmepId = "line" + width;
					var tempLine = mark.util.createElement("div", tmepId,
							lineChangerElementStyle, null);
					tempLine.html(width + "号");
					tempLine.bind("click", {
						lineWidth : width * 2,
						toolType : "linePickerClick"
					}, mark.event.onToolbarClick);
					lineChanger.append(tempLine);
				});

				var line = $("#" + mark.const.TB_LINE_ID);
				var toolbar = $("#" + mark.const.TB_TOOLBAR_ID);
				lineChanger.css("top", toolbar.position().top + 50);

				lineChanger.css("margin-left", line.position().left);
				lineChanger.css("width", line.outerWidth(true));
				return lineChanger;
			}
		},
		color : {
			id : mark.const.TB_COLOR_ID,
			text : "",
			getInstance : function() {
				return mark.util.getToolInstance(this.id, this.text, true);
			}
		},
		colorPicker : {
			id : mark.const.TB_COLORPICKER_ID,
			style : mark.style.colorPickerStyle,
			getInstance : function() {
				var colorPicker = mark.util.createElement("div", this.id,
						this.style, null);

				var colorPickerElementStyle = mark.style.colorPickerElemetnStyle;
				$.each(mark.const.COLOR, function(i, color) {
					var tempId = color + "Div";
					var tempColor = mark.util.createElement("div", tempId,
							colorPickerElementStyle, null);
					tempColor.css("background-color", color);
					tempColor.bind("click", {
						color : color,
						toolType : "colorPickerClick"
					}, mark.event.onToolbarClick);
					colorPicker.append(tempColor);
				});

				var color = $("#" + mark.const.TB_COLOR_ID);
				var toolbar = $("#" + mark.const.TB_TOOLBAR_ID);
				colorPicker.css("top", toolbar.position().top + 50);
				colorPicker.css("margin-left", color.position().left);
				colorPicker.css("width", color.outerWidth(true));
				return colorPicker;
			}
		},
		pen : {
			id : mark.const.TB_PEN_ID,
			text : "",
			getInstance : function() {
				return mark.util.getToolInstance(this.id, this.text, true);
			}
		},
		erase : {
			eraseLineWidth : mark.const.ERASE_LINE_WIDTH,
			id : mark.const.TB_ERASE_ID,
			text : "",
			getInstance : function() {
				return mark.util.getToolInstance(this.id, this.text, true);
			}
		},
		hand : {
			id : mark.const.TB_HAND_ID,
			text : "",
			getInstance : function() {
				return mark.util.getToolInstance(this.id, this.text, true);
			}
		},
		undo : {
			id : mark.const.TB_UNDO_ID,
			text : "",
			getInstance : function() {
				return mark.util.getToolInstance(this.id, this.text, true);
			}
		},
		redo : {
			id : mark.const.TB_REDO_ID,
			text : "",
			getInstance : function() {
				return mark.util.getToolInstance(this.id, this.text, true);
			}
		},
		save : {
			id : mark.const.TB_SAVE_ID,
			text : '',
			getInstance : function() {
				return mark.util.getToolInstance(this.id, this.text, true);
			}
		},
		email : {
			id : mark.const.TB_EMAIL_ID,
			text : '',
			getInstance : function() {
				return mark.util.getToolInstance(this.id, this.text, true);
			}
		},
		close : {
			id : mark.const.TB_CLOSE_ID,
			text : '',
			getInstance : function() {
				return mark.util.getToolInstance(this.id, this.text, true);
			}
		},
		tip : {
			id : mark.const.TB_TIP_ID,
			text : '',
			getInstance : function() {
				return mark.util.getToolInstance(this.id, this.text, false);
			}
		},
		getToolBar : function() {
			var toolBar = mark.util.createElement("div", this.id, this.style,
					null);
			/* 从左到右排列 */
			toolBar.append(this.line.getInstance());
			toolBar.append(this.color.getInstance());
			toolBar.append(this.pen.getInstance());
			toolBar.append(this.erase.getInstance());
			toolBar.append(this.hand.getInstance());
			toolBar.append(this.split.getInstance());
			// toolBar.append(this.undo.getInstance());
			// toolBar.append(this.redo.getInstance());
			toolBar.append(this.split.getInstance());
			toolBar.append(this.save.getInstance());
			toolBar.append(this.email.getInstance());
			toolBar.append(this.close.getInstance());
			toolBar.append(this.tip.getInstance());
			return toolBar;
		}
	};

})($);

转载于:https://my.oschina.net/smellok/blog/72817