使用原生JavaScript的Canvas實現拖拽式圖形繪製，支持畫筆、線條、箭頭、三角形、矩形、平行四邊形、梯形以及多邊形和圓形，不依賴任何庫和插件，有演示demo

時間  2019-12-06
標籤 使用 原生 javascript canvas 實現 圖形 繪製 支持 畫筆 線條 箭頭 三角形 矩形 平行四邊形 梯形 以及 多邊形 圓形 依賴 任何 插件 演示 demo 欄目 JavaScript 简体版
原文   原文鏈接

前言

須要用到圖形繪製，沒有找到完整的圖形繪製實現，因此本身實現了一個 - -javascript

1、實現的功能

一、基於oop思想構建，支持座標點、線條（由座標點組成，包含方向）、多邊形（由多個座標點組成）、圓形（包含圓心座標點和半徑）等實體html

二、原生JavaScript實現，不依賴任何第三方js庫和插件java

三、多圖形繪製（支持畫筆、線條、箭頭、三角形、矩形、平行四邊形、梯形以及多邊形和圓形繪製）canvas

四、拖拽式繪製（鼠標移動過程當中不斷進行canvas重繪）數組

五、圖片繪製（做爲背景圖片時重繪會發生閃爍現象，暫時有點問題，後面繼續完善）瀏覽器

五、清空繪製功能ssh

六、新版本優化繪製性能（使用共享座標變量數組，減小了大量的對象建立操做）異步

七、新版本支持箭頭繪製功能ide

2、完整實現代碼

 
[javascript]  view plain  copy
 
  1. DrawingTools =(function(){  
  2.     //公共方法  
  3.     var getDom=function(id){return document.getElementById(id)};  
  4.     var isNull=function(s){return s==undefined||typeof(s)=='undefined'||s==null||s=='null'||s==''||s.length<1};  
  5.     var hideDefRM=function(){document.oncontextmenu=function(){return false}};//屏蔽瀏覽器默認鼠標事件  
  6.     /**繪圖容器*/  
  7.     var cbtCanvas;  
  8.     /**繪圖對象*/  
  9.     var cxt;  
  10.     /**繪製的圖形列表*/  
  11.     var shapes=new Array();  
  12.   
  13.     var graphkind={'cursor':0,'pen':1,'line':2,'trian':3,'rect':4,'poly':5,'circle':6,'arrow':21,'parallel':41,'trapezoid':42};  
  14.     //背景圖片繪製配置  
  15.     var bgPictureConfig={  
  16.             pic:null,//背景圖片地址或路徑  
  17.             repaint:true,//是否做爲永久背景圖，每次清除時會進行重繪  
  18.     };  
  19.     //加載並繪製圖片(src:圖片路徑或地址),默認重繪背景圖  
  20.     var loadPicture=function(src){  
  21.         if(isNull(bgPictureConfig.repaint)||bgPictureConfig.repaint){bgPictureConfig.pic=src}  
  22.         var img = new Image();  
  23.         img.onload = function(){cxt.drawImage(img,0,0)}  
  24.         img.src =src;  
  25.     }  
  26.       
  27.     //繪圖基礎配置  
  28.     var paintConfig={lineWidth:1,//線條寬度，默認1  
  29.                 strokeStyle:'red',//畫筆顏色，默認紅色  
  30.                 fillStyle:'red',//填充色  
  31.                 lineJoin:"round",//線條交角樣式，默認圓角  
  32.                 lineCap:"round",//線條結束樣式，默認圓角  
  33.         };  
  34.     //從新載入繪製樣式  
  35.     var resetStyle=function(){  
  36.         cxt.strokeStyle=paintConfig.strokeStyle;  
  37.         cxt.lineWidth=paintConfig.lineWidth;  
  38.         cxt.lineJoin=paintConfig.lineJoin;  
  39.         cxt.lineCap=paintConfig.lineCap;  
  40.         cxt.fillStyle=paintConfig.fillStyle;  
  41.     }  
  42.       
  43.     //鼠標圖形  
  44.     var cursors=['crosshair','pointer'];  
  45.     /** 切換鼠標樣式*/  
  46.     var switchCorser=function(b){  
  47.         cbtCanvas.style.cursor=((isNull(b)?isDrawing():b)?cursors[0]:cursors[1]);  
  48.     }  
  49.     //操做控制變量組  
  50.     var ctrlConfig={  
  51.             kind:0,//當前繪畫分類  
  52.             isPainting:false,//是否開始繪製  
  53.             startPoint:null,//起始點  
  54.             cuGraph:null,//當前繪製的圖像  
  55.             cuPoint:null,//當前臨時座標點，肯定一個座標點後從新構建  
  56.             cuAngle:null,//當前箭頭角度  
  57.             vertex:[],//座標點  
  58.     }  
  59.     /**獲取當前座標點*/  
  60.     var getCuPoint=function(i){  
  61.         return ctrlConfig.cuPoint[i];  
  62.     }  
  63.     /**設置當前座標點*/  
  64.     var setCuPoint=function(p,i){  
  65.         return ctrlConfig.cuPoint[i]=p;  
  66.     }  
  67.     /**設置當前臨時座標點值*/  
  68.     var setCuPointXY=function(x,y,i){  
  69.         if(isNull(ctrlConfig.cuPoint)){  
  70.             var arr=new Array();  
  71.             arr[i]=new Point(x,y);  
  72.             ctrlConfig.cuPoint=arr;  
  73.         }else if(isNull(ctrlConfig.cuPoint[i])){  
  74.             setCuPoint(new Point(x,y),i);  
  75.         }else{  
  76.             ctrlConfig.cuPoint[i].setXY(x,y);  
  77.         }  
  78.         return getCuPoint(i);  
  79.     }  
  80.       
  81.     /**是否正在繪製*/  
  82.     var isDrawing=function (){  
  83.         return ctrlConfig.isPainting;  
  84.     }  
  85.     /**開始繪製狀態*/  
  86.     var beginDrawing=function(){  
  87.         ctrlConfig.isPainting=true;  
  88.     }  
  89.     /**結束繪製狀態*/  
  90.     var stopDrawing=function(){  
  91.         ctrlConfig.isPainting=false;  
  92.     }  
  93.     /**是否有開始座標點*/  
  94.     var hasStartPoint=function(){  
  95.         return !isNull(ctrlConfig.startPoint);  
  96.     }  
  97.     /**設置當前繪製的圖形*/  
  98.     var setCuGraph=function(g){  
  99.          ctrlConfig.cuGraph=g;  
  100.     }  
  101.     /**獲取當前繪製的圖形*/  
  102.     var getCuGraph=function(){  
  103.         return ctrlConfig.cuGraph;  
  104.     }  
  105.     /**設置開始座標點（線條的起始點，三角形的頂點，圓形的圓心，四邊形的左上角或右下角，多邊形的起始點）*/  
  106.     var setStartPoint=function(p){  
  107.         ctrlConfig.startPoint=p;  
  108.     }  
  109.     /**獲取開始座標點*/  
  110.     var getStartPoint=function(){  
  111.         return ctrlConfig.startPoint;  
  112.     }  
  113.       
  114.     /**清空所有*/  
  115.     var clearAll=function(){  
  116.         cxt.clearRect(0,0,cbtCanvas.width,cbtCanvas.height);  
  117.     }  
  118.     /**重繪*/  
  119.     var repaint=function(){  
  120.         clearAll();  
  121.         /* 
  122.         if(bgPictureConfig.repaint){ 
  123.             loadPicture(bgPictureConfig.pic); 
  124.         }*/  
  125.     }  
  126.       
  127.     /**點（座標,繪圖的基本要素,包含x,y座標）*/  
  128.     var Point=(function(x1,y1){  
  129.         var x=x1,y=y1;  
  130.         return{  
  131.             set:function(p){  
  132.                 x=p.x,y=p.y;  
  133.             },  
  134.             setXY:function(x2,y2){  
  135.                 x=x2;y=y2;  
  136.             },  
  137.             setX:function(x3){  
  138.                 x=x3;  
  139.             },  
  140.             setY:function(y3){  
  141.                 y=y3;  
  142.             },  
  143.             getX:function(){  
  144.                 return x;  
  145.             },  
  146.             getY:function(){  
  147.                 return y;  
  148.             }  
  149.         }  
  150.     });  
  151.     /**多角形（三角形、矩形、多邊形），由多個點組成*/  
  152.     var Poly=(function(ps1){  
  153.         var ps=isNull(ps1)?new Array():ps1;  
  154.         var size=ps.length;  
  155.         return{  
  156.             set:function(ps2){  
  157.                 ps=ps2;  
  158.             },  
  159.             getSize:function(){  
  160.                 return size;  
  161.             },  
  162.             setPoint:function(p,i){  
  163.                 if(isNull(p)&&isNaN(i)){  
  164.                     return;  
  165.                 }  
  166.                 ps[i]=p;  
  167.             },  
  168.             setStart:function(p1){  
  169.                 if(isNull(ps)){  
  170.                     ps=new Array();  
  171.                     return ps.push(p1);  
  172.                 }else{  
  173.                     ps[0]=p1;  
  174.                 }  
  175.             },  
  176.             add:function(p){  
  177.                 if(isNull(ps)){  
  178.                     ps=new Array();  
  179.                 }  
  180.                 return ps.push(p);  
  181.             },  
  182.             pop:function(){  
  183.                 if(isNull(ps)){  
  184.                     return;  
  185.                 }  
  186.                 return ps.pop();  
  187.             },  
  188.             shift:function(){  
  189.                 if(isNull(ps)){  
  190.                     return;  
  191.                 }  
  192.                 return ps.shift;  
  193.             },  
  194.             get:function(){  
  195.                 if(isNull(ps)){  
  196.                     return null;  
  197.                 }  
  198.                 return ps;  
  199.             },  
  200.             draw:function(){  
  201.                 cxt.beginPath();  
  202.                 for(i in ps){  
  203.                     if(i==0){  
  204.                         cxt.moveTo(ps[i].getX(),ps[i].getY());  
  205.                     }else{  
  206.                         cxt.lineTo(ps[i].getX(),ps[i].getY());  
  207.                     }  
  208.                 }  
  209.                 cxt.closePath();  
  210.                 cxt.stroke();  
  211.             }  
  212.         }  
  213.     });  
  214.     /*線條(由兩個點組成，包含方向)*/  
  215.     var Line=(function(p1,p2,al){  
  216.         var start=p1,end=p2,angle=al;  
  217.           
  218.         var drawLine=function(){  
  219.             cxt.beginPath();  
  220.             cxt.moveTo(p1.getX(),p1.getY());  
  221.             cxt.lineTo(p2.getX(),p2.getY());  
  222.             cxt.stroke();  
  223.         }  
  224.         //畫箭頭  
  225.         var drawArrow=function() {  
  226.             var vertex =ctrlConfig.vertex;  
  227.             var x1=p1.getX(),y1=p1.getY(),x2=p2.getX(),y2=p2.getY();  
  228.             var el=50,al=15;        
  229.             //計算箭頭底邊兩個點（開始點，結束點，兩邊角度，箭頭角度）  
  230.             vertex[0] = x1,vertex[1] = y1, vertex[6] = x2,vertex[7] = y2;  
  231.             //計算起點座標與X軸之間的夾角角度值  
  232.             var angle = Math.atan2(y2 - y1, x2 - x1) / Math.PI * 180;  
  233.             var x = x2 - x1,y = y2 - y1,length = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));  
  234.             if (length < 250) {  
  235.                 el/=2,al/2;  
  236.             }else if(length<500){  
  237.                 el*=length/500,al*=length/500;  
  238.             }  
  239.             vertex[8] = x2 - el * Math.cos(Math.PI / 180 * (angle + al));  
  240.             vertex[9] = y2- el * Math.sin(Math.PI / 180 * (angle + al));  
  241.             vertex[4] = x2- el* Math.cos(Math.PI / 180 * (angle - al));  
  242.             vertex[5] = y2 - el * Math.sin(Math.PI / 180 * (angle - al));  
  243.             //獲取另外兩個頂點座標  
  244.             x=(vertex[4]+vertex[8])/2,y=(vertex[5]+vertex[9])/2;  
  245.             vertex[2] = (vertex[4] + x) / 2;  
  246.             vertex[3] = (vertex[5] + y) / 2;  
  247.             vertex[10] = (vertex[8] +x) / 2;  
  248.             vertex[11] = (vertex[9] +y) / 2;  
  249.             //計算完成,開始繪製  
  250.             cxt.beginPath();  
  251.             cxt.moveTo(vertex[0], vertex[1]);  
  252.             cxt.lineTo(vertex[2], vertex[3]);  
  253.             cxt.lineTo(vertex[4], vertex[5]);  
  254.             cxt.lineTo(vertex[6], vertex[7]);  
  255.             cxt.lineTo(vertex[8], vertex[9]);  
  256.             cxt.lineTo(vertex[10], vertex[11]);  
  257.             cxt.closePath();  
  258.             cxt.fill();  
  259.             cxt.stroke();  
  260.         }  
  261.         return{  
  262.             setStart:function(s){  
  263.                 start=s;  
  264.             },  
  265.             setEnd:function(e){  
  266.                 end=e;  
  267.             },  
  268.             getStart:function(){  
  269.                 return start;  
  270.             },  
  271.             getEnd:function(){  
  272.                 return end;   
  273.             },  
  274.             draw:function(){  
  275.                 if(angle){  
  276.                     drawArrow();  
  277.                 }else{  
  278.                     drawLine();  
  279.                 }  
  280.             }  
  281.         }  
  282.     });  
  283.     /**圓形(包含圓心點和半徑)*/  
  284.     var Circle=(function(arr){  
  285.         //包含起始點（圓心）和結束點,以及圓半徑  
  286.         var startPoint=arr.start,endPoint=arr.end,radius=arr.radius;  
  287.         /*繪製圓*/  
  288.         var drawCircle=function(){  
  289.             cxt.beginPath();  
  290.             var x=startPoint.getX();  
  291.             var y=startPoint.getY();  
  292.             if(isNull(radius)){  
  293.                 radius=calculateRadius(startPoint,endPoint);  
  294.             }  
  295.             //x,y,半徑,開始點,結束點,順時針/逆時針  
  296.             cxt.arc(x,y,radius,0,Math.PI*2,false); // 繪製圓  
  297.             cxt.stroke();  
  298.         }  
  299.         //計算圓半徑  
  300.         var calculateRadius=function(p1,p2){  
  301.             var width=p2.getX()-p1.getX();  
  302.             var height=p2.getY()-p1.getY();  
  303.             //若是是負數  
  304.             if(width<0||height<0){  
  305.                 width=Math.abs(width);  
  306.             }  
  307.             //計算兩點距離=平方根(width^2+height^2)  
  308.             c=Math.sqrt(Math.pow(width,2)+Math.pow(height,2));  
  309.             return c;  
  310.         }  
  311.         return{  
  312.             set:function(params){  
  313.                 startPoint=params.start;  
  314.                 endPoint=params.end;  
  315.                 radius=params.radius;  
  316.             },  
  317.             setPoint:function(p1){  
  318.                 p=p1;  
  319.             },  
  320.             getPoint:function(){  
  321.                 return p;  
  322.             },  
  323.             setRadius:function(r1){  
  324.                 radius=r1;  
  325.             },  
  326.             getRadius:function(){  
  327.                 return radius;  
  328.             },  
  329.             calcRadius:calculateRadius,  
  330.             //繪製  
  331.             draw:drawCircle,  
  332.         }  
  333.     });  
  334.     /**繪製線條工具方法*/  
  335.     var drawLine=function(p){  
  336.         cxt.beginPath();  
  337.         cxt.moveTo(startPosition.getX(),startPosition.getY());  
  338.         cxt.lineTo(p.getX(),p.getY());  
  339.         cxt.stroke();  
  340.     }  
  341.   
  342.     /**繪製三角形工具方法*/  
  343.     var drawTrian=function(ps){  
  344.         cxt.beginPath();  
  345.         var a=ps.get();  
  346.         cxt.moveTo(a[0].getX(),a[0].getY());  
  347.         cxt.lineTo(a[1].getX(),a[1].getY());  
  348.         cxt.lineTo(a[2].getX(),a[2].getY());  
  349.         cxt.closePath();  
  350.         cxt.stroke();  
  351.     }  
  352.       
  353.     /**繪製矩形工具方法*/  
  354.     var drawRect=function(p2){  
  355.             var p=getStartPoint();  
  356.             var width=p.getX()-p2.getX();  
  357.             var height=p.getY()-p2.getY();  
  358.             cxt.beginPath();  
  359.             cxt.strokeRect(x,y,width,height);//繪製矩形  
  360.     }  
  361.       
  362.     /*繪製多邊形工具方法*/  
  363.     var drawpolygon=function(ps){  
  364.         if(ps.length>1){//保證只有兩個座標點纔是矩形  
  365.             cxt.beginPath();  
  366.             var p=ctrlConfig.startPoint;  
  367.             var x=p.getX();  
  368.             var y=p.getY();  
  369.             cxt.moveTo(x,y);  
  370.             for(p1 in ps){  
  371.                 cxt.lineTo(p1.getX(),p1.getY());  
  372.             }  
  373.             cxt.stroke();  
  374.         }  
  375.     }  
  376.       
  377.     /*繪製圓角矩形工具方法*/  
  378.     var  drawRoundedRect=function(x,y,width,height,radius){  
  379.         cxt.beginPath();  
  380.         cxt.moveTo(x,y+radius);  
  381.         cxt.lineTo(x,y+height-radius);  
  382.         cxt.quadraticCurveTo(x,y+height,x+radius,y+height);  
  383.         cxt.lineTo(x+width-radius,y+height);  
  384.         cxt.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);  
  385.         cxt.lineTo(x+width,y+radius);  
  386.         cxt.quadraticCurveTo(x+width,y,x+width-radius,y);  
  387.         cxt.lineTo(x+radius,y);  
  388.         cxt.quadraticCurveTo(x,y,x,y+radius);  
  389.         cxt.stroke();  
  390.     }  
  391.     /*繪製圓工具方法*/  
  392.     var drawCircle=function(c){  
  393.         var p=c.getPoint();//座標點  
  394.         var x=p.getX();  
  395.         var y=p.getY();  
  396.         var r=c.getRadius();  
  397.         cxt.beginPath();  
  398.         //x,y,半徑,開始點,結束點,順時針/逆時針  
  399.         cxt.arc(x,y,r,0,Math.PI*2,false); // 繪製圓  
  400.         cxt.stroke();  
  401.     }  
  402.     //計算圓半徑工具方法  
  403.     var calculateRadius=function(p1,p2){  
  404.         var width=p2.getX()-p1.getX();  
  405.         var height=p2.getY()-p1.getY();  
  406.         //若是是負數  
  407.         if(width<0||height<0){  
  408.             width=Math.abs(width);  
  409.         }  
  410.         //計算兩點距離=平方根(width^2+height^2)  
  411.         c=Math.sqrt(Math.pow(width,2)+Math.pow(height,2));  
  412.         return c;  
  413.     }  
  414.       
  415.     //鼠標按鍵點擊（首次點擊肯定開始座標點，拖動鼠標不斷進行圖形重繪）  
  416.     var mouseDown = function(e){  
  417.         var btnNum = e.button;  
  418.         if(btnNum==0){  
  419.             console.log("選擇："+ctrlConfig.kind);  
  420.             //設置起始點  
  421.             switch(ctrlConfig.kind){  
  422.                 case graphkind.pen://畫筆(不鬆開鼠標按鍵一直畫)  
  423.                     beginDrawing();//開始繪製  
  424.                     cxt.beginPath();  
  425.                     cxt.moveTo(e.offsetX,e.offsetY);  
  426.                     break;  
  427.                 case graphkind.poly://多邊形  
  428.                     var p=new Point(e.offsetX,e.offsetY);  
  429.                     if(isDrawing()){  
  430.                         getCuGraph().add(p);//添加到  
  431.                     }else{//第一次肯定開始座標  
  432.                         beginDrawing();//開始繪製  
  433.                         setStartPoint(p);  
  434.                         var poly=new Poly();  
  435.                         poly.add(p);  
  436.                         setCuGraph(poly);//設置當前繪製圖形  
  437.                     }  
  438.                     break;  
  439.                 case graphkind.line://線條  
  440.                 case graphkind.arrow://方向  
  441.                 case graphkind.trian://三角形  
  442.                 case graphkind.rect://矩形  
  443.                 case graphkind.parallel://平行四邊形  
  444.                 case graphkind.trapezoid://梯形  
  445.                     beginDrawing();//開始繪製  
  446.                     var p=new Point(e.offsetX,e.offsetY);  
  447.                     setStartPoint(p);  
  448.                     var poly=new Poly();  
  449.                     poly.add(p);  
  450.                     setCuGraph(poly);//設置當前繪製圖形  
  451.                     break;  
  452.                 case graphkind.circle://圓  
  453.                     console.log("肯定圖形繪製開始座標點："+e.offsetX+","+e.offsetY);//點擊肯定圖形的開始座標點  
  454.                     beginDrawing();//開始繪製  
  455.                     var p=new Point(e.offsetX,e.offsetY);  
  456.                     setStartPoint(p);  
  457.                     var circle= new Circle({'start':p});  
  458.                     setCuGraph(circle);  
  459.                     break;  
  460.                  case ctrlConfig.cursor: //手型鼠標  
  461.                  default://默認是手型鼠標，不容許繪製  
  462.             }  
  463.         }else if(btnNum==2){  
  464.             console.log("右鍵因爲結束多邊形繪製");  
  465.             if(isDrawing()){  
  466.                 if(ctrlConfig.kind==graphkind.poly){  
  467.                     repaint();  
  468.                     getCuGraph().draw();  
  469.                     stopDrawing();//結束繪製  
  470.                 }  
  471.             }  
  472.         }  
  473.         hideDefRM();//屏蔽瀏覽器默認事件  
  474.     }  
  475.     //鼠標移動（拖動，根據鼠標移動的位置不斷重繪圖形）  
  476.     var mouseMove = function(e){  
  477.         if(isDrawing()&&hasStartPoint()){//檢查是否開始繪製，檢查是否有開始座標點  
  478.             //畫筆不須要重繪  
  479.             if(ctrlConfig.kind>1){  
  480.                 repaint();//重繪  
  481.             }  
  482.             var p=setCuPointXY(e.offsetX,e.offsetY,0);//設置共享的臨時座標點，用於防止重複建立對象  
  483.             switch(ctrlConfig.kind){  
  484.              case graphkind.pen://畫筆(一直畫)  
  485.                 cxt.lineTo(e.offsetX,e.offsetY);  
  486.                 cxt.stroke();  
  487.                 break;  
  488.              case graphkind.poly://多邊形  
  489.                 var poly=getCuGraph(poly);  
  490.                 var size=poly.getSize();  
  491.                 poly.setPoint(p,(size-1));  
  492.                 poly.draw();  
  493.                 break;  
  494.              case graphkind.line://線條  
  495.                 var line=new Line(getStartPoint(),p,false);  
  496.                 ctrlConfig.cuGraph=line;  
  497.                 line.draw();  
  498.                 break;  
  499.              case graphkind.arrow://方向  
  500.                 var line=new Line(getStartPoint(),p,true);  
  501.                 ctrlConfig.cuGraph=line;  
  502.                 line.draw();  
  503.                 break;  
  504.              case graphkind.trian://三角形  
  505.                 var lu=getStartPoint();  
  506.                 var x2=p.getX();  
  507.                 var x1=lu.getX();  
  508.                 //三角形左邊的點座標計算方法:(x1-(x2-x1),y2)  
  509.                 var x3=x1-(x2-x1);  
  510.                 var l=setCuPointXY(x3,p.getY(),1);//設置共享的臨時座標點，用於防止重複建立對象  
  511.                 var poly=getCuGraph();//獲取當前圖形  
  512.                 poly.set([lu,p,l]);  
  513.                 poly.draw();//即時繪製  
  514.                 break;  
  515.              case graphkind.parallel://平行四邊形  
  516.                 var lu=getStartPoint();  
  517.                 var x3=p.getX();  
  518.                 var x1=lu.getX();  
  519.                 //平行四邊形兩個未知座標點計算方法:(x1-(x3-x1),y3),(x1+(x3-x1),y1)  
  520.                 var x2=x3+(x3-x1);  
  521.                 var x4=x1-(x3-x1);  
  522.                 var ld=setCuPointXY(x2,lu.getY(),1);//設置共享的臨時座標點，用於防止重複建立對象  
  523.                 var ru=setCuPointXY(x4,p.getY(),2);//設置共享的臨時座標點，用於防止重複建立對象  
  524.                 var poly=getCuGraph();//獲取當前圖形  
  525.                 poly.set([lu,ru,p,ld]);  
  526.                 poly.draw();//即時繪製  
  527.                 break;  
  528.              case graphkind.trapezoid://梯形  
  529.                 var lu=getStartPoint();  
  530.                 var x3=p.getX();  
  531.                 var x1=lu.getX();  
  532.                 //梯形兩個未知座標點計算方法:(x3-(x3-x1)/2,y1),(x1-(x3-x1)/2,y3)  
  533.                 var x2=x3-(x3-x1)/2;  
  534.                 var x4=x1-(x3-x1)/2;  
  535.                 var ld=setCuPointXY(x2,lu.getY(),1);  
  536.                 var ru=setCuPointXY(x4,p.getY(),2);  
  537.                 var poly=getCuGraph();  
  538.                 poly.set([lu,ru,p,ld]);  
  539.                 poly.draw();  
  540.                 break;  
  541.              case graphkind.rect://矩形  
  542.                 var lu=getStartPoint();  
  543.                 //矩形右上角和左上角座標計算方法  
  544.                 var ld=setCuPointXY(lu.getX(),p.getY(),1);  
  545.                 var ru=setCuPointXY(p.getX(),lu.getY(),2);  
  546.                 var poly=getCuGraph();  
  547.                 poly.set([lu,ru,p,ld]);  
  548.                 poly.draw();  
  549.                 break;  
  550.              case graphkind.circle://圓  
  551.                 var circle=getCuGraph();//獲取當前圖形  
  552.                 circle.set({'start':getStartPoint(),'end':p});  
  553.                 circle.draw();//即時繪製  
  554.                 break;  
  555.             }  
  556.       }  
  557.     }  
  558.     //鼠標按鍵鬆開  
  559.         var mouseUp = function(e){  
  560.             if(isDrawing()){  
  561.                 //console.log("鬆開鼠標按鍵:"+e.offsetX+","+e.offsetY);  
  562.                 //畫筆不須要重繪  
  563.                 if(ctrlConfig.kind>1){  
  564.                     repaint();  
  565.                     getCuGraph().draw();  
  566.                 }  
  567.                 if(ctrlConfig.kind!=graphkind.poly){//多邊形繪製鼠標按鍵鬆開不結束繪製，多邊形只有右鍵點擊才能結束繪製  
  568.                     stopDrawing();//結束繪製  
  569.                 }  
  570.             }  
  571.         }    
  572.           
  573.     //鼠標移出  
  574.         var mouseOut = function(e){  
  575.             console.log("鼠標移出繪製區域"+e.offsetX+","+e.offsetY);  
  576.             if(isDrawing()){  
  577.                 console.log("中止繪製");  
  578.                 if(ctrlConfig.kind>1){  
  579.                     repaint();  
  580.                     getCuGraph().draw();  
  581.                 }  
  582.                 stopDrawing();//中止繪製  
  583.             }  
  584.         }  
  585.       
  586.     return{  
  587.         isNull:isNull,  
  588.         getDom:getDom,  
  589.         clear:function(){  
  590.             stopDrawing();//中止繪製  
  591.             repaint();  
  592.         },  
  593.         /**初始化*/  
  594.         init:function(params){  
  595.             cbtCanvas=getDom(params.id);  
  596.             //瀏覽器是否支持Canvas  
  597.             if (cbtCanvas.getContext){  
  598.                 /**繪圖對象*/  
  599.                 cxt=cbtCanvas.getContext("2d");  
  600.                 cbtCanvas.onmousedown = mouseDown;    
  601.                 cbtCanvas.onmouseup = mouseUp;    
  602.                 cbtCanvas.onmousemove = mouseMove;    
  603.                 cbtCanvas.onmouseout = mouseOut;  
  604.                 resetStyle();//載入樣式  
  605.                 return true;  
  606.             }else{  
  607.                 return false;  
  608.             }  
  609.         },  
  610.         /**設置背景圖片*/  
  611.         setBgPic:loadPicture,  
  612.         /**選擇圖形類型*/  
  613.         begin:function(k){  
  614.             console.log("選擇繪製圖形："+k);  
  615.             if(isNaN(k)){//若是不是數字，先轉換爲對應字符  
  616.                 ctrlConfig.kind=kind[k];  
  617.             }else{  
  618.                 ctrlConfig.kind=k;  
  619.             }  
  620.             switchCorser(true);//切換鼠標樣式  
  621.         },  
  622.         /*手型，並中止繪圖*/  
  623.         hand:function(){  
  624.             ctrlConfig.kind=0;  
  625.             stopDrawing();//中止繪製  
  626.             switchCorser(false);//切換鼠標樣式  
  627.         }  
  628.     }  
  629. })  


 
 

3、使用方式

一、圖形類型工具

0:鼠標，1:畫筆，2:線條，3:三角形，4:矩形，5:多邊形，6:圓形，21:箭頭，41:平行四邊形，42:梯形
var graphkind={'cursor':0,'pen':1,'line':2,'trian':3,'rect':4,'poly':5,'circle':6,'arrow':21,'parallel':41,'trapezoid':42};

二、初始化以及使用背景圖片和畫筆選擇

 

[javascript]  view plain  copy
 
  1. var drawUtil=new DrawingTools();  
  2. //初始化，(若是瀏覽器不支持H5，會初始化失敗，返回false)  
  3. if(drawUtil.init({'id':'calibrationCanvas'})){  
  4.     //加載圖片  
  5.     var imgsrc='圖片地址';  
  6.     if(!drawUtil.isNull(imgsrc)){  
  7.         drawUtil.setBgPic(imgsrc,true);//設置背景圖片（異步加載圖片）  
  8.     }  
  9. }  
  10. drawUtil.begin(1);//選擇畫筆  

二、繪製箭頭

 

[javascript]  view plain  copy
 
  1. drawUtil.begin(21);  

 

 

 

 

4、演示demo

 

點擊這裏跳轉demo

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程