没有合适的资源?快使用搜索试试~ 我知道了~
主要介绍了原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
资源推荐
资源详情
资源评论
原生原生JS使用使用Canvas实现拖拽式绘图功能实现拖拽式绘图功能
主要介绍了原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,本文
通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
一、实现的功能一、实现的功能
1、基于oop思想构建,支持坐标点、线条(由坐标点组成,包含方向)、多边形(由多个坐标点组成)、圆形(包含圆心坐
标点和半径)等实体
2、原生JavaScript实现,不依赖任何第三方js库和插件
3、多图形绘制(支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形绘制)
4、拖拽式绘制(鼠标移动过程中不断进行canvas重绘)
5、图片绘制(作为背景图片时重绘会发生闪烁现象,暂时有点问题,后面继续完善)
5、清空绘制功能
6、新版本优化绘制性能(使用共享坐标变量数组,减少了大量的对象创建操作)
7、新版本支持箭头绘制功能
二、完整实现代码二、完整实现代码
DrawingTools =(function(){
//公共方法
var getDom=function(id){return document.getElementById(id)};
var isNull=function(s){return s==undefined||typeof(s)=='undefined'||s==null||s=='null'||s==''||s.length<1};
var hideDefRM=function(){document.oncontextmenu=function(){return false}};//屏蔽浏览器默认鼠标事件
/**绘图容器*/
var cbtCanvas;
/**绘图对象*/
var cxt;
/**绘制的图形列表*/
var shapes=new Array();
var graphkind={'cursor':0,'pen':1,'line':2,'trian':3,'rect':4,'poly':5,'circle':6,'arrow':21,'parallel':41,'trapezoid':42};
//背景图片绘制配置
var bgPictureConfig={
pic:null,//背景图片地址或路径
repaint:true,//是否作为永久背景图,每次清除时会进行重绘
};
//加载并绘制图片(src:图片路径或地址),默认重绘背景图
var loadPicture=function(src){
if(isNull(bgPictureConfig.repaint)||bgPictureConfig.repaint){bgPictureConfig.pic=src}
var img = new Image();
img.onload = function(){cxt.drawImage(img,0,0)}
img.src =src;
}
//绘图基础配置
var paintConfig={lineWidth:1,//线条宽度,默认1
strokeStyle:'red',//画笔颜色,默认红色
fillStyle:'red',//填充色
lineJoin:"round",//线条交角样式,默认圆角
lineCap:"round",//线条结束样式,默认圆角
};
//重新载入绘制样式
var resetStyle=function(){
cxt.strokeStyle=paintConfig.strokeStyle;
cxt.lineWidth=paintConfig.lineWidth;
cxt.lineJoin=paintConfig.lineJoin;
cxt.lineCap=paintConfig.lineCap;
cxt.fillStyle=paintConfig.fillStyle;
}
//鼠标图形
var cursors=['crosshair','pointer'];
/** 切换鼠标样式*/
var switchCorser=function(b){
cbtCanvas.style.cursor=((isNull(b)?isDrawing():b)?cursors[0]:cursors[1]);
}
//操作控制变量组
var ctrlConfig={
kind:0,//当前绘画分类
isPainting:false,//是否开始绘制
startPoint:null,//起始点
cuGraph:null,//当前绘制的图像
资源评论
weixin_38678406
- 粉丝: 5
- 资源: 948
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功