网站营销推广,承德专业做网站,网页设计网站建设的书籍,郑州网站+建设上一篇Canvas的博文写完后#xff0c;有位朋友希望能对Canvas绘制出来的图像进行点击、拖拽等操作#xff0c;因为Canvas绘制出的图像能很好的美化。好像是想做炉石什么的游戏#xff0c;我也没玩过。Canvas在我的理解中就好像在一张画布上绘制图像#xff0c;它只能看到却…上一篇Canvas的博文写完后有位朋友希望能对Canvas绘制出来的图像进行点击、拖拽等操作因为Canvas绘制出的图像能很好的美化。好像是想做炉石什么的游戏我也没玩过。Canvas在我的理解中就好像在一张画布上绘制图像它只能看到却“摸”不到那要如何进行操作呢。我不知道网上是怎么做的这里用自己的想法做了个DEMO分享给大家。思路虽然Canvas不能拖拽但div可以拖拽那怎么把二者结合起来呢。初步想法是将一个与Canvas图像大小差不多的div覆盖在其上在拖拽div时将获取的光标坐标修正后传给Canvas绘制函数并刷新图像的位置。既然要覆盖先做些准备工作1.将div与Canvas画布均position:absolute否则无法重叠。2.将div的z-index值设置大点保证其在Canvas画面之上。准备工作完成后我们先来看div的拖拽var divObjdocument.getElementById(cover);var moveFlagfalse;divObj.οnmοusedοwnfunction(e){moveFlagtrue;var clickEventwindow.event||e;var mwidthclickEvent.clientX-divObj.offsetLeft;var mheightclickEvent.clientY-divObj.offsetTop;document.οnmοusemοvefunction(e){var moveEventwindow.event||e;if(moveFlag){divObj.style.leftmoveEvent.clientX-mwidthpx;divObj.style.topmoveEvent.clientY-mheightpx;divObj.οnmοuseupfunction(){moveFlagfalse;}}}};来解读下这段代码首先获取div对象设置拖拽标志moveFlage,当onmousedown时为true表示可以拖动当onmouseup时为false表示不能拖动了。var clickEventwindow.event||e;var mwidthclickEvent.clientX-divObj.offsetLeft;var mheightclickEvent.clientY-divObj.offsetTop;这三行代码是为了修正光标位置。当点击时记录下光标在div上的位置。mwidth和mheight表示光标落点相对于div左边和上边的距离。如果不加修正这就是不加修正的结果当光标点下时div的坐标即左上角会与光标坐标一致。修正后点击时光标总会“粘”在div某点上。接下来绘制图片首先定义全局变量X和Y它们是为了实时更新图像的绘制坐标。var ctxdocument.getElementById(myCanvas).getContext(2d);var imgdocument.getElementById(myImg);functiondrawImg(){ctx.clearRect(0,0,1000,500);ctx.beginPath();ctx.drawImage(img,X,Y);ctx.closePath();ctx.stroke();}window.οnlοadfunction(){setInterval(drawImg,1);}获取“画笔”获取图片对象。这里setInterval循环执行绘制图片的函数以刷新图片的位置setInterval的间隔值越小拖拽起来越“流畅”。同时别忘了clearRect当图片移动到下一个位置时清除上一个位置的图片参数为Canvas画布的坐标和尺寸。在拖拽时将修正后的光标坐标传给X、YXmoveEvent.clientX-mwidth;YmoveEvent.clientY-mheight;最后加上div和图像的活动范围if(moveEvent.clientXmwidth){divObj.style.left0px;X0;}if(parseInt(divObj.style.left)divObj.offsetWidth 1000){divObj.style.left1000 - divObj.offsetWidthpx;X1000 -divObj.offsetWidth;}if(moveEvent.clientYmheight){divObj.style.top0px;Y0;}if(parseInt(divObj.style.top)divObj.offsetHeight500){divObj.style.top500-divObj.offsetHeightpx;Y500-divObj.offsetHeight;}这个就看个人的要求了注意是要同时限定div和图片的活动范围。1000与500为本例的画布大小如果是在整个页面里活动就换成innerWidth或innerHeight。彻底隐藏div看看效果最后说下点击事件这里要注意的是在拖拽的过程中onmousedown与onmouseup二者就构成了一个click过程但我们不希望在拖拽结束后触发点击事件。这里有个比较简单的办法定义一个clickFlag默认为false,当onmousedown时设为true若进行了onmousemove事件时设为false。在最后onmouseup时判断clickFlag的值为true时才触发点击事件。也就是说当你按下鼠标时只有不发现移动松开鼠标时才会触发点击事件。整理后的JS代码//绘制图片坐标var X0;var Y0;//js部分var divObjdocument.getElementById(cover);var moveFlagfalse;//区别moueseup与click的标志var clickFlagfalse;//拖拽函数divObj.οnmοusedοwnfunction(e){moveFlagtrue;clickFlagtrue;var clickEventwindow.event||e;var mwidthclickEvent.clientX-divObj.offsetLeft;var mheightclickEvent.clientY-divObj.offsetTop;document.οnmοusemοvefunction(e){clickFlagfalse;var moveEventwindow.event||e;if(moveFlag){divObj.style.leftmoveEvent.clientX-mwidthpx;divObj.style.topmoveEvent.clientY-mheightpx; 将鼠标坐标传给Canvas中的图像XmoveEvent.clientX-mwidth;YmoveEvent.clientY-mheight; 下面四个条件为限制div以及图像的活动边界if(moveEvent.clientXmwidth){divObj.style.left0px;X0;}if(parseInt(divObj.style.left)divObj.offsetWidth 1000){divObj.style.left1000 - divObj.offsetWidthpx;X1000 -divObj.offsetWidth;}if(moveEvent.clientYmheight){divObj.style.top0px;Y0;}if(parseInt(divObj.style.top)divObj.offsetHeight500){divObj.style.top500-divObj.offsetHeightpx;Y500-divObj.offsetHeight;}divObj.οnmοuseupfunction(){moveFlagfalse;if(clickFlag){alert(点击生效);}}}}};本例到此结束更多功能大家有兴趣可以自己开发感谢您的浏览也感谢每个对我这菜鸟提意见的人。
