252 lines
7.5 KiB
JavaScript
252 lines
7.5 KiB
JavaScript
|
var image = document.getElementById('full-image');
|
||
|
var canvas = document.getElementById('canvas')
|
||
|
|
||
|
//hidden or text inputs
|
||
|
var h_th_left = document.getElementById('thb_left')
|
||
|
var h_th_top = document.getElementById('thb_top')
|
||
|
var h_th_right = document.getElementById('thb_right')
|
||
|
var h_th_bottom = document.getElementById('thb_bottom')
|
||
|
|
||
|
var handleRadius = 10
|
||
|
|
||
|
var dragTL = dragBL = dragTR = dragBR = false;
|
||
|
var dragWholeRect = false;
|
||
|
|
||
|
var rect={}
|
||
|
var current_canvas_rect={}
|
||
|
|
||
|
var mouseX, mouseY
|
||
|
var startX, startY
|
||
|
|
||
|
var th_left = 504;
|
||
|
var th_top = 0;
|
||
|
var th_right = 3528;
|
||
|
var th_bottom = 3024;
|
||
|
|
||
|
var th_width = th_right - th_left;
|
||
|
var th_height = th_bottom - th_top;
|
||
|
|
||
|
var effective_image_width = 4032;
|
||
|
var effective_image_height = 3024;
|
||
|
|
||
|
//drawRectInCanvas() connected functions -- START
|
||
|
function updateHiddenInputs(){
|
||
|
var inverse_ratio_w = effective_image_width / canvas.width;
|
||
|
var inverse_ratio_h = effective_image_height / canvas.height ;
|
||
|
h_th_left.value = Math.round(rect.left * inverse_ratio_w)
|
||
|
h_th_top.value = Math.round(rect.top * inverse_ratio_h)
|
||
|
h_th_right.value = Math.round((rect.left + rect.width) * inverse_ratio_w)
|
||
|
h_th_bottom.value = Math.round((rect.top + rect.height) * inverse_ratio_h)
|
||
|
}
|
||
|
|
||
|
function drawCircle(x, y, radius) {
|
||
|
var ctx = canvas.getContext("2d");
|
||
|
ctx.fillStyle = "#c757e7";
|
||
|
ctx.beginPath();
|
||
|
ctx.arc(x, y, radius, 0, 2 * Math.PI);
|
||
|
ctx.fill();
|
||
|
}
|
||
|
|
||
|
function drawHandles() {
|
||
|
drawCircle(rect.left, rect.top, handleRadius);
|
||
|
drawCircle(rect.left + rect.width, rect.top, handleRadius);
|
||
|
drawCircle(rect.left + rect.width, rect.top + rect.height, handleRadius);
|
||
|
drawCircle(rect.left, rect.top + rect.height, handleRadius);
|
||
|
}
|
||
|
|
||
|
|
||
|
function drawRectInCanvas()
|
||
|
{
|
||
|
var ctx = canvas.getContext("2d");
|
||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
ctx.beginPath();
|
||
|
ctx.lineWidth = "6";
|
||
|
ctx.fillStyle = "rgba(199, 87, 231, 0.2)";
|
||
|
ctx.strokeStyle = "#c757e7";
|
||
|
ctx.rect(rect.left, rect.top, rect.width, rect.height);
|
||
|
ctx.fill();
|
||
|
ctx.stroke();
|
||
|
drawHandles();
|
||
|
updateHiddenInputs()
|
||
|
}
|
||
|
//drawRectInCanvas() connected functions -- END
|
||
|
|
||
|
function mouseUp(e) {
|
||
|
dragTL = dragTR = dragBL = dragBR = false;
|
||
|
dragWholeRect = false;
|
||
|
}
|
||
|
|
||
|
//mousedown connected functions -- START
|
||
|
function checkInRect(x, y, r) {
|
||
|
return (x>r.left && x<(r.width+r.left)) && (y>r.top && y<(r.top+r.height));
|
||
|
}
|
||
|
|
||
|
function checkCloseEnough(p1, p2) {
|
||
|
return Math.abs(p1 - p2) < handleRadius;
|
||
|
}
|
||
|
|
||
|
function getMousePos(canvas, evt) {
|
||
|
var clx, cly
|
||
|
if (evt.type == "touchstart" || evt.type == "touchmove") {
|
||
|
clx = evt.touches[0].clientX;
|
||
|
cly = evt.touches[0].clientY;
|
||
|
} else {
|
||
|
clx = evt.clientX;
|
||
|
cly = evt.clientY;
|
||
|
}
|
||
|
var boundingRect = canvas.getBoundingClientRect();
|
||
|
return {
|
||
|
x: clx - boundingRect.left,
|
||
|
y: cly - boundingRect.top
|
||
|
};
|
||
|
}
|
||
|
|
||
|
function mouseDown(e) {
|
||
|
var pos = getMousePos(this,e);
|
||
|
mouseX = pos.x;
|
||
|
mouseY = pos.y;
|
||
|
// 0. inside movable rectangle
|
||
|
if (checkInRect(mouseX, mouseY, rect)){
|
||
|
dragWholeRect=true;
|
||
|
startX = mouseX;
|
||
|
startY = mouseY;
|
||
|
}
|
||
|
// 1. top left
|
||
|
else if (checkCloseEnough(mouseX, rect.left) && checkCloseEnough(mouseY, rect.top)) {
|
||
|
dragTL = true;
|
||
|
}
|
||
|
// 2. top right
|
||
|
else if (checkCloseEnough(mouseX, rect.left + rect.width) && checkCloseEnough(mouseY, rect.top)) {
|
||
|
dragTR = true;
|
||
|
}
|
||
|
// 3. bottom left
|
||
|
else if (checkCloseEnough(mouseX, rect.left) && checkCloseEnough(mouseY, rect.top + rect.height)) {
|
||
|
dragBL = true;
|
||
|
}
|
||
|
// 4. bottom right
|
||
|
else if (checkCloseEnough(mouseX, rect.left + rect.width) && checkCloseEnough(mouseY, rect.top + rect.height)) {
|
||
|
dragBR = true;
|
||
|
}
|
||
|
// (5.) none of them
|
||
|
else {
|
||
|
// handle not resizing
|
||
|
}
|
||
|
drawRectInCanvas();
|
||
|
}
|
||
|
//mousedown connected functions -- END
|
||
|
|
||
|
function mouseMove(e) {
|
||
|
var pos = getMousePos(this,e);
|
||
|
mouseX = pos.x;
|
||
|
mouseY = pos.y;
|
||
|
if (dragWholeRect) {
|
||
|
e.preventDefault();
|
||
|
e.stopPropagation();
|
||
|
dx = mouseX - startX;
|
||
|
dy = mouseY - startY;
|
||
|
if ((rect.left+dx)>0 && (rect.left+dx+rect.width)<canvas.width){
|
||
|
rect.left += dx;
|
||
|
}
|
||
|
if ((rect.top+dy)>0 && (rect.top+dy+rect.height)<canvas.height){
|
||
|
rect.top += dy;
|
||
|
}
|
||
|
startX = mouseX;
|
||
|
startY = mouseY;
|
||
|
} else if (dragTL) {
|
||
|
e.preventDefault();
|
||
|
e.stopPropagation();
|
||
|
var newSide = (Math.abs(rect.left+rect.width - mouseX)+Math.abs(rect.height + rect.top - mouseY))/2;
|
||
|
if (newSide>150){
|
||
|
rect.left = rect.left + rect.width - newSide;
|
||
|
rect.top = rect.height + rect.top - newSide;
|
||
|
rect.width = rect.height = newSide;
|
||
|
}
|
||
|
} else if (dragTR) {
|
||
|
e.preventDefault();
|
||
|
e.stopPropagation();
|
||
|
var newSide = (Math.abs(mouseX-rect.left)+Math.abs(rect.height + rect.top - mouseY))/2;
|
||
|
if (newSide>150){
|
||
|
rect.top = rect.height + rect.top - newSide;
|
||
|
rect.width = rect.height = newSide;
|
||
|
}
|
||
|
} else if (dragBL) {
|
||
|
e.preventDefault();
|
||
|
e.stopPropagation();
|
||
|
var newSide = (Math.abs(rect.left+rect.width - mouseX)+Math.abs(rect.top - mouseY))/2;
|
||
|
if (newSide>150)
|
||
|
{
|
||
|
rect.left = rect.left + rect.width - newSide;
|
||
|
rect.width = rect.height = newSide;
|
||
|
}
|
||
|
} else if (dragBR) {
|
||
|
e.preventDefault();
|
||
|
e.stopPropagation();
|
||
|
var newSide = (Math.abs(rect.left - mouseX)+Math.abs(rect.top - mouseY))/2;
|
||
|
if (newSide>150)
|
||
|
{
|
||
|
rect.width = rect.height = newSide;
|
||
|
}
|
||
|
}
|
||
|
drawRectInCanvas();
|
||
|
}
|
||
|
|
||
|
function updateCurrentCanvasRect(){
|
||
|
current_canvas_rect.height = canvas.height
|
||
|
current_canvas_rect.width = canvas.width
|
||
|
current_canvas_rect.top = image.offsetTop
|
||
|
current_canvas_rect.left = image.offsetLeft
|
||
|
}
|
||
|
|
||
|
function repositionCanvas(){
|
||
|
//make canvas same as image, which may have changed size and position
|
||
|
canvas.height = image.height;
|
||
|
canvas.width = image.width;
|
||
|
canvas.style.top = image.offsetTop + "px";;
|
||
|
canvas.style.left = image.offsetLeft + "px";
|
||
|
//compute ratio comparing the NEW canvas rect with the OLD (current)
|
||
|
var ratio_w = canvas.width / current_canvas_rect.width;
|
||
|
var ratio_h = canvas.height / current_canvas_rect.height;
|
||
|
//update rect coordinates
|
||
|
rect.top = rect.top * ratio_h;
|
||
|
rect.left = rect.left * ratio_w;
|
||
|
rect.height = rect.height * ratio_h;
|
||
|
rect.width = rect.width * ratio_w;
|
||
|
updateCurrentCanvasRect();
|
||
|
drawRectInCanvas();
|
||
|
}
|
||
|
|
||
|
function initCanvas(){
|
||
|
canvas.height = image.height;
|
||
|
canvas.width = image.width;
|
||
|
canvas.style.top = image.offsetTop + "px";;
|
||
|
canvas.style.left = image.offsetLeft + "px";
|
||
|
updateCurrentCanvasRect();
|
||
|
}
|
||
|
|
||
|
function initRect(){
|
||
|
var ratio_w = canvas.width / effective_image_width;
|
||
|
var ratio_h = canvas.height / effective_image_height;
|
||
|
//BORDER OF SIZE 6!
|
||
|
rect.height = th_height*ratio_h-6
|
||
|
rect.width = th_width*ratio_w-6
|
||
|
rect.top = th_top*ratio_h+3
|
||
|
rect.left = th_left*ratio_w+3
|
||
|
}
|
||
|
|
||
|
function init(){
|
||
|
canvas.addEventListener('mousedown', mouseDown, false);
|
||
|
canvas.addEventListener('mouseup', mouseUp, false);
|
||
|
canvas.addEventListener('mousemove', mouseMove, false);
|
||
|
canvas.addEventListener('touchstart', mouseDown);
|
||
|
canvas.addEventListener('touchmove', mouseMove);
|
||
|
canvas.addEventListener('touchend', mouseUp);
|
||
|
initCanvas();
|
||
|
initRect();
|
||
|
drawRectInCanvas();
|
||
|
}
|
||
|
|
||
|
window.addEventListener('load',init)
|
||
|
window.addEventListener('resize',repositionCanvas)
|
||
|
|
||
|
//
|