菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

开通VIP

领取更多软件工程师实用特权

 入驻

搜索

类型： 全部 | 视频教程 | 实战项目 | 项目源码 | 技术手册 | 课件 | 测试题 | 技术文章 | 软件下载 | 问答求助
水平： 全部 | 入门 | 普通 | 进阶

历史记录 清除记录

    你还没搜索过喔。

近期热搜

项目开发全程实录（电商EW_Shop）

8680 人 1年前

轻松学会Laravel-项目篇（商城API）

2022 人 1年前

Python数据分析2.0-金融

325 人 1年前

Python办公自动化2.0

241 人 1年前
猿创博文
猿创博文 / 其他 /
正文
476
0

使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo

原创
KingClover
其他
05/13 14:22
阅读数 6604
尊享10+项VIP特权
会员卡
开通学习猿地会员卡

前言

需要用到图形绘制，没有找到完整的图形绘制实现，所以自己实现了一个 - -

一、实现的功能

1、基于oop思想构建，支持坐标点、线条（由坐标点组成，包含方向）、多边形（由多个坐标点组成）、圆形（包含圆心坐标点和半径）等实体

2、原生JavaScript实现，不依赖任何第三方js库和插件

3、多图形绘制（支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形绘制）

4、拖拽式绘制（鼠标移动过程中不断进行canvas重绘）

5、图片绘制（作为背景图片时重绘会发生闪烁现象，暂时有点问题，后面继续完善）

5、清空绘制功能

6、新版本优化绘制性能（使用共享坐标变量数组，减少了大量的对象创建操作）

7、新版本支持箭头绘制功能

二、完整实现代码

 
[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. })  


 
 

三、使用方式

1、图形类型

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};

2、初始化以及使用背景图片和画笔选择

 

[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);//选择画笔  

2、绘制箭头

 

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

 

 

 

 

四、演示demo

 

点击这里跳转demo

476
0
0

© 著作权归作者所有

举报

发表评论

0/200
476 点赞
0 评论
收藏

关于作者

KingClover
vip
KingClover
私信
提问
文章
150
经验值
4.7K
粉丝
319
关注
0
猿创计划
立即入驻

自媒体入驻学习猿地，

获百万流量，打造个人技术品牌

热门文章

换一批
Swift读取Text文本文件
360点赞
 · 
0评论
区块链1
441点赞
 · 
0评论
为你推荐 换一批
友情链接：

实猿科技 学习猿地-LMONKEY © 辽ICP备19013136号

学习猿地
程序员学习的地方

扫码关注