Feb 27, 2010

Draw circle with Jquery

There are two past posts about drawing with jquery, In first post i implanted the freehand draw, in second we learned about drawing rectangle with jquery. Today i am with you with one another shape( Circle ). Let us see how we can draw circle with jquery.



As you know we can draw circle with css and rectangle with jquery. To be true i have mixed that two methodologies. Simply added one more property (radius) with rectangle.

Code

<script type="text/javascript"> 
$(document).ready(function() {
  var x1,x2,y1,y2;
  $(document).mousedown(function(e) {
  $("#current").attr({ 

                     id: ''
                     })
  box = $('<div style="border:1px #FF00FF solid;position:fixed;">').hide();
  $(document.body).append(box); 

  x1 = e.pageX;
  y1 = e.pageY;
  box.attr({id: 'current'}).css({
                                top: e.pageY , //offsets
                                left: e.pageX //offsets
                               }).fadeIn();
            });
 $(document).mousemove(function(e) {
   $("#current").css({
                     width:Math.abs(e.pageX - x1), //offsets
                     height:Math.abs(e.pageY - y1),//offsets
                     'border-radius':Math.abs(Math.abs(e.pageX - x1) / 2),
                     '-moz-border-radius':Math.abs(Math.abs(e.pageX - x1) / 2),
                     '-webkit-border-radius':Math.abs(Math.abs(e.pageX - x1) / 2)
                   }).fadeIn();
                });
 $(document).mouseup(function() {
                             $("#current").attr({ id: ''
                         })
                 });
 });

</script>

Demo

See this code in action here. Drag mouse to draw.

Related posts

Freehand draw with Jquery
Drawing rectangle with Jquery

Labels: jquery

By : Motyar+ @motyar