Lets Draw DIVs
1 post
Page 1 of 1
Basic WYSIWYG HTML Designer - http://codepen.io/mikethedj4/pen/gCsih
Screenshot: 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.
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:
Screenshot: 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
If you want to draw circles you can use the border-radius css property.
.drawnBox{
position: absolute;
z-index: 1;
border: 1px solid #fff;
background-color: rgba(0, 34, 102, 0.5);
pointer-events:none;
}
Code: Select all
Here's our CSS:
border-radius:99999999999em;
Code: Select all
Here's our HTML:
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; }
Code: Select all
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.<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>
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
Here's our full code: Enjoy! :mrgreen:
$(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');
});
});
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
Copyright Information
Copyright © Codenstuff.com 2020 - 2023