ss_new_ui_skin_and_page/js/instructor/instructor-writer.js

var instructor_writer = function (editor, handler, count) {
	this.count = count || 3;
	this.handler = handler;
	this.bound = $(editor).width() / this.count;
	this.editor = editor;
	this.isshow = false;
	this.init();
}
instructor_writer.prototype.init = function () {
	if (this.container)
		return;
	var that = this;
	var dom = this.container = document.createElement("div");
	this.container.style.zIndex = 10000000;
	this.container.style.position = "absolute";
	this.container.style.display = "none";
	this.container.id = "writer";
	this.container.className = "write-div";
	for (var i = 0; i < this.count; i++) {
		this.container.appendChild(this.createDrawAbleCanvas());
	}
	window.addEventListener("unload", function () {
		dom.parentNode.removeChild(dom);
		window.top.document.removeEventListener("click", docClick);
	});

	window.docClick = function (e) {
		if (e.srcElement.parentNode != dom && that.editor != e.srcElement && e.srcElement.parentNode != that.editor && e.srcElement != that.handler) { //不是canvas
			that.hide();
			that.onHide&&that.onHide();
		}
	}

	window.addEventListener("click", docClick);
	window.top.document.addEventListener("click", docClick);
	window.top.document.body.appendChild(this.container);
	this.bound = $(this.container).height();
}
instructor_writer.prototype.show = function () { 
	if (!$(this.editor).is(":visible"))
		return;
	var ofs = recursionIframe(window);
	this.container.style.left = ofs.left + $(this.editor).offset().left + "px";
	this.container.style.top = ofs.top - this.bound + $(this.editor).offset().top + "px";
	this.container.style.display = "";
	this.isshow = true;
}
instructor_writer.prototype.hide = function () {
	this.container.style.display = "none";
	this.isshow = false;
}
// instructor_writer.prototype.getWriteBackground = function () {
// var cvs = document.createElement("canvas");
// cvs.width = cvs.height = this.bound;
// var g = cvs.getContext("2d"),
// W = cvs.width,
// H = cvs.height;
// g.fillStyle = "white";
// g.fillRect(0, 0, W, H);
// g.strokeStyle = "red";
// g.lineWidth = 2;
// g.rect(1, 1, W - 2, H - 2);
// g.stroke();
// g.lineWidth = 1;
// g.setLineDash([5, 5]);
// g.moveTo(0, 0);
// g.lineTo(W, H);
// g.moveTo(0, H);
// g.lineTo(W, 0);
// g.moveTo(0, H / 2);
// g.lineTo(W, H / 2);
// g.moveTo(W / 2, 0);
// g.lineTo(W / 2, H);
// g.stroke();
// return cvs.toDataURL("image/png");
// };
instructor_writer.prototype.createDrawAbleCanvas = function () {
	var this_ = this;
	var canvas = document.createElement("canvas");
	// var url = this.getWriteBackground();
	// canvas.style.backgroundImage = 'URL(' + url + ')';
	// canvas.style.backgroundRepeat = "no-repeat";
	canvas.width = "239";
	canvas.height = "204";
	var context = canvas.getContext("2d");
	context.lineWidth = 6;
	/*在鼠标移动时划线     */
	function onMouseMove(event) {
		var canvas_ = this;
		var p = toCanvasCoord(canvas_, event.clientX, event.clientY);
		context.lineTo(p.x, p.y);
		context.stroke();
	}

	function onMouseDown(event) {
		var nodes = this.parentNode.children;
		for (var i = 0; i < nodes.length; i++) {
			if (nodes[i] != this)
				onMouseUp.call(nodes[i], event);
		}
		var canvas_ = this;
		canvas_.drawing = true;
		canvas_.ismouseup = false;
		if (canvas.timeoutid) {
			clearTimeout(canvas.timeoutid);
		}
		canvas_.getContext("2d").beginPath();
		var p = toCanvasCoord(canvas_, event.clientX, event.clientY);
		canvas_.getContext("2d").moveTo(p.x, p.y);
		canvas_.addEventListener("mousemove", onMouseMove, false);
	}

	function onMouseUp(event) {
		var canvas_ = this;
		if (canvas_.ismouseup)
			return;
		canvas_.removeEventListener("mousemove", onMouseMove, false);
		var timeoutid = setTimeout(function () {
				if (canvas_.drawing) {
					canvas_.insertImg(canvas);
					canvas_.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
					canvas_.timeoutid = null;
					canvas_.drawing = false;
				} else {}
			}, 1000);
		canvas_.timeoutid = timeoutid;
		canvas_.ismouseup = true;
	}

	function toCanvasCoord(canvas, x, y) {
		var point = {};
		var coord = canvas.getBoundingClientRect();
		point.x = x - coord.left;
		point.y = y - coord.top;
		return point;
	}
	function createImage(src) {
		var img = new Image();
		$(img).addClass('item');
		img.src = src;
		return img;
	}
	canvas.insertImg = function (canvas) {
		var img = createImage(canvas.toDataURL("image/png"));
		img.setAttribute("editMode", "handWrite");
		$(this_.editor).append(img);
		addDivDragStart();
	};
	/*添加mousedown监听事件，在用户鼠标按下后开始画线，并注册mousemove事件*/
	canvas.addEventListener("mousedown", onMouseDown, false);

	/*在鼠标按键松开后，注销鼠标移动事件    */
	canvas.addEventListener("mouseup", onMouseUp, false);
	// canvas.addEventListener("mouseleave", onMouseUp, false);
	canvas.addEventListener("mouseenter", function () {
		this.ismouseenter = true;
	}, false);
	canvas.addEventListener("mouseout", function () {
		this.ismouseenter = false;
	}, false);
	document.addEventListener("mouseup", function () {
		if (!canvas.ismouseenter) {
			onMouseUp.call(canvas);
		}
	}, false);
	return canvas;
};
var recursionIframe = function (win) {

	if (!win) {
		win = this.wins;
	}

	function getTop(e) {
		var offset = e.offsetTop;
		if (e.offsetParent != null)
			offset += getTop(e.offsetParent);
		return offset;
	}

	function getLeft(e) {
		var offset = e.offsetLeft;
		if (e.offsetParent != null)
			offset += getLeft(e.offsetParent);
		return offset;
	}

	if (win.parent == top && win.parent == win) {
		// var xy = this.getAbsPoint(win);

		return {
			"left": 0,
			"top": 0
		};
	}
	var winPar = win.parent; // .opener
	var iframeArr = winPar.document.getElementsByTagName('IFRAME');
	var targetIframe;
	for (var i = 0; i < iframeArr.length; i++) {
		var iframeElem = iframeArr[i];
		if (iframeElem.contentWindow == win) {
			targetIframe = iframeElem;
			break;
		}
	}
	// alert(targetIframe==null)
	//	var xy = this.getAbsPoint(targetIframe);
	var xy = {
		left: getLeft(targetIframe),
		top: getTop(targetIframe)
	}

	if (winPar.parent != winPar) {
		var xy2 = this.recursionIframe(winPar);
		xy.left += xy2.left;
		xy.top += xy2.top;
	}

	return xy
}