设为首页 加入收藏

TOP

canvas鼠标拖动绘制图形(二)
2017-10-16 18:19:17 】 浏览:5710
Tags:canvas 鼠标 绘制 图形
rage.x-e.offsetX)/2,o=Math.abs(t.storage.y-e.offsetY)/2;t.clear(),t.redrawAll(),t.drawEllipse(i,s,r,o,t.outerParams.circle.lineWidth,t.outerParams.circle.color)}else t.isLine?(t.movePoint(e.offsetX,e.offsetY,!0),t.drawPoint(t.lineX,t.lineY,t.clickDrag,t.lineWidth,t.outerParams.line.color)):t.isArrow&&(t.stopPoint.x=e.offsetX,t.stopPoint.y=e.offsetY,t.clear(),t.redrawAll(),t.arrowCoord(t.beginPoint,t.stopPoint,t.outerParams.arrow.range),t.sideCoord(),t.drawArrow(t.outerParams.arrow.color))},this.canvas["on"+t.EndEvent]=function(e){if(t.isRect)t.status.rectArr.push({realX:t.rect.realX,realY:t.rect.realY,width:t.rect.width,height:t.rect.height,radius:t.outerParams.rect.radius,color:t.outerParams.rect.color,lineWidth:t.outerParams.rect.lineWidth}),t.rect={};else if(t.isCircle){if(t.storage.x>e.offsetX)i=t.storage.x-Math.abs(t.storage.x-e.offsetX)/2;else var i=Math.abs(t.storage.x-e.offsetX)/2+t.storage.x;if(t.storage.y>e.offsetY)s=t.storage.y-Math.abs(t.storage.y-e.offsetY)/2;else var s=Math.abs(t.storage.y-e.offsetY)/2+t.storage.y;var r=Math.abs(t.storage.x-e.offsetX)/2,o=Math.abs(t.storage.y-e.offsetY)/2;t.status.circleArr.push({x:i,y:s,a:r,b:o,color:t.outerParams.circle.color,lineWidth:t.outerParams.circle.lineWidth}),t.storage={}}else if(t.isLine)t.status.lineArr.push({x:t.lineX,y:t.lineY,clickDrag:t.clickDrag,lineWidth:t.outerParams.line.lineWidth,color:t.outerParams.line.color}),t.lineX=[],t.lineY=[],t.clickDrag=[];else if(t.drawArrow){var a={beginPoint:t.beginPoint,stopPoint:{x:e.offsetX,y:e.offsetY},range:t.outerParams.arrow.range,color:t.outerParams.arrow.color};t.status.arrowArr.push(a),t.beginPoint={}}t.lock=!1}},this.movePoint=function(t,e){this.lineX.push(t),this.lineY.push(e),this.clickDrag.push(e)},this.drawPoint=function(t,e,i,s,r){for(var o=0;o<t.length;o++)this.ctx.beginPath(),i[o]&&o?this.ctx.moveTo(t[o-1],e[o-1]):this.ctx.moveTo(t[o]-1,e[o]),this.ctx.lineWidth=s,this.ctx.strokeStyle=r,this.ctx.lineTo(t[o],e[o]),this.ctx.closePath(),this.ctx.stroke()},this.getRadian=function(t,e){this.angle=Math.atan2(e.y-t.y,e.x-t.x)/Math.PI*180},this.arrowCoord=function(t,e,i){this.polygonVertex[0]=t.x,this.polygonVertex[1]=t.y,this.polygonVertex[6]=e.x,this.polygonVertex[7]=e.y,this.getRadian(t,e),this.polygonVertex[8]=e.x-CONST.edgeLen*Math.cos(Math.PI/180*(this.angle+i)),this.polygonVertex[9]=e.y-CONST.edgeLen*Math.sin(Math.PI/180*(this.angle+i)),this.polygonVertex[4]=e.x-CONST.edgeLen*Math.cos(Math.PI/180*(this.angle-i)),this.polygonVertex[5]=e.y-CONST.edgeLen*Math.sin(Math.PI/180*(this.angle-i))},this.sideCoord=function(){var t={};t.x=(this.polygonVertex[4]+this.polygonVertex[8])/2,t.y=(this.polygonVertex[5]+this.polygonVertex[9])/2,this.polygonVertex[2]=(this.polygonVertex[4]+t.x)/2,this.polygonVertex[3]=(this.polygonVertex[5]+t.y)/2,this.polygonVertex[10]=(this.polygonVertex[8]+t.x)/2,this.polygonVertex[11]=(this.polygonVertex[9]+t.y)/2},this.drawArrow=function(t){this.ctx.fillStyle=t,this.ctx.beginPath(),this.ctx.mo
首页 上一页 1 2 3 下一页 尾页 2/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇图片首尾平滑轮播(JS原生方法—节.. 下一篇前端HTML以及HTML5(基本标签)

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目