Lets Draw DIVs

1 post Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Lets Draw DIVs
mikethedj4
Basic WYSIWYG HTML Designer - http://codepen.io/mikethedj4/pen/gCsih

Screenshot:
draw-divs.png
Ever wanted to draw a rectangle or circle in Javascript? Well today I'm going to show you how.

Most of the css isn't anything to note, but what's important to note is we'll be using the following css to draw our div.
Code: Select all
.drawnBox{
  position: absolute;
  z-index: 1;
  border: 1px solid #fff;
  background-color: rgba(0, 34, 102, 0.5);
  pointer-events:none;
}
If you want to draw circles you can use the border-radius css property.
Code: Select all
border-radius:99999999999em;
Here's our CSS:
Code: Select all
body {
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  overflow:hidden;
  background: #333;
}

.stop-draw {
  float:right;
}

.drawnBox{
  position: absolute;
  z-index: 1;
  border: 1px solid #fff;
  background-color: rgba(0, 34, 102, 0.5);
  pointer-events:none;
}

#drawingArea {
  position:absolute;
  top:40px; left:0; right:0; bottom:5px;
  border: 1px solid #111;
  background: #fff;
  box-shadow: 0 0 16px #000;
  overflow:hidden;
}

.btn {
  cursor:pointer;
  border:0; padding:0; font: 30px arial;
  background: none;
}

.btn:hover { color: #666; }
.active { color: #09f; }
.inactive { color: #f66; }

.left { float:left; }
.right { float:right; }
Here's our HTML:
Code: Select all
<html>
<head>
<title>Lets Draw DIVs</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
  <button class="btn left enable">Enable</button>
  <button class="btn right disable">Disable</button>
  <div id="drawingArea"></div>
</body>
</html>
In order to draw a div you have to detect the mouse location on mousedown/touchstart and append a div accordingly. Then on mousemove/touchmove is when the drawing begins where the div expands upon your "drawing" via css. Then when the mouse is up drawing is done and turned to false. Until you're ready to draw again.

The enable & disable buttons just call the functions to draw or not while also adding a class to enhance visibility of the layout aka it's just eye candy lol.

Anyway here's our Javascript. (NOTE: Remember that e.pageX and e.pageY detects the mouse position which is why it's important to call the e or event in the function otherwise it won't call pageX or pageY to detect the mouse position)

Here's our Javascript:
Code: Select all
$(function() {
  // Setup our variables
  var drawable = false,
      drawing  = false,
      mS = {},
      dBox;
  
  // Once mouse is down detect mouse location & append div.
  $('#drawingArea').on('mousedown touchstart', function(e) {
    if(drawable) {
      drawing = true;
      mS.x = e.pageX - 5;
      mS.y = e.pageY - 41;
      dBox = $("<div class='drawnBox' />");
      $(this).append(dBox);
    }
  });
  
  // When mouse is down & moved have the div size & position expand accordingly 
  $(document).on('mousemove touchmove', function(e) {
    if(drawing && drawable) {
      var mPos = {x:e.pageX, y:e.pageY};
      var css = {};
      css.left   = (mPos.x > mS.x) ? mS.x : mPos.x;
      css.top    = (mPos.y > mS.y) ? mS.y : mPos.y;
      css.width  = Math.abs(mPos.x - mS.x);
      css.height = Math.abs(mPos.y - mS.y);
      dBox.css(css);
    } // Make drawing false once a div has been drawn
  }).on('mouseup touchend', function(e) {
    drawing = false;
  });
  
  // Enable drawable
  $('.enable').click(function() {
    drawable = 1;
    $(this).addClass('active');
    $('.disable').removeClass('inactive');
  });
  
  // Disable drawable
  $('.disable').click(function() {
    drawable = false;
    $('.enable').removeClass('active');
    $(this).addClass('inactive');
  });
});
Here's our full code: Enjoy! :mrgreen:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Lets Draw DIVs</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type="text/css">
body {
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  overflow:hidden;
  background: #333;
}

.stop-draw {
  float:right;
}

.drawnBox{
  position: absolute;
  z-index: 1;
  border: 1px solid #fff;
  background-color: rgba(0, 34, 102, 0.5);
  pointer-events:none;
}

#drawingArea {
  position:absolute;
  top:40px; left:0; right:0; bottom:5px;
  border: 1px solid #111;
  background: #fff;
  box-shadow: 0 0 16px #000;
}

.btn {
  cursor:pointer;
  border:0; padding:0; font: 30px arial;
  background: none;
}

.btn:hover { color: #666; }
.active { color: #09f; }
.inactive { color: #f66; }

.left { float:left; }
.right { float:right; }
</style>
<script type="text/javascript">
$(function() {
  // Setup our variables
  var drawable = false,
      drawing  = false,
      mS = {},
      dBox;
  
  // Once mouse is down detect mouse location & append div.
  $('#drawingArea').on('mousedown touchstart', function(e) {
    if(drawable) {
      drawing = true;
      mS.x = e.pageX - 5;
      mS.y = e.pageY - 41;
      dBox = $("<div class='drawnBox' />");
      $(this).append(dBox);
    }
  });
  
  // When mouse is down & moved have the div size & position expand accordingly 
  $(document).on('mousemove touchmove', function(e) {
    if(drawing && drawable) {
      var mPos = {x:e.pageX, y:e.pageY};
      var css = {};
      css.left   = (mPos.x > mS.x) ? mS.x : mPos.x;
      css.top    = (mPos.y > mS.y) ? mS.y : mPos.y;
      css.width  = Math.abs(mPos.x - mS.x);
      css.height = Math.abs(mPos.y - mS.y);
      dBox.css(css);
    } // Make drawing false once a div has been drawn
  }).on('mouseup touchend', function(e) {
    drawing = false;
  });
  
  // Enable drawable
  $('.enable').click(function() {
    drawable = 1;
    $(this).addClass('active');
    $('.disable').removeClass('inactive');
  });
  
  // Disable drawable
  $('.disable').click(function() {
    drawable = false;
    $('.enable').removeClass('active');
    $(this).addClass('inactive');
  });
});
</script>
</head>
<body>
  <button class="btn left enable">Enable</button>
  <button class="btn right disable">Disable</button>
  <div id="drawingArea"></div>
</body>
</html>
You do not have the required permissions to view the files attached to this post.
1 post Page 1 of 1
Return to “Tutorials”