Mar 16, 2010

Draw lines with jquery

There are three past posts about drawing with jquery, In first post i implanted the freehand draw, in second we learned about drawing rectangle with jquery and in third we were drawing circle with jquery. Today i am with you with one another shape( Line ). Let us see how we can draw horizontal and vertical lines with jquery.



As you know we can draw rectangle with jquery. To be true i have little changes in that technique, just added a width/height and border-(top/left) property .

Code

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

                     id: ''
                     })
  box = $('<div style="border-left:1px #FF00FF solid;position:fixed;width:1px;">').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
                   }).fadeIn();
                });
 $(document).mouseup(function() {
                             $("#current").attr({ id: ''
                         })
                 });
 });

</script>

NOTE: For Horizontal lines, use border-top:1px #FF00FF solid;position:fixed;height:1px and For Vertical lines, use border-left:1px #FF00FF solid;position:fixed;width:1px

Demo

See this code in action
here for Draw Vertical lines.
here for Draw Horizontal lines. Drag mouse to draw.

Related posts

Freehand draw with Jquery
Drawing rectangle with Jquery
Drawing Circle with Jquery

Labels: css, jquery

By : Motyar+ @motyar