大佬教程收集整理的这篇文章主要介绍了html5 – 是否已经有一个画布图指令AngularJS在那里?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
app.directive("drawing",function(){ return { reStrict: "A",link: function(scope,element){ var ctx = element[0].getContext('2d'); // variable that decides if something should be drawn on mousemove var drawing = false; // the last coordinates before the current move var lastX; var lastY; element.bind('mousedown',function(event){ if(event.offsetX!==undefined){ lastX = event.offsetX; lastY = event.offsetY; } else { // Firefox compatibility lastX = event.layerX - event.currentTarget.offsetLeft; lastY = event.layerY - event.currentTarget.offsetTop; } // begins new line ctx.beginPath(); drawing = true; }); element.bind('mousemove',function(event){ if(drawing){ // get current mouse position if(event.offsetX!==undefined){ currentX = event.offsetX; currentY = event.offsetY; } else { currentX = event.layerX - event.currentTarget.offsetLeft; currentY = event.layerY - event.currentTarget.offsetTop; } draw(lastX,lastY,currentX,currentY); // set current coordinates to last one lastX = currentX; lastY = currentY; } }); element.bind('mouseup',function(event){ // stop drawing drawing = false; }); // canvas reset function reset(){ element[0].width = element[0].width; } function draw(lX,lY,cX,cY){ // line from ctx.moveTo(lX,lY); // to ctx.lineTo(cX,cY); // color ctx.strokeStyle = "#4bf"; // draw it ctx.stroke(); } } }; });
然后你可以使用它在画布上这样:
<canvas drawing></canvas>
这是Plunkr上的演示:http://plnkr.co/aG4paH
以上是大佬教程为你收集整理的html5 – 是否已经有一个画布图指令AngularJS在那里?全部内容,希望文章能够帮你解决html5 – 是否已经有一个画布图指令AngularJS在那里?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。