Simply jquery code for drawing boxes on an image that store their coordinates into hidden inputs for form submit.
A Pen by Jarvis Badgley on CodePen.
Simply jquery code for drawing boxes on an image that store their coordinates into hidden inputs for form submit.
A Pen by Jarvis Badgley on CodePen.
<div class="boxdraw"> | |
<img src="http://i.imgur.com/jFXMvUd.png"> | |
</div> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script> |
jQuery(function ($) { | |
var $el = $('.boxdraw'); | |
var $img = $el.find('img'); | |
var $selected = null; | |
var handlesize = 8; | |
var x,y, bx, by; | |
var mode; | |
$el.on('mousedown', function (ev) { | |
ev.preventDefault(); | |
ev.stopPropagation(); | |
var offset = $el.offset(); | |
x = ev.pageX - offset.left; | |
y = ev.pageY - offset.top; | |
if ($(ev.target).is('.boxdraw-box')) { | |
// mouse landed on a current box | |
$selected = $(ev.target); | |
var w = $selected.outerWidth(); | |
var h = $selected.outerHeight(); | |
var l = parseFloat($selected.css('left')); | |
var t = parseFloat($selected.css('top')); | |
if (x - l <= w && x - l >= w - handlesize && y - t <= h && y - t >= h - handlesize) { | |
mode = 'resize'; | |
bx = $selected.width(); | |
by = $selected.height(); | |
} else { | |
mode = 'move'; | |
bx = l | |
by = t | |
} | |
} else if ($(ev.target).is('.boxdraw-close')) { | |
$selected = $(ev.target).closest('.boxdraw-box'); | |
mode = 'delete'; | |
} else { | |
// mouse landed on backdrop or image | |
$selected = $('<div class="boxdraw-box"><a class="boxdraw-close">×</a><input type="hidden" name="box[]"></div>'); | |
$selected.css({left: x, top: y, width: handlesize * 2, height: handlesize * 2}).appendTo($el); | |
bx = 0; | |
by = 0; | |
mode = 'resize'; | |
} | |
}); | |
$el.on('mousemove', function (ev) { | |
if (!$selected) return; | |
var offset = $el.offset(); | |
var cx = ev.pageX - offset.left; | |
var cy = ev.pageY - offset.top; | |
var dx = cx - x; | |
var dy = cy - y; | |
switch (mode) { | |
case 'resize': | |
$selected.css({ | |
width: Math.max(handlesize * 2, bx + dx), | |
height: Math.max(handlesize * 2, by + dy) | |
}); | |
updateInput($selected); | |
break; | |
case 'move': | |
$selected.css({ | |
left: bx + dx, | |
top: by + dy | |
}); | |
updateInput($selected); | |
break; | |
} | |
}); | |
$el.on('mouseup', function (ev) { | |
if (!$selected) return; | |
var offset = $el.offset(); | |
var cx = ev.pageX - offset.left; | |
var cy = ev.pageY - offset.top; | |
var dx = cx - x; | |
var dy = cy - y; | |
switch (mode) { | |
case 'resize': | |
$selected.css({ | |
width: Math.max(handlesize * 2, bx + dx), | |
height: Math.max(handlesize * 2, by + dy) | |
}); | |
updateInput($selected); | |
break; | |
case 'move': | |
$selected.css({ | |
left: bx + dx, | |
top: by + dy | |
}); | |
updateInput($selected); | |
break; | |
case 'delete': | |
if ($(ev.target).is('.boxdraw-close')) { | |
$selected.remove(); | |
} | |
break; | |
} | |
$selected = null; | |
}); | |
function updateInput($box) { | |
var w = $box.outerWidth(); | |
var h = $box.outerHeight(); | |
var l = parseFloat($box.css('left')); | |
var t = parseFloat($box.css('top')); | |
$box.find('input').val(JSON.stringify({x: l, y: t, w: w, h:h})); | |
} | |
}); |
.boxdraw { | |
display: inline-block; | |
position: relative; | |
} | |
.boxdraw .boxdraw-box { | |
position: absolute; | |
border: 1px solid blue; | |
box-sizing: border-box; | |
background-color: white; | |
box-shadow: inset 1px 1px 0px white, | |
inset -1px -1px 0px white; | |
} | |
.boxdraw .boxdraw-box:after { | |
position: absolute; | |
right: 0; | |
bottom: 0; | |
height: 8px; | |
width: 8px; | |
content: ' '; | |
background-color: blue; | |
} | |
.boxdraw .boxdraw-close { | |
font-size: 16px; | |
line-height: 16px; | |
position: relative; | |
top: -4px; | |
left: 1px; | |
cursor: pointer; | |
} |