在web页,要画一个圆。有很多方法,SVG、canvas我们能够得出。
但文章没有使用这两种方法,但使用的div。div通常一个矩形。但是,假设一个圆形的样式设置border-radius有可能div变圆。
回合职位要求在画布上绝对定位(position: absolute)。也就是通过设置X、Y坐标在定位。相应的css样式是left、top。想要圆的绝对定位起效。画布就要设置position:relative。
<!DOCTYPE html> <html> <head> <style> #drawing { 500px; height: 500px; border:1px solid; position: relative; } .circle { background-color: green; position: absolute; } </style> </head> <body> <div id="drawing"> <div class="circle" style=" 50px; height: 50px; border-radius: 25px; left: 200px; top: 100px;"></div> </div> </body> </html>
通过以上原理。能够用jQuery实现这样一个交互:用鼠标在画布上按下左键拖动的方式来绘制圆,圆心是鼠标按下的位置,鼠标左键松开圆绘制完毕。
<!DOCTYPE html> <html> <head> <style> #drawing { 500px; height: 500px; border:1px solid; position: relative; overflow: hidden; } .circle { background-color: green; position: absolute; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script> $(document).ready(function() { // 圆 var $circle = null; // 画布 var $drawing = $("#drawing"); // 圆心位置 var centerX = 0; var centerY = 0; // 是否正在画圆 var isDrawing = false; // 按下鼠标開始画圆 $drawing.mousedown(function(event) { $circle = $('<div class="circle"></div>'); centerX = event.pageX - $drawing.offset().left; centerY = event.pageY - $drawing.offset().top; $(this).append($circle); isDrawing = true; event.preventDefault(); }); // 鼠标拖动 $(document).mousemove(function(event) { if(isDrawing) { var radiusX = Math.abs(event.pageX - $drawing.offset().left - centerX); var radiusY = Math.abs(event.pageY - $drawing.offset().top - centerY); var radius = Math.sqrt(radiusX * radiusX + radiusY * radiusY); // 半径。勾股定理 // 以下四个条件推断是限制圆不能超出画布区域,假设不须要这个限制能够去掉这段代码 if(centerX - radius < 0) { radius = centerX; } if(centerY - radius < 0) { radius = centerY; } if(centerX + radius > $drawing.width()) { radius = $drawing.width() - centerX; } if(centerY + radius > $drawing.height()) { radius = $drawing.height() - centerY; } // 设置圆的大小和位置 $circle.css("left", centerX - radius + "px"); $circle.css("top", centerY - radius + "px"); $circle.css("width", 2 * radius + "px"); $circle.css("height", 2 * radius + "px"); $circle.css("border-radius", radius + "px"); } }); // 鼠标松开停止画圆 $(document).mouseup(function() { isDrawing = false; }); }); </script> </head> <body> <div id="drawing"> </div> </body> </html>
因为圆都是绝对定位的,所以对画布中的其它元素的位置不会造成影响。也就是画布中能够放入其它想要的元素,比如图片。
至于实心圆、空心圆。还是透明的圆形,都能够通过css样式来控制,比如仅仅设置border就是空心圆。设置background-color就是实心圆,设置opacity就是透明。
相同的原理,除了圆形之外,还能够画出矩形、正方形,实现难度都比画出圆形要简单的多。大家请自行脑补。
作者:叉叉哥 转载请注明出处:http://blog.csdn.net/xiao__gui/article/details/25594169
版权声明:本文博客原创文章,博客,未经同意,不得转载。