首页 > 代码库 > 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(‘&nbsp;‘,‘ ‘);
            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(/&nbsp;/ig,‘‘);//去掉&nbsp;
   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