/** * Created with JetBrains PhpStorm. * User: xuheng * Date: 12-5-22 * Time: 上午11:38 * To change this template use File | Settings | File Templates. */ var scrawl = function (options) { options && this.initOptions(options); }; (function () { var canvas = $G("J_brushBoard"), context = canvas.getContext('2d'), drawStep = [], //undo redo存储 drawStepIndex = 0; //undo redo指针 scrawl.prototype = { isScrawl:false, //是否涂鸦 brushWidth:-1, //画笔粗细 brushColor:"", //画笔颜色 initOptions:function (options) { var me = this; me.originalState(options);//初始页面状态 me._buildToolbarColor(options.colorList);//动态生成颜色选择集合 me._addBoardListener(options.saveNum);//添加画板处理 me._addOPerateListener(options.saveNum);//添加undo redo clearBoard处理 me._addColorBarListener();//添加颜色选择处理 me._addBrushBarListener();//添加画笔大小处理 me._addEraserBarListener();//添加橡皮大小处理 me._addAddImgListener();//添加增添背景图片处理 me._addRemoveImgListenter();//删除背景图片处理 me._addScalePicListenter();//添加缩放处理 me._addClearSelectionListenter();//添加清楚选中状态处理 me._originalColorSelect(options.drawBrushColor);//初始化颜色选中 me._originalBrushSelect(options.drawBrushSize);//初始化画笔选中 me._clearSelection();//清楚选中状态 }, originalState:function (options) { var me = this; me.brushWidth = options.drawBrushSize;//同步画笔粗细 me.brushColor = options.drawBrushColor;//同步画笔颜色 context.lineWidth = me.brushWidth;//初始画笔大小 context.strokeStyle = me.brushColor;//初始画笔颜色 context.fillStyle = "transparent";//初始画布背景颜色 context.lineCap = "round";//去除锯齿 context.fill(); }, _buildToolbarColor:function (colorList) { var tmp = null, arr = []; arr.push("<table id='J_colorList'>"); for (var i = 0, color; color = colorList[i++];) { if ((i - 1) % 5 == 0) { if (i != 1) { arr.push("</tr>"); } arr.push("<tr>"); } tmp = '#' + color; arr.push("<td><a title='" + tmp + "' href='javascript:void(0)' style='background-color:" + tmp + "'></a></td>"); } arr.push("</tr></table>"); $G("J_colorBar").innerHTML = arr.join(""); }, _addBoardListener:function (saveNum) { var me = this, margin = 0, startX = -1, startY = -1, isMouseDown = false, isMouseMove = false, isMouseUp = false, buttonPress = 0, button, flag = ''; margin = parseInt(domUtils.getComputedStyle($G("J_wrap"), "margin-left")); drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height)); drawStepIndex += 1; domUtils.on(canvas, ["mousedown", "mousemove", "mouseup", "mouseout"], function (e) { button = browser.webkit ? e.which : buttonPress; switch (e.type) { case 'mousedown': buttonPress = 1; flag = 1; isMouseDown = true; isMouseUp = false; isMouseMove = false; me.isScrawl = true; startX = e.clientX - margin;//10为外边距总和 startY = e.clientY - margin; context.beginPath(); break; case 'mousemove' : if (!flag && button == 0) { return; } if (!flag && button) { startX = e.clientX - margin;//10为外边距总和 startY = e.clientY - margin; context.beginPath(); flag = 1; } if (isMouseUp || !isMouseDown) { return; } var endX = e.clientX - margin, endY = e.clientY - margin; context.moveTo(startX, startY); context.lineTo(endX, endY); context.stroke(); startX = endX; startY = endY; isMouseMove = true; break; case 'mouseup': buttonPress = 0; if (!isMouseDown)return; if (!isMouseMove) { context.arc(startX, startY, context.lineWidth, 0, Math.PI * 2, false); context.fillStyle = context.strokeStyle; context.fill(); } context.closePath(); me._saveOPerate(saveNum); isMouseDown = false; isMouseMove = false; isMouseUp = true; startX = -1; startY = -1; break; case 'mouseout': flag = ''; buttonPress = 0; if (button == 1) return; context.closePath(); break; } }); }, _addOPerateListener:function (saveNum) { var me = this; domUtils.on($G("J_previousStep"), "click", function () { if (drawStepIndex > 1) { drawStepIndex -= 1; context.clearRect(0, 0, context.canvas.width, context.canvas.height); context.putImageData(drawStep[drawStepIndex - 1], 0, 0); me.btn2Highlight("J_nextStep"); drawStepIndex == 1 && me.btn2disable("J_previousStep"); } }); domUtils.on($G("J_nextStep"), "click", function () { if (drawStepIndex > 0 && drawStepIndex < drawStep.length) { context.clearRect(0, 0, context.canvas.width, context.canvas.height); context.putImageData(drawStep[drawStepIndex], 0, 0); drawStepIndex += 1; me.btn2Highlight("J_previousStep"); drawStepIndex == drawStep.length && me.btn2disable("J_nextStep"); } }); domUtils.on($G("J_clearBoard"), "click", function () { context.clearRect(0, 0, context.canvas.width, context.canvas.height); drawStep = []; me._saveOPerate(saveNum); drawStepIndex = 1; me.isScrawl = false; me.btn2disable("J_previousStep"); me.btn2disable("J_nextStep"); me.btn2disable("J_clearBoard"); }); }, _addColorBarListener:function () { var me = this; domUtils.on($G("J_colorBar"), "click", function (e) { var target = me.getTarget(e), color = target.title; if (!!color) { me._addColorSelect(target); me.brushColor = color; context.globalCompositeOperation = "source-over"; context.lineWidth = me.brushWidth; context.strokeStyle = color; } }); }, _addBrushBarListener:function () { var me = this; domUtils.on($G("J_brushBar"), "click", function (e) { var target = me.getTarget(e), size = browser.ie ? target.innerText : target.text; if (!!size) { me._addBESelect(target); context.globalCompositeOperation = "source-over"; context.lineWidth = parseInt(size); context.strokeStyle = me.brushColor; me.brushWidth = context.lineWidth; } }); }, _addEraserBarListener:function () { var me = this; domUtils.on($G("J_eraserBar"), "click", function (e) { var target = me.getTarget(e), size = browser.ie ? target.innerText : target.text; if (!!size) { me._addBESelect(target); context.lineWidth = parseInt(size); context.globalCompositeOperation = "destination-out"; context.strokeStyle = "#FFF"; } }); }, _addAddImgListener:function () { var file = $G("J_imgTxt"); if (!window.FileReader) { $G("J_addImg").style.display = 'none'; $G("J_removeImg").style.display = 'none'; $G("J_sacleBoard").style.display = 'none'; } domUtils.on(file, "change", function (e) { var frm = file.parentNode; addMaskLayer(lang.backgroundUploading); var target = e.target || e.srcElement, reader = new FileReader(); reader.onload = function(evt){ var target = evt.target || evt.srcElement; ue_callback(target.result, 'SUCCESS'); }; reader.readAsDataURL(target.files[0]); frm.reset(); }); }, _addRemoveImgListenter:function () { var me = this; domUtils.on($G("J_removeImg"), "click", function () { $G("J_picBoard").innerHTML = ""; me.btn2disable("J_removeImg"); me.btn2disable("J_sacleBoard"); }); }, _addScalePicListenter:function () { domUtils.on($G("J_sacleBoard"), "click", function () { var picBoard = $G("J_picBoard"), scaleCon = $G("J_scaleCon"), img = picBoard.children[0]; if (img) { if (!scaleCon) { picBoard.style.cssText = "position:relative;z-index:999;"+picBoard.style.cssText; img.style.cssText = "position: absolute;top:" + (canvas.height - img.height) / 2 + "px;left:" + (canvas.width - img.width) / 2 + "px;"; var scale = new ScaleBoy(); picBoard.appendChild(scale.init()); scale.startScale(img); } else { if (scaleCon.style.visibility == "visible") { scaleCon.style.visibility = "hidden"; picBoard.style.position = ""; picBoard.style.zIndex = ""; } else { scaleCon.style.visibility = "visible"; picBoard.style.cssText += "position:relative;z-index:999"; } } } }); }, _addClearSelectionListenter:function () { var doc = document; domUtils.on(doc, 'mousemove', function (e) { if (browser.ie && browser.version < 11) doc.selection.clear(); else window.getSelection().removeAllRanges(); }); }, _clearSelection:function () { var list = ["J_operateBar", "J_colorBar", "J_brushBar", "J_eraserBar", "J_picBoard"]; for (var i = 0, group; group = list[i++];) { domUtils.unSelectable($G(group)); } }, _saveOPerate:function (saveNum) { var me = this; if (drawStep.length <= saveNum) { if(drawStepIndex<drawStep.length){ me.btn2disable("J_nextStep"); drawStep.splice(drawStepIndex); } drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height)); drawStepIndex = drawStep.length; } else { drawStep.shift(); drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height)); drawStepIndex = drawStep.length; } me.btn2Highlight("J_previousStep"); me.btn2Highlight("J_clearBoard"); }, _originalColorSelect:function (title) { var colorList = $G("J_colorList").getElementsByTagName("td"); for (var j = 0, cell; cell = colorList[j++];) { if (cell.children[0].title.toLowerCase() == title) { cell.children[0].style.opacity = 1; } } }, _originalBrushSelect:function (text) { var brushList = $G("J_brushBar").children; for (var i = 0, ele; ele = brushList[i++];) { if (ele.tagName.toLowerCase() == "a") { var size = browser.ie ? ele.innerText : ele.text; if (size.toLowerCase() == text) { ele.style.opacity = 1; } } } }, _addColorSelect:function (target) { var me = this, colorList = $G("J_colorList").getElementsByTagName("td"), eraserList = $G("J_eraserBar").children, brushList = $G("J_brushBar").children; for (var i = 0, cell; cell = colorList[i++];) { cell.children[0].style.opacity = 0.3; } for (var k = 0, ele; ele = brushList[k++];) { if (ele.tagName.toLowerCase() == "a") { ele.style.opacity = 0.3; var size = browser.ie ? ele.innerText : ele.text; if (size.toLowerCase() == this.brushWidth) { ele.style.opacity = 1; } } } for (var j = 0, node; node = eraserList[j++];) { if (node.tagName.toLowerCase() == "a") { node.style.opacity = 0.3; } } target.style.opacity = 1; target.blur(); }, _addBESelect:function (target) { var brushList = $G("J_brushBar").children; var eraserList = $G("J_eraserBar").children; for (var i = 0, ele; ele = brushList[i++];) { if (ele.tagName.toLowerCase() == "a") { ele.style.opacity = 0.3; } } for (var j = 0, node; node = eraserList[j++];) { if (node.tagName.toLowerCase() == "a") { node.style.opacity = 0.3; } } target.style.opacity = 1; target.blur(); }, getCanvasData:function () { var picContainer = $G("J_picBoard"), img = picContainer.children[0]; if (img) { var x, y; if (img.style.position == "absolute") { x = parseInt(img.style.left); y = parseInt(img.style.top); } else { x = (picContainer.offsetWidth - img.width) / 2; y = (picContainer.offsetHeight - img.height) / 2; } context.globalCompositeOperation = "destination-over"; context.drawImage(img, x, y, img.width, img.height); } else { context.globalCompositeOperation = "destination-atop"; context.fillStyle = "#fff";//重置画布背景白色 context.fillRect(0, 0, canvas.width, canvas.height); } try { return canvas.toDataURL("image/png").substring(22); } catch (e) { return ""; } }, btn2Highlight:function (id) { var cur = $G(id); cur.className.indexOf("H") == -1 && (cur.className += "H"); }, btn2disable:function (id) { var cur = $G(id); cur.className.indexOf("H") != -1 && (cur.className = cur.className.replace("H", "")); }, getTarget:function (evt) { return evt.target || evt.srcElement; } }; })(); var ScaleBoy = function () { this.dom = null; this.scalingElement = null; }; (function () { function _appendStyle() { var doc = document, head = doc.getElementsByTagName('head')[0], style = doc.createElement('style'), cssText = '.scale{visibility:hidden;cursor:move;position:absolute;left:0;top:0;width:100px;height:50px;background-color:#fff;font-size:0;line-height:0;opacity:.4;filter:Alpha(opacity=40);}' + '.scale span{position:absolute;left:0;top:0;width:6px;height:6px;background-color:#006DAE;}' + '.scale .hand0, .scale .hand7{cursor:nw-resize;}' + '.scale .hand1, .scale .hand6{left:50%;margin-left:-3px;cursor:n-resize;}' + '.scale .hand2, .scale .hand4, .scale .hand7{left:100%;margin-left:-6px;}' + '.scale .hand3, .scale .hand4{top:50%;margin-top:-3px;cursor:w-resize;}' + '.scale .hand5, .scale .hand6, .scale .hand7{margin-top:-6px;top:100%;}' + '.scale .hand2, .scale .hand5{cursor:ne-resize;}'; style.type = 'text/css'; try { style.appendChild(doc.createTextNode(cssText)); } catch (e) { style.styleSheet.cssText = cssText; } head.appendChild(style); } function _getDom() { var doc = document, hand, arr = [], scale = doc.createElement('div'); scale.id = 'J_scaleCon'; scale.className = 'scale'; for (var i = 0; i < 8; i++) { arr.push("<span class='hand" + i + "'></span>"); } scale.innerHTML = arr.join(""); return scale; } var rect = [ //[left, top, width, height] [1, 1, -1, -1], [0, 1, 0, -1], [0, 1, 1, -1], [1, 0, -1, 0], [0, 0, 1, 0], [1, 0, -1, 1], [0, 0, 0, 1], [0, 0, 1, 1] ]; ScaleBoy.prototype = { init:function () { _appendStyle(); var me = this, scale = me.dom = _getDom(); me.scaleMousemove.fp = me; domUtils.on(scale, 'mousedown', function (e) { var target = e.target || e.srcElement; me.start = {x:e.clientX, y:e.clientY}; if (target.className.indexOf('hand') != -1) { me.dir = target.className.replace('hand', ''); } domUtils.on(document.body, 'mousemove', me.scaleMousemove); e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; }); domUtils.on(document.body, 'mouseup', function (e) { if (me.start) { domUtils.un(document.body, 'mousemove', me.scaleMousemove); if (me.moved) { me.updateScaledElement({position:{x:scale.style.left, y:scale.style.top}, size:{w:scale.style.width, h:scale.style.height}}); } delete me.start; delete me.moved; delete me.dir; } }); return scale; }, startScale:function (objElement) { var me = this, Idom = me.dom; Idom.style.cssText = 'visibility:visible;top:' + objElement.style.top + ';left:' + objElement.style.left + ';width:' + objElement.offsetWidth + 'px;height:' + objElement.offsetHeight + 'px;'; me.scalingElement = objElement; }, updateScaledElement:function (objStyle) { var cur = this.scalingElement, pos = objStyle.position, size = objStyle.size; if (pos) { typeof pos.x != 'undefined' && (cur.style.left = pos.x); typeof pos.y != 'undefined' && (cur.style.top = pos.y); } if (size) { size.w && (cur.style.width = size.w); size.h && (cur.style.height = size.h); } }, updateStyleByDir:function (dir, offset) { var me = this, dom = me.dom, tmp; rect['def'] = [1, 1, 0, 0]; if (rect[dir][0] != 0) { tmp = parseInt(dom.style.left) + offset.x; dom.style.left = me._validScaledProp('left', tmp) + 'px'; } if (rect[dir][1] != 0) { tmp = parseInt(dom.style.top) + offset.y; dom.style.top = me._validScaledProp('top', tmp) + 'px'; } if (rect[dir][2] != 0) { tmp = dom.clientWidth + rect[dir][2] * offset.x; dom.style.width = me._validScaledProp('width', tmp) + 'px'; } if (rect[dir][3] != 0) { tmp = dom.clientHeight + rect[dir][3] * offset.y; dom.style.height = me._validScaledProp('height', tmp) + 'px'; } if (dir === 'def') { me.updateScaledElement({position:{x:dom.style.left, y:dom.style.top}}); } }, scaleMousemove:function (e) { var me = arguments.callee.fp, start = me.start, dir = me.dir || 'def', offset = {x:e.clientX - start.x, y:e.clientY - start.y}; me.updateStyleByDir(dir, offset); arguments.callee.fp.start = {x:e.clientX, y:e.clientY}; arguments.callee.fp.moved = 1; }, _validScaledProp:function (prop, value) { var ele = this.dom, wrap = $G("J_picBoard"); value = isNaN(value) ? 0 : value; switch (prop) { case 'left': return value < 0 ? 0 : (value + ele.clientWidth) > wrap.clientWidth ? wrap.clientWidth - ele.clientWidth : value; case 'top': return value < 0 ? 0 : (value + ele.clientHeight) > wrap.clientHeight ? wrap.clientHeight - ele.clientHeight : value; case 'width': return value <= 0 ? 1 : (value + ele.offsetLeft) > wrap.clientWidth ? wrap.clientWidth - ele.offsetLeft : value; case 'height': return value <= 0 ? 1 : (value + ele.offsetTop) > wrap.clientHeight ? wrap.clientHeight - ele.offsetTop : value; } } }; })(); //后台回调 function ue_callback(url, state) { var doc = document, picBorard = $G("J_picBoard"), img = doc.createElement("img"); //图片缩放 function scale(img, max, oWidth, oHeight) { var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight; if (ow > max || oh > max) { if (ow >= oh) { if (width = ow - max) { percent = (width / ow).toFixed(2); img.height = oh - oh * percent; img.width = max; } } else { if (height = oh - max) { percent = (height / oh).toFixed(2); img.width = ow - ow * percent; img.height = max; } } } } //移除遮罩层 removeMaskLayer(); //状态响应 if (state == "SUCCESS") { picBorard.innerHTML = ""; img.onload = function () { scale(this, 300); picBorard.appendChild(img); var obj = new scrawl(); obj.btn2Highlight("J_removeImg"); //trace 2457 obj.btn2Highlight("J_sacleBoard"); }; img.src = url; } else { alert(state); } } //去掉遮罩层 function removeMaskLayer() { var maskLayer = $G("J_maskLayer"); maskLayer.className = "maskLayerNull"; maskLayer.innerHTML = ""; dialog.buttons[0].setDisabled(false); } //添加遮罩层 function addMaskLayer(html) { var maskLayer = $G("J_maskLayer"); dialog.buttons[0].setDisabled(true); maskLayer.className = "maskLayer"; maskLayer.innerHTML = html; } //执行确认按钮方法 function exec(scrawlObj) { if (scrawlObj.isScrawl) { addMaskLayer(lang.scrawlUpLoading); var base64 = scrawlObj.getCanvasData(); if (!!base64) { var options = { timeout:100000, onsuccess:function (xhr) { if (!scrawlObj.isCancelScrawl) { var responseObj; responseObj = eval("(" + xhr.responseText + ")"); if (responseObj.state == "SUCCESS") { var imgObj = {}, url = editor.options.scrawlUrlPrefix + responseObj.url; imgObj.src = url; imgObj._src = url; imgObj.alt = responseObj.original || ''; imgObj.title = responseObj.title || ''; editor.execCommand("insertImage", imgObj); dialog.close(); } else { alert(responseObj.state); } } }, onerror:function () { alert(lang.imageError); dialog.close(); } }; options[editor.getOpt('scrawlFieldName')] = base64; var actionUrl = editor.getActionUrl(editor.getOpt('scrawlActionName')), params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '', url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params); ajax.request(url, options); } } else { addMaskLayer(lang.noScarwl + " <input type='button' value='" + lang.continueBtn + "' onclick='removeMaskLayer()'/>"); } }