首页 > 代码库 > canvasAnotote_resize.js
canvasAnotote_resize.js
/* * date : 2017-03-29 * purpose: canvas画板功能优化 * author: ii迷糊 */ var fontSize = 14;//字体大小 var _textarea_w = fontSize * 4;//默认文字输入域的宽度 var _textarea_h = fontSize * 2 + 2;//默认文字输入域的高度 var isload=true; var newindex=0; var _text = "";//记录最后输入的数据 var maxWidth = 548; //纯文字答案输出行宽限定 var lineHeight = 20; var lineX = 10; //文字输出时的起始横坐标 function setTareaAutoWH(id,maxW,maxH,e) { var width = 0, height = 0; var obj = document.getElementById(id); var text = obj.value; var top = parseInt(obj.style.top.replace("px", ""), 10); var left = parseInt(obj.style.left.replace("px", ""), 10); var _text_length = text.length; var lastChart = text.substring((_text_length-1),_text_length); var obj_height = $(‘#text‘).height(); if((obj.scrollHeight)<_textarea_h) { height = _textarea_h; }else{ height = obj_height; } if ((lastChart == "\n") || (lastChart == "\r")){// 根据输入的换行符,计算输入框textarea的高度 height = obj_height + fontSize + 2; } obj.style.height = height + "px"; // 宽度 if((_text_length*fontSize)<_textarea_w){ width = _textarea_w; }else{ //当坐标值+Textarea宽度大于最宽值时,Textarea宽度为可视区域最佳宽度 for(var i=0;i<_text_length;i++){ if(maxW && ((left + width + 5) > (maxW-10))){ width -= 5; break; } } width = (i * fontSize); } obj.style.width = width + "px"; obj.value = text; _text = text; } var type = 0;//1=框,2=圈,3=箭头,4=线,5=手写,6=文字 function setType(_type){ $(‘#text‘).mouseout(); type = _type; for(var i=1;i<=10;i++){ if(_type!=i){ $("#pzem"+i).removeClass("pz_baron"); } else{ $("#pzem"+i).attr("class","pz_baron"); } } } var actions = []; //动作集 //获取对象位置 function getpos(o) { //gets position of object o var bo, x, y, b; x = y = 0; if(document.getBoxObjectFor) { //moz bo = document.getBoxObjectFor(o); x = bo.x; y = bo.y; } else if (o.getBoundingClientRect) { //ie (??) bo = o.getBoundingClientRect(); x = bo.left; y = bo.top; } else { //opera, safari etc while(o && o.nodeName != ‘BODY‘) { x += o.offsetLeft; y += o.offsetTop; b = parseInt(document.defaultView.getComputedStyle(o,null).getPropertyValue(‘border-width‘)); if(b > 0) { x += b; y +=b; } o = o.offsetParent; } } return { x:x, y:y } } //画矩形 function drawRectangle(x,y,x2,y2,ctx,temp){ var w = x2- x; var h = y2-y; ctx.beginPath(); ctx.rect(x, y, w, h); ctx.stroke(); } //画椭圆 function drawEllipse(x1, y1, x2, y2, ctx, mod) { //bounding box. this maybe isn‘t the best idea? var dx = Math.abs(x2-x1); var dy = Math.abs(y2-y1); if(mod && !(dx==dy)) { //shift held down: constrain if(dx < dy) { x2 = x1+(((x2-x1)/dx)*dy); } else { y2 = y1+(((y2-y1)/dy)*dx); } } var KAPPA = 4 * ((Math.sqrt(2) -1) / 3); var rx = (x2-x1)/2; var ry = (y2-y1)/2; var cx = x1+rx; var cy = y1+ry; ctx.beginPath(); ctx.moveTo(cx, cy - ry); ctx.bezierCurveTo(cx + (KAPPA * rx), cy - ry, cx + rx, cy - (KAPPA * ry), cx + rx, cy); ctx.bezierCurveTo(cx + rx, cy + (KAPPA * ry), cx + (KAPPA * rx), cy + ry, cx, cy + ry); ctx.bezierCurveTo(cx - (KAPPA * rx), cy + ry, cx - rx, cy + (KAPPA * ry), cx - rx, cy); ctx.bezierCurveTo(cx - rx, cy - (KAPPA * ry), cx - (KAPPA * rx), cy - ry, cx, cy - ry); ctx.stroke(); } //画线 function drawLine(x1,y1,x2,y2,ctx,temp){ ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke(); } //画箭头线 function drawLineArrow(x1,y1,x2,y2,ctx,temp){ //画线 ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke(); //画箭头 ctx.save(); ctx.translate(x2,y2);//箭头原点 ctx.lineWidth=2; ctx.beginPath(); (y2-y1 >= 0) ? ctx.rotate(Math.PI-Math.atan((x2-x1)/(y2-y1))) : ctx.rotate(-Math.atan((x2-x1)/(y2-y1))); //旋转弧度 ctx.lineTo(-2,5); ctx.lineTo(0,2); ctx.lineTo(2,5); ctx.lineTo(0,0); ctx.closePath(); ctx.stroke(); ctx.fill(); ctx.restore(); ctx.closePath(); } //输入文字 function drawText(x1,y1,t_width,text,ctx,temp){ ctx.font = fontSize+"px Microsoft Yahei"; text = text.replace(‘*‘,‘*‘); text = text.replace(/\r\n/g,‘*‘); text = text.replace(/\r?\n/g,‘*‘); var colWidth = 0; var x,y; x = x1; y = y1; for(var i=0;i<text.length;i++){ colWidth += ctx.measureText(text[i]).width; if(colWidth > t_width || text[i].indexOf(‘*‘)!=-1){ y += fontSize; x = x1; if(colWidth > t_width){ i -= 1 ; } colWidth = 0; continue; } ctx.fillStyle = ‘#f00‘; ctx.fillText(text[i], x, y); x += ctx.measureText(text[i]).width; ctx.restore(); } } /** * loadImageURL - 加载图片 * * @param {Object} cx 上下文 * @param {String} url 图片地址 * @param {Number} x 坐标x * @param {Number} y 坐标y * @return {Void} */ function loadImageURL(cx, url, x, y) { var image = document.createElement("img"); image.addEventListener("load", function() { var offL= document.getElementById(‘_canvas‘).offsetLeft; var offT = document.getElementById(‘_canvas‘).offsetTop; var canW = document.getElementById(‘_canvas‘).width; var canH = document.getElementById(‘_canvas‘).height; var mouseX = parseFloat(x); var mouseY = parseFloat(y); var offL_canW = offL + canW; var offT_canH = offT + canH; if(mouseX < (offL + 5)){ mouseX = offL + 5; } if( mouseX> (offL_canW - 30)){ mouseX = offL_canW - 30; } if(mouseY < (offT - 5)){ mouseY = offT + 5; } if(mouseY > (offT_canH - 30)){ mouseY = offT_canH - 30; } cx.drawImage(image, mouseX, mouseY, 30, 30); }); image.src = url; } //清除画布 function clearCanvas(id,flag){ var canvas = document.getElementById(id); if(canvas){ var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); } if(flag){ actions = []; } } //后退动作 function backAction(objele){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); clearCanvas("canvas"); resetAnswerImg(objele); var _actions = []; var len = actions.length; for(var i=0;i<len-1;i++){ var action = actions[i]; draw(action.type,action.place,action.extend,ctx,false); _actions.push(action); } actions = _actions; } // _canvas 路径画布重绘 function resetAnswerImg(objele){ var obj = $(objele); var canvas1 = document.getElementById("canvas"); var ctx1 = canvas1.getContext("2d"); var canvas_height = canvas1.height; var draw_img_width = $(‘#pzDiv1‘).data(‘draw_img_width‘); var draw_img_height = $(‘#pzDiv1‘).data(‘draw_img_height‘); if(obj.html().indexOf(‘<img ‘)!=-1 || obj.html().indexOf(‘<IMG ‘)!=-1){ var img = new Image(); img.src = $(‘img‘,obj).attr(‘src‘); var newWh = ResizeImg([img.width,img.height],[canvas1.width,canvas1.height]); if (newWh.length == 2){ ctx1.drawImage(img, 0, 0, draw_img_width, draw_img_height); } else { ctx1.drawImage(img,0,0); } ctx1.beginPath(); }else{ var tempText = $(obj).find(‘.textanswer_o‘).html(); ctx1.font="14px Microsoft Yahei"; ctx1.fillStyle = ‘#000‘; if(tempText.indexOf(‘<p>‘)!=-1 && tempText.indexOf(‘</p>‘)!=-1){ var temp = tempText.replaceAll(‘<p>‘,‘‘).split(‘</p>‘); var line = 1, temp_length = temp.length; if(temp_length > 14){ canvas.height =(temp_length+2)*20 ; } for(var i=0;i<temp_length;i++){ var value = temp[i].replaceAll(‘ ‘,‘ ‘); value=http://www.mamicode.com/removeHTMLTag(value);""); var w = 0,start = 0; for(var j=0;j<strs.length;j++){ // 文字里的每一行 w += ctx1.measureText(strs[j]).width; if(w>(maxWidth-lineHeight)){ ctx1.fillText(value.substring(start,j),lineX,lineHeight*line); w = 0; start = j; line ++; } } ctx1.fillText(value.substring(start),lineX,20*line); line++; } }else{ ctx1.fillText(tempText,lineX,lineHeight); } ctx1.fillStyle= ‘#f00‘; } } //过滤html标签 function removeHTMLTag(str) { str = str.replace(/<\/?[^>]*>/g,‘‘); //去除HTML tag str = str.replace(/[ | ]*\n/g,‘\n‘); //去除行尾空白 // str=str.replace(/ /ig,‘‘);//去掉 return str; } //获取图片 function getImg(id){ var canvas = document.getElementById(id); if(canvas){ (document.getElementById(‘text‘)) ? canvas.parentNode.removeChild(document.getElementById(‘text‘)) : null; var imgId = id+"_showImg"; (document.getElementById(imgId)) ? canvas.parentNode.parentNode.removeChild(document.getElementById(imgId)) : null; var img = canvas.toDataURL("image/png"); var imgObj = document.createElement("img"); imgObj.id = imgId; imgObj.src = img; canvas.parentNode.parentNode.appendChild(imgObj); } } /* 绘画接口 type:绘画类型,1=矩形 2=椭圆 3=箭头 4=直线 5=手写 6=输入 place:坐标,[X开始坐标,Y开始坐标,X结束坐标,Y结束坐标];当类型为手写时是坐标集合 ctx:画板对象 temp: */ function draw(type,place,extend,ctx,temp){ var offL= document.getElementById(‘_canvas‘).offsetLeft; var offT = document.getElementById(‘_canvas‘).offsetTop; var canW = document.getElementById(‘_canvas‘).width; var canH = document.getElementById(‘_canvas‘).height; var offL_canW = offL + canW; var offT_canH = offT + canH; if( place[2] < offL){ //绘画区域限定 place[2] = offL; }else if(place[2] > offL_canW){ place[2] = offL_canW; } if(place[3] < offT){ place[3] = offT }else if(place[3] > offT_canH){ place[3] = offT_canH; } if(type==1){ drawRectangle(place[0],place[1],place[2], place[3],ctx,temp); } else if(type==2){ drawEllipse(place[0],place[1],place[2], place[3],ctx,false); } else if(type==3){ drawLineArrow(place[0],place[1],place[2], place[3],ctx,temp); } else if(type==4){ drawLine(place[0],place[1],place[2], place[3],ctx,temp); } else if(type==5){ if(place.length>0){ ctx.beginPath(); ctx.moveTo(place[0][0],place[0][1]); for(var i = 0;i<place.length;i++){ var p = place[i]; ctx.quadraticCurveTo(p[0],p[1],p[2], p[3]); } ctx.stroke(); } } else if(type==6){ if(extend){ drawText(place[0],place[1],extend.width,extend.text,ctx,temp); } } else if (type === 7) { loadImageURL(ctx,‘/images/correct.png‘, place[0],place[1]) } else if (type === 8) { loadImageURL(ctx,‘/images/error.png‘, place[0],place[1]) } else if (type === 9) { loadImageURL(ctx,‘/images/A_plus.png‘, place[0],place[1]) } else if (type === 10) { loadImageURL(ctx,‘/images/A_min.png‘, place[0],place[1]) } } //创建绘画面板对象 canvasAnnotate = function(canvasId,obj){ var version=navigator.userAgent; if(version.indexOf("MSIE")!=-1){ var trim_Version=version.split(";")[1].replace(/[ ]/g,""); //获取pc系统信息navigator.userAgent.split(";")[1].replace(/[ ]/g,"") trim_Version = trim_Version.replace("MSIE",""); trim_Version = parseInt(trim_Version,10); if(trim_Version<9) { return; } } var $indexobj = ‘#textarea‘+$(obj).data(‘subfix‘); this.btnDiv = ‘‘; this.btnDiv+=‘<div class="pz_bar pz_100 f14">‘; this.btnDiv +=‘<a href="javascript:void(0);" onClick="setType(1);"><span id="pzem1"><em class="pz_icon1"></em>画框</span></a>‘; this.btnDiv +=‘<a href="javascript:void(0);" onClick="setType(2);"><span id="pzem2"><em class="pz_icon2"></em>画圆</span></a>‘; this.btnDiv +=‘<a href="javascript:void(0);" onClick="setType(3);"><span id="pzem3"><em class="pz_icon3"></em>箭头</span></a>‘; this.btnDiv +=‘<a href="javascript:void(0);" onClick="setType(4);"><span id="pzem4"><em class="pz_icon4"></em>画线</span></a>‘; this.btnDiv +=‘<a href="javascript:void(0);" onClick="setType(5);"><span id="pzem5" class="pz_baron"><em class="pz_icon5"></em>画笔</span></a>‘; this.btnDiv +=‘<a href="javascript:void(0);" onClick="setType(6);"><span id="pzem6"><em class="pz_icon6"></em>输入</span></a>‘; this.btnDiv +=‘<a href="javascript:void(0);" onClick="backAction(\‘‘+$indexobj+‘\‘);"><span><em class="pz_icon7"></em>撤销</span></a>‘; this.btnDiv +=‘<a href="javascript:void(0);" onClick="clearCanvas(\‘canvas\‘,true);resetAnswerImg(\‘‘+$indexobj+‘\‘);"><span><em class="pz_icon8"></em>清屏</span></a>‘; this.btnDiv += ‘<a href="javascript:void(0);" onClick="setType(7);"><span id="pzem7"><em class="pz_icon9"></em>正确</span></a>‘; this.btnDiv += ‘<a href="javascript:void(0);" onClick="setType(8);"><span id="pzem8"><em class="pz_icon10"></em>错误</span></a>‘; this.btnDiv += ‘<a href="javascript:void(0);" onClick="setType(9);"><span id="pzem9"><em class="pz_icon12"></em>A+</span></a>‘; this.btnDiv += ‘<a href="javascript:void(0);" onClick="setType(10);"><span id="pzem10"><em class="pz_icon13"></em>A-</span></a>‘; this.btnDiv +=‘</div>‘; this.strokeStyle = "red";//画笔颜色 this._strokeStyle = "blue";//临时画笔颜色 var canvas = document.getElementById(canvasId); var ctx = canvas.getContext("2d"); ctx.strokeStyle = this.strokeStyle; if($(‘#annotateDiv‘).html() == undefined){ var annotateDiv = document.createElement(‘div‘); annotateDiv.id ="annotateDiv"; canvas.parentNode.appendChild(annotateDiv); } if($(‘#canvasDiv2‘).html() == undefined){ var canvasDiv = document.createElement(‘div‘); canvasDiv.id = "canvasDiv2"; canvasDiv.style.position = "relative"; canvasDiv.appendChild(canvas); $(‘#annotateDiv‘).append(canvasDiv); } if($(‘#operatingDiv‘).html() == undefined){ var operatingDiv = document.createElement(‘div‘); operatingDiv.id = "operatingDiv"; operatingDiv.innerHTML = this.btnDiv; $(‘#annotateDiv‘).append(operatingDiv); } //创建临时画布,用于动态显示绘画状态 var canvastemp = document.createElement(‘canvas‘); canvastemp.id = "_"+canvasId; canvastemp.width = $( "#pzDiv1").width(); canvastemp.height = $(‘#canvas‘).height(); canvastemp.style.position = "absolute"; canvastemp.style.top = "0px"; canvastemp.style.left = "0px"; canvastemp.setAttribute(‘oncontextmenu‘, ‘return false‘); $(‘#canvasDiv2‘).append(canvastemp); var _ctx = canvastemp.getContext("2d"); _ctx.strokeStyle = this._strokeStyle; var _x,_y; var x_start,y_start,x_end,y_end; var start = false; var pos = getpos(canvastemp); var place = []; $(‘#text‘).live(‘mouseout‘,function(){ $(‘#_canvas‘).mousedown(); }); canvastemp.onmousedown = function(e){ place = []; pos = getpos(canvastemp);//update 20130911 if(document.getElementById(‘text‘)){ if(document.getElementById(‘text‘).value.replace(" ","")!=""){ x_start += 0; y_start += fontSize; var text = document.getElementById(‘text‘).value; var t_width = document.getElementById(‘text‘).scrollWidth; place = [x_start,y_start]; var extend = {"width":t_width,"text":text}; draw(6,place,extend,ctx,false); var action = {"type":type,"place":place,"extend":{"width":t_width,"text":text}}; actions.push(action); } this.parentNode.removeChild(document.getElementById(‘text‘)); } if(e.clientX == undefined){ return false; } x_start = _x = e.clientX-pos.x+1; y_start = _y = e.clientY-pos.y+1; start = true; if(type==6){ if((x_start + _textarea_w) > canvastemp.scrollWidth){ x_start = canvastemp.scrollWidth - _textarea_w - 5; } if((y_start + _textarea_h) > canvastemp.scrollHeight){ y_start = canvastemp.scrollHeight - _textarea_h - 5 ; } //创建textarea var textarea = document.createElement(‘textarea‘); var t_maxWidth = canvastemp.scrollWidth-x_start - 10; var t_maxHeight = canvastemp.scrollHeight-y_start - 10; textarea.id = "text"; textarea.style.position = ‘absolute‘; textarea.style.top = (y_start) + "px"; textarea.style.left = (x_start) + "px"; textarea.style.width = _textarea_w +‘px‘; textarea.style.maxWidth = t_maxWidth + ‘px‘; textarea.style.height = _textarea_h +‘px‘; textarea.style.maxHeight = t_maxHeight + ‘px‘; textarea.style.background = ‘rgba(0, 0, 0, 0)‘; textarea.style.border = ‘1px dashed #f00‘; textarea.style.wordWrap = ‘break-word‘; textarea.style.color = ‘red‘; textarea.style.fontSize = ‘14px‘; textarea.setAttribute(‘oninput‘, ‘setTareaAutoWH("text",‘+canvastemp.scrollWidth+‘,‘+canvastemp.scrollHeight+‘)‘); textarea.setAttribute(‘onpropertychange‘, ‘setTareaAutoWH("text",‘+canvastemp.scrollWidth+‘,‘+canvastemp.scrollHeight+‘)‘); this.parentNode.appendChild(textarea); setTimeout("document.getElementById(‘text‘).focus();",100); } }; canvastemp.onmousemove = function(e){ clearCanvas(canvastemp.id); if(start && type!=0){ pos = getpos(canvastemp);//update 20130911 x_end = _x = e.clientX-pos.x+1; y_end = _y = e.clientY-pos.y+1; if(type==3){ if( ((x_start - x_end)<2 && (x_start - x_end)>-2) || ((y_start - y_end)<2 && (y_start - y_end)>-2) ){ return; } } if(type!=5){ place = [x_start, y_start, x_end, y_end]; } draw(type,place,null,_ctx,false); if(type==5){ var move = [x_start, y_start, x_end, y_end]; place.push(move); x_start = x_end; y_start = y_end; } } }; canvastemp.onmouseup = function(e){ clearCanvas(canvastemp.id); if(start && type!=0){ pos = getpos(canvastemp);//update 20130911 x_end = _x = e.clientX-pos.x+1; y_end = _y = e.clientY-pos.y+1; if(type==3){ if( ((x_start - x_end)<2 && (x_start - x_end)>-2) || ((y_start - y_end)<2 && (y_start - y_end)>-2) ){ return; } } if(type!=6){ (document.getElementById(‘text‘)) ? this.parentNode.removeChild(document.getElementById(‘text‘)) : ""; } if(type!=5){ place = [x_start, y_start, x_end, y_end]; } draw(type,place,null,ctx,false); if(type!=6){ //记录动作 var action = {"type":type,"place":place,"y2":y_end}; actions.push(action); } place = []; } start = false; }; window.onmouseup = canvastemp.onmouseup; window.onmousemove = canvastemp.onmousemove; //获取图片内容 this.getImg = function(){ if(canvas){ return canvas.toDataURL("image/png"); } return null; }; //设置按钮样式 this.setBtnDiv = function(divHtml){ // operatingDiv.innerHTML = divHtml; $(‘#operatingDiv‘).html(divHtml); return null; } };
本文出自 “琉璃岁月” 博客,谢绝转载!
canvasAnotote_resize.js
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。