设为首页 加入收藏

TOP

canvas鼠标拖动绘制图形(一)
2017-10-16 18:19:17 】 浏览:4318
Tags:canvas 鼠标 绘制 图形

使用canvas 实现了用鼠标拖动绘制各种图形

其中包括 矩形,圆形,箭头,画笔

使用方法

var paint = Ypaint(canvas)

绘制圆形:

paint.chooseCircle()

圆形其他参数

圆形的粗细 paint.outerParams.circle.lineWidth
圆形的颜色 paint.outerParams.circle.color

绘制矩形:

paint.chooseRect()

矩形其他参数

矩形的粗细 paint.outerParams.rect.lineWidth
矩形的圆角 paint.outerParams.rect.radius
矩形的颜色 paint.outerParams.rect.color

绘制箭头:

paint.chooseArrow()

箭头其他参数

箭头的粗细 paint.outerParams.arrow.range
箭头的大小 paint.outerParams.arrow.color

画笔工具:

paint.chooseCircle()

画笔工具其他参数

画笔的粗细 paint.outerParams.line.lineWidth
画笔的颜色 paint.outerParams.line.color

demo实例截图:

 

后续有时间会添加的功能:撤销、回撤、插入图片、图片在canvas内的拖动等等 有需求的可以提一提

在这里因为代码比较长,只提供压缩版本的代码,需要完整项目及demo的朋友 可以去我的github上下载 

github地址:https://github.com/lvangorysky/Ypaint 

 压缩版本代码:

!function(){function t(){this.init=function(t){this.outerParams={rect:{},circle:{},line:{},arrow:{}},this.isLine=!1,this.isArrow=!1,this.isRect=!1,this.isCircle=!1,this.lock=!1,this.canvas=t,this.ctx=this.canvas.getContext("2d"),this.w=this.canvas.width,this.h=this.canvas.height,this.touch="createTouch"in document,this.StartEvent=this.touch?"touchstart":"mousedown",this.MoveEvent=this.touch?"touchmove":"mousemove",this.EndEvent=this.touch?"touchend":"mouseup",this.clickDrag=[],this.lineX=[],this.lineY=[],this.beginPoint={},this.stopPoint={},this.storage={},this.rect={},this.polygonVertex=[],this.status={lineArr:[],arrowArr:[],circleArr:[],rectArr:[]},this.bind()},this.chooseRect=function(){this.isLine=!1,this.isArrow=!1,this.isRect=!0,this.isCircle=!1},this.chooseCircle=function(){this.isLine=!1,this.isArrow=!1,this.isRect=!1,this.isCircle=!0},this.chooseLine=function(){this.isLine=!0,this.isArrow=!1,this.isRect=!1,this.isCircle=!1},this.chooseArrow=function(){this.isLine=!1,this.isArrow=!0,this.isRect=!1,this.isCircle=!1},this.bind=function(){var t=this;this.canvas["on"+t.StartEvent]=function(e){var i=t.touch?e.touches[0]:e;t.lock=!0;var s=i.offsetX,r=i.offsetY;t.isRect?(t.rect.x=s,t.rect.y=r):t.isCircle?(t.storage.x=s,t.storage.y=r):t.isLine?(t.movePoint(s,r),t.drawPoint(t.lineX,t.lineY,t.clickDrag,t.outerParams.line.lineWidth,t.outerParams.line.color)):t.isArrow&&(t.beginPoint.x=s,t.beginPoint.y=r)},this.canvas["on"+t.MoveEvent]=function(e){if(t.lock)if(t.isRect)t.rect.width=Math.abs(t.rect.x-e.offsetX),t.rect.height=Math.abs(t.rect.y-e.offsetY),t.rect.x>e.offsetX?t.rect.realX=e.offsetX:t.rect.realX=t.rect.x,t.rect.y>e.offsetY?t.rect.realY=e.offsetY:t.rect.realY=t.rect.y,t.clear(),t.redrawAll(),t.drawRect(t.rect.realX,t.rect.realY,t.rect.width,t.rect.height,t.outerParams.rect.radius,t.outerParams.rect.color,t.outerParams.rect.lineWidth);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.sto
首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇图片首尾平滑轮播(JS原生方法—节.. 下一篇前端HTML以及HTML5(基本标签)

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

最新文章

热门文章

C 语言

C++基础

windows编程基础

linux编程基础

C/C++面试题目