Skip to content

Instantly share code, notes, and snippets.

@garg

garg/RWVOPo.markdown

Last active October 7, 2015 16:32
Show Gist options
  • Save garg/7ad6eb8946ff317521df to your computer and use it in GitHub Desktop.
Save garg/7ad6eb8946ff317521df to your computer and use it in GitHub Desktop.
Download ZIP
RWVOPo
Raw
index.html
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/pep/0.3.0/pep.js"></script>
<style>
.drawArea {
border: 1px solid #000000;
position: absolute;
top: 0px;
left: 0px;
width: 1080px;
height: 540px;
}
.drawArea .drawingBoard {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.rectData {
position: absolute;
top: 0px;
right: 0px;
}
.main-content {
background-color: #bbbbbb;
position: absolute;
top: 0;
bottom: 0;
left: 10px;
right: 0;
width: auto;
height: auto;
margin-right: 40px;
webkit-transition: width 0.25s cubic-bezier(0.5, 0, 0.1, 1);
-moz-transition: width 0.25s cubic-bezier(0.5, 0, 0.1, 1);
-o-transition: width 0.25s cubic-bezier(0.5, 0, 0.1, 1);
transition: width 0.25s cubic-bezier(0.5, 0, 0.1, 1);
}
</style>
</head>
<body>
<div class="main-content">
<div class="room-container">
<div class="roomLayoutMiddleBoard">
<div id="drawArea" class="drawArea" touch-action="none">
<canvas id="drawingBoard" class="drawingBoard" width="1080px" height="540px" touch-action="none"></canvas>
</div>
</div>
</div>
</div>
<div class="rectData">
<p>bottom: <span id="bottom">huh</span></p>
<p>height: <span id="height"></span></p>
<p>left: <span id="left"></span></p>
<p>right: <span id="right"></span></p>
<p>top: <span id="top"></span></p>
<p>width: <span id="width"></span></p>
</div>
<script>
var canvas = document.getElementById("drawingBoard");
var context = canvas.getContext("2d");
var isMouseDown = false;
var drawArea = $('.drawArea');
var dim = drawArea[0].getBoundingClientRect();
var startCoords = {};
var startTop = 0;
var startLeft = 0;
var bw = 512;
var bh = 400;
var p = 0;
var Vec2 = function(x, y, rect) {
this.x = x;
this.y = y;
this.rect = rect;
};
var getRelativeCoords = function getRelativeCoords(event, element) {
var rect = element.getBoundingClientRect();
// + 0.5 to move to pixel center
if (event.touches !== undefined && event.touches.length > 0) {
return new Vec2(event.touches[0].clientX - rect.left + 0.5,
event.touches[0].clientY - rect.top + 0.5);
}
return new Vec2(event.clientX - rect.left + 0.5,
event.clientY - rect.top + 0.5, rect);
};
function drawGrid() {
for (var x = 0; x <= bw; x += 100) {
context.moveTo(0.5 + x + p, p);
context.lineTo(0.5 + x + p, bh + p);
}
context.strokeStyle = "black";
context.stroke();
}
drawGrid();
console.log(dim);
var drawArea1 = document.getElementById('drawArea');
drawArea1.addEventListener('pointerdown', function(e) {
console.log(e);
isMouseDown = true;
startCoords = getRelativeCoords(e, drawArea[0]);
startTop = drawArea.style.top;
startLeft = drawArea.style.left;
});
drawArea1.addEventListener('pointerup',function() {
isMouseDown = false;
});
drawArea1.addEventListener('pointermove',function(e) {
if (isMouseDown === true) {
var coords = getRelativeCoords(e, drawArea[0]);
var deltaX = coords.x - startCoords.x;
var deltaY = coords.y - startCoords.y;
drawArea.css('top', "+=" + deltaY);
drawArea.css('left', "+=" + deltaX);
//console.log(coords);
$('#bottom').text(coords.rect.bottom);
$('#height').text(coords.rect.height);
$('#left').text(coords.rect.left);
$('#right').text(coords.rect.right);
$('#top').text(coords.rect.top);
$('#width').text(coords.rect.width);
}
});
</script>
</body>
</html>
Raw
script.js
var canvas = document.getElementById("drawingBoard");
var context = canvas.getContext("2d");
var isMouseDown = false;
var drawArea = $('.drawArea');
var dim = drawArea[0].getBoundingClientRect();
var startCoords = {};
var startTop = 0;
var startLeft = 0;
var bw = 512;
var bh = 400;
var p = 0;
var Vec2 = function(x, y, rect) {
this.x = x;
this.y = y;
this.rect = rect;
};
var getRelativeCoords = function getRelativeCoords(event, element) {
var rect = element.getBoundingClientRect();
// + 0.5 to move to pixel center
if (event.touches !== undefined && event.touches.length > 0) {
return new Vec2(event.touches[0].clientX - rect.left + 0.5,
event.touches[0].clientY - rect.top + 0.5);
}
return new Vec2(event.clientX - rect.left + 0.5,
event.clientY - rect.top + 0.5, rect);
};
function drawGrid() {
for (var x = 0; x <= bw; x += 100) {
context.moveTo(0.5 + x + p, p);
context.lineTo(0.5 + x + p, bh + p);
}
context.strokeStyle = "black";
context.stroke();
}
drawGrid();
console.log(dim);
var drawArea1 = document.getElementById('drawArea');
drawArea1.addEventListener('pointerdown', function(e) {
console.log(e);
isMouseDown = true;
startCoords = getRelativeCoords(e, drawArea[0]);
startTop = drawArea.style.top;
startLeft = drawArea.style.left;
});
drawArea1.addEventListener('pointerup',function() {
isMouseDown = false;
});
drawArea1.addEventListener('pointermove',function(e) {
if (isMouseDown === true) {
var coords = getRelativeCoords(e, drawArea[0]);
var deltaX = coords.x - startCoords.x;
var deltaY = coords.y - startCoords.y;
drawArea.css('top', "+=" + deltaY);
drawArea.css('left', "+=" + deltaX);
//console.log(coords);
$('#bottom').text(coords.rect.bottom);
$('#height').text(coords.rect.height);
$('#left').text(coords.rect.left);
$('#right').text(coords.rect.right);
$('#top').text(coords.rect.top);
$('#width').text(coords.rect.width);
}
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/pep/0.3.0/pep.js"></script>
Raw
style.css
.drawArea {
border: 1px solid #000000;
position: absolute;
top: 0px;
left: 0px;
width: 512px;
height: 512px;
}
.drawArea .drawingBoard {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment