I want to have a function that draws a box in the coordinates x and y.
I can't find a guide that doesn't answer more/less than what i want.
Thank's in advance.
I wrote this script some time ago so there may be ways to update it, but the idea is to get the position of the cursor onmousedown and attach an onmousemove listener. Each time you move the mouse you adjust th size of the box based on the position. Then on mouseup you remove the onmousemove listener.
https://jsfiddle.net/47nmp90w/
dragBox = (function() {
var _curX;
var _curY;
var _workingEl;
var _docEl = document.documentElement;
if (_docEl.scrollTop === 0) {
var testDocEl = _docEl.scrollTop;
_docEl.scrollTop++;
_docEl = testDocEl+1 === _docEl.scrollTop-- ? _docEl : document.body;
}
return {
drag: function(e) {
var evt = e ? e : window.event;
_width = Math.abs(_curX - evt.clientX);
_height = Math.abs(_curY - evt.clientY);
if (evt.shiftKey) {
var minDimension = Math.min(_width, _height) + 'px';
_workingEl.style.width = minDimension;
_workingEl.style.height = minDimension;
} else {
_workingEl.style.width = _width + 'px';
_workingEl.style.height = _height + 'px';
}
_workingEl.style.left = Math.min(_curX, evt.clientX) + _docEl.scrollLeft + 'px';
_workingEl.style.top = Math.min(_curY, evt.clientY) + _docEl.scrollTop + 'px';
},
draw: function(e) {
var evt = e ? e : window.event;
if (evt.which === 1) {
_curX = evt.clientX;
_curY = evt.clientY;
_workingEl = document.createElement('div');
_workingEl.className = 'drawing';
document.body.appendChild(_workingEl);
window.onmousemove = dragBox.drag;
window.onmouseup = function() {
window.onmousemove = null;
_workingEl.className = 'done';
_workingEl = false;
}
}
}
};
})();
window.onmousedown = dragBox.draw;
Edit
Here is how you would create a box with a set a data. You just set height and width styles, then give it a left position equal to your x coordinate and a top position of your y coordinate.
https://jsfiddle.net/RDay/47nmp90w/4/
var createButton = document.getElementById('create');
var xPosInput = document.getElementById('x-pos');
var yPosInput = document.getElementById('y-pos');
var widthInput = document.getElementById('width');
var heightInput = document.getElementById('height');
var target = document.getElementById('target');
createButton.onclick = function() {
var xPos = xPosInput.value;
var yPos = yPosInput.value;
var width = widthInput.value;
var height = heightInput.value;
var box = document.createElement('div');
box.className = 'box';
box.style.left = xPos + 'px';
box.style.top = yPos + 'px';
box.style.width = width + 'px';
box.style.height = height + 'px';
box.style.left = xPos + 'px';
target.appendChild(box);
};
Related
Basically what I want to achieve is to drag some div within another container div. Inner div should stop when it reaches the boundaries of the container div. I managed to do the most parts. But the problem is that if I drag inner div slowly & carefully it stops where it is supposed to be on the edges, however if I drag it faster, it sometimes overflow the edges or stops way before the edges. What is the problem here? What should I do to fix this?
Here is full code
function mouseMove(e) {
e.preventDefault();
console.log("mouse moving");
if(isMouseDown > 0 && currentElement) {
mouseX = e.clientX;
mouseY = e.clientY;
var diffX = mouseX - lastMouseX;
var diffY = mouseY - lastMouseY;
if(diffX + lastElementX + elementWidth < rightLimit && diffX + lastElementX > leftLimit) {
lastElementX += diffX;
lastMouseX = mouseX;
}
if(diffY + lastElementY + elementHeight < bottomLimit && diffY + lastElementY > topLimit) {
lastElementY += diffY;
lastMouseY = mouseY;
}
setCurrentElementPosition(lastElementX, lastElementY);
}
}
Above code runs on mouse move event changing inner div's position.
Here's my solution for you, I've programmed video games before, and you run into this problem a lot.
You're checking if it'll go out, but not doing anything if it does! If it goes outside, you have to set it to the edge.
https://jsfiddle.net/7btv7oqy/3/
var lastElementX = 0; //last X position of element
var lastElementY = 0; //last Y position of element
var lastMouseX = 0; //last X position of mouse
var lastMouseY = 0;//last Y position of mouse
var mouseX = 0; //current mouse position X
var mouseY = 0; //current mouse position Y
var currentElement = null; //currently selected div
var elementWidth = 0;
var elementHeight = 0;
var container = null; //container div
var isMouseDown = 0; //if greater than zero, mouse is down
//limits of container div
var bottomLimit = 0;
var topLimit = 0;
var leftLimit = 0;
var rightLimit = 0;
function init() {
container = document.getElementsByClassName("container")[0];
topLimit = container.getBoundingClientRect().top;
bottomLimit = container.getBoundingClientRect().bottom;
leftLimit = container.getBoundingClientRect().left;
rightLimit = container.getBoundingClientRect().right;
document.addEventListener("mousedown", function mouseDown(e) {
e.preventDefault();
++isMouseDown;
document.addEventListener("mousemove", mouseMove);
setCurrentElement(getElementUnderMouse(e)); //set current element
currentElement.style.position = "absolute";
lastElementX = currentElement.getBoundingClientRect().left;
lastElementY = currentElement.getBoundingClientRect().top;
lastMouseX = e.clientX;
lastMouseY = e.clientY;
});
document.addEventListener("mouseup", function mouseUp(e) {
e.preventDefault();
--isMouseDown;
setCurrentElement(null);
document.removeEventListener("mousemove", mouseMove);
});
}
function mouseMove(e) {
e.preventDefault();
console.log("mouse moving");
// report(e);
if(isMouseDown > 0 && currentElement) {
mouseX = e.clientX;
mouseY = e.clientY;
var diffX = mouseX - lastMouseX;
var diffY = mouseY - lastMouseY;
if(diffX + lastElementX + elementWidth < rightLimit && diffX + lastElementX > leftLimit) {
lastElementX += diffX;
} else {
//without this, the location wouldn't update at all:
//check if it would go off the right edge, set to right edge
if (diffX + lastElementX + elementWidth >= rightLimit) {
lastElementX = rightLimit - elementWidth;
}
//check if it would go off the left edge, set to left edge
if(diffX + lastElementX <= leftLimit) {
lastElementX = leftLimit;
}
}
//this will always happen:
lastMouseX = mouseX;
if(diffY + lastElementY + elementHeight < bottomLimit && diffY + lastElementY > topLimit) {
lastElementY += diffY;
} else {
//without this, the location wouldn't update at all:
//check if it would go off the bottom edge, set to bottom edge
if(diffY + lastElementY + elementHeight >= bottomLimit) {
lastElementY = bottomLimit - elementHeight;
}
//check if it would go off the top edge, set to top edge
if(diffY + lastElementY <= topLimit) {
lastElementY = topLimit;
}
}
//this will always happen:
lastMouseY = mouseY;
setCurrentElementPosition(lastElementX, lastElementY);
}
}
function setCurrentElementPosition(left = null, top = null) {
if(currentElement) {
currentElement.style.top = top + 'px'
currentElement.style.left = left + 'px';
}
}
function setCurrentElement(element) {
currentElement = element;
if(element) {
elementWidth = currentElement.offsetWidth;
elementHeight = currentElement.offsetHeight;
} else {
elementWidth = 0;
elementHeight = 0;
}
}
function hasClass(element, cls) {
return ("" + element.className + "").indexOf("" + cls + "") > -1;
}
function getElementUnderMouse(e) {
var x = e.clientX;
var y = e.clientY;
return document.elementFromPoint(x, y);
}
function report(e) {
console.log("isMouseDown: " + isMouseDown);
console.log("mouseX: " + e.clientX);
console.log("mouseY: " + e.clientY);
console.log("currentElement: " + currentElement);
console.log("currentElement top: " + currentElement.getBoundingClientRect().top);
console.log("currentElement bottom: " + currentElement.getBoundingClientRect().bottom);
console.log("container top: " + container.getBoundingClientRect().top);
console.log("container bottom: " + container.getBoundingClientRect().bottom);
}
init();
EDIT: Not sure why it's missing by one pixel at the right and bottom, you'll have to do some investigation on that front. Seems like it's not taking into consideration the border, despite you using offsetWidth. Good luck!
Here's my take; I've decoupled the element's movement from diffX/diffY:
https://jsfiddle.net/ttyrtjez/
// in onmousedown
offsetX = e.clientX - lastElementX;
offsetY = e.clientY - lastElementY;
// in onmousemove
var newElementX = mouseX - offsetX;
var newElementY = mouseY - offsetY;
if (newElementX + elementWidth >= rightLimit - 1) newElementX = rightLimit - elementWidth - 2;
if (newElementX < leftLimit) newElementX = leftLimit;
if (newElementY + elementHeight >= bottomLimit - 1) newElementY = bottomLimit - elementHeight - 2;
if (newElementY < topLimit) newElementY = topLimit;
setCurrentElementPosition(newElementX, newElementY);
Trying to apply rotation, move and resize using mouse on SVG element. Here you can test this.
Currently I worked on South control, Center control and Rotate control.
Rotation works perfectly fine, I can rotate, stop and again rotate. But after I move the element by dragging center point, the rotation flickers first time and rotation starting point is different. I belive this is because center position is changed after translate. I tried recalculating center position but it did not work.
And scaling is moving the element instead of increasing the size.
Please help me on this. I am missing some adjustments here.
Note: First you have draw some path with mouse to get controls on it.
var svg = document.querySelector('.container');
var svgns = 'http://www.w3.org/2000/svg';
var path = document.createElementNS(svgns, 'path');
svg.appendChild(path);
var points = [];
var Resizer_Instance = null;
var boundingBox = svg.getBoundingClientRect();
var toSVGPath = function(points) {
var SVGPath = '';
for (var i = 0; i < points.length; i++) {
var prefix = (i == 0) ? 'M' : 'L';
SVGPath += prefix + points[i].x + ' ' + points[i].y + ' ';
}
return SVGPath;
};
var create_mousedown = false;
var createStart = function(event) {
create_mousedown = true;
};
var creating = function(event) {
if (create_mousedown) {
var point = svg.createSVGPoint();
point.x = event.clientX - boundingBox.left;
point.y = event.clientY - boundingBox.top;
var t = point.matrixTransform(svg.getScreenCTM().inverse());
points.push(t);
path.setAttributeNS(null, 'd', toSVGPath(points));
}
};
var createEnd = function(event) {
create_mousedown = true;
svg.removeEventListener('mousedown', createStart);
svg.removeEventListener('mousemove', creating);
svg.removeEventListener('mouseup', createEnd);
setTimeout(function functionName() {
Resizer_Instance = new Resizer(path, svg);
}, 500);
};
svg.addEventListener('mousedown', createStart);
svg.addEventListener('mousemove', creating);
svg.addEventListener('mouseup', createEnd);
var Resizer = (function() {
function Resizer(element) {
var that = this;
that.element = element;
createSelector.call(that);
document.addEventListener('mousemove', dragging);
document.addEventListener('mouseup', dragend);
}
var RAD2DEG = 180 / Math.PI;
function angleBetweenPoints(p1, p2) {
var angle = null;
if (p1.x == p2.x && p1.y == p2.y)
angle = Math.PI / 2;
else
angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
return (angle * RAD2DEG) + -90;
}
function controlPositions(el) {
var pt = svg.createSVGPoint();
var bbox = el.getBoundingClientRect();
var matrix = el.getScreenCTM().inverse();
var halfWidth = bbox.width / 2;
var halfHeight = bbox.height / 2;
var placements = {};
pt.x = bbox.left;
pt.y = bbox.top;
placements['nw'] = pt.matrixTransform(matrix);
pt.x += halfWidth;
placements['n'] = pt.matrixTransform(matrix);
pt.x += halfWidth;
placements['ne'] = pt.matrixTransform(matrix);
pt.y += halfHeight;
placements['e'] = pt.matrixTransform(matrix);
pt.y += halfHeight;
placements['se'] = pt.matrixTransform(svg.getScreenCTM().inverse());
pt.x -= halfWidth;
placements['s'] = pt.matrixTransform(matrix);
pt.x -= halfWidth;
placements['sw'] = pt.matrixTransform(matrix);
pt.y -= halfHeight;
placements['w'] = pt.matrixTransform(matrix);
pt.x += halfWidth;
placements['center'] = pt.matrixTransform(matrix);
pt.y -= (halfHeight + 30);
placements['rot'] = pt.matrixTransform(matrix);
return placements;
}
var dragging_element = null;
var dragstart = function(event) {
var box = this;
var context = box.context;
var rootContext = context.rootContext;
rootContext.current_handle_inaction = context.direction;
dragging_element = box;
};
var dragging = function(event) {
if (!dragging_element) return;
var box = dragging_element;
var context = box.context;
var rootContext = context.rootContext;
var currentHandle = rootContext.current_handle_inaction;
var control_points = rootContext.control_points;
if (currentHandle === context.direction) {
var point = svg.createSVGPoint();
point.x = event.clientX;
point.y = event.clientY;
var element = rootContext.element;
var transformed = point.matrixTransform(svg.getScreenCTM().inverse());
var centerPosition = context.center;
rootContext.angle = rootContext.angle || 0;
rootContext.hMove = rootContext.hMove || 0;
rootContext.vMove = rootContext.vMove || 0;
rootContext.scaleX = rootContext.scaleX || 1;
rootContext.scaleY = rootContext.scaleY || 1;
switch (currentHandle) {
case "rot":
rootContext.angle = angleBetweenPoints(transformed, centerPosition);
break;
case "center":
rootContext.hMove = transformed.x - centerPosition.x;
rootContext.vMove = transformed.y - centerPosition.y;
break;
case "s":
var startPos = control_points[currentHandle];
var vMove = transformed.y - startPos.y;
rootContext.scaleY += (vMove > 0 ? -1 : 1) * 0.001;
break;
}
var move_transform = "translate(" + rootContext.hMove + " " + rootContext.vMove + ")";
var rotate_transform = "rotate(" + rootContext.angle + ", " + centerPosition.x + ", " + centerPosition.y + ")";
var scale_transform = "scale(" + rootContext.scaleX + ", " + rootContext.scaleY + ")";
var transform = [move_transform, rotate_transform, scale_transform].join(' ');
rootContext.element.setAttribute('transform', transform);
rootContext.controlGroup.setAttribute('transform', transform);
}
};
var dragend = function() {
if (!dragging_element) return;
var box = dragging_element;
var context = box.context;
var rootContext = context.rootContext;
delete rootContext.current_handle_inaction;
// createSelector.call(rootContext);
dragging_element = null;
};
var adjustPositions = function() {
var that = this;
var control_points = that.control_points;
var controlGroup = that.controlGroup;
var point = svg.createSVGPoint();
for (var direction in control_points) {
var dP = control_points[direction];
point.x = dP.x;
point.y = dP.y;
debugger;
control_points[direction] = point.matrixTransform(controlGroup.getScreenCTM().inverse());
}
return control_points;
};
var Deg2Rad = 0.017453292519943295;
var createSelector = function() {
var that = this;
var points = that.control_points;
if (points) {
points = adjustPositions.call(that);
} else {
points = controlPositions(that.element, svg);
}
that.control_points = points;
var existingBoxes = {};
var controlGroup = that.controlGroup;
if (!controlGroup) {
controlGroup = document.createElementNS(svgns, 'g');
that.controlGroup = controlGroup;
svg.appendChild(controlGroup);
}
that.control_boxes = that.control_boxes || {};
var line_name = "connecting-line",
line_element = that.control_boxes['connecting-line'];
var line_route = ["nw", "n", "rot", 'n', "ne", "e", "se", "s", "sw", "w", "nw"];
if (!line_element) {
line_element = document.createElementNS(svgns, 'path');
line_element.style.cssText = "fill: none; stroke: #f41542; opacity: 0.5";
that.control_boxes[line_name] = line_element;
controlGroup.appendChild(line_element);
var pathString = "";
line_route.forEach(function(direction) {
var point = points[direction];
var command = pathString.length === 0 ? "M" : " L ";
pathString += (command + point.x + " " + point.y);
});
line_element.setAttribute('d', pathString);
}
Object.keys(points).forEach(function(direction) {
var point = points[direction];
var box = that.control_boxes[direction];
if (!box) {
box = document.createElementNS(svgns, 'circle');
box.style.cssText = "fill: #5AABAB";
that.control_boxes[direction] = box;
box.setAttributeNS(null, 'r', 3);
box.setAttribute('handle', direction);
box.addEventListener('mousedown', dragstart.bind(box));
controlGroup.appendChild(box);
}
box.setAttributeNS(null, 'cx', point.x);
box.setAttributeNS(null, 'cy', point.y);
box.context = {
point: point,
direction: direction,
rootContext: that,
center: points.center
};
});
};
var prototype = {
constructor: Resizer
};
Resizer.prototype = prototype;
return Resizer;
})();
path {
fill: none;
stroke: #42B6DF;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
<svg class="container" version="1.1" baseProfile="full" style="position:absolute;left:0;top:0;height:100%;width:100%;-ms-transform:scale(1,1);transform:scale(1,1);-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);-ms-transform-origin:0, 0;-webkit-transform-origin:0, 0;-moz-transform-origin:0, 0;-o-transform-origin:0, 0;transform-origin:0, 0"
viewBox="-220.38356461849224 6442.3347962008365 454.7376658611161 114.54981723871151"></svg>
You can't easily handle all three transform operations (translate, scale and rotate) with just those three transform functions alone. You actually should use four functions.
You should remember the original centre point of the element. Let's call this ocx and ocy. Then do the following:
translate the original centre point to the origin
perform the scale
perform the rotation
translate the centre back to the new (current) centre position.
So the transform string would look something like this:
transform="translate(ncx,ncy) rotate(rot) scale(sx,sy) translate(-ocx,-ocy)"
This way you can keep all the operations isolated, and you don't need to alter the others when one changes.
You are currently calculating angle in relation to the initial center of the figure (the one when you have just drawn it). This is wrong - you need to calculate angle in relation to the center of the figure after previous move.
Fiddle
I've stripped the parts that I didn't change.
var dragging = function(event) {
...
if (currentHandle === context.direction) {
...
var initialCenterPosition = context.center,
// use the coordinates saved after last move or
// initial coordinates if there are none saved
previousCenterPosition = rootContext.previousCenterPosition || initialCenterPosition;
...
switch (currentHandle) {
case "rot":
rootContext.angle = angleBetweenPoints(transformed, previousCenterPosition);
break;
case "center":
rootContext.hMove = transformed.x - initialCenterPosition.x;
rootContext.vMove = transformed.y - initialCenterPosition.y;
// remember the new center coordinates
rootContext.previousCenterPosition = {
x: transformed.x,
y: transformed.y
};
break;
case "s":
...
}
var move_transform = "translate(" + rootContext.hMove + " " + rootContext.vMove + ")";
var rotate_transform = "rotate(" + rootContext.angle + ", " + initialCenterPosition.x + ", " + initialCenterPosition.y + ")";
var scale_transform = "scale(" + rootContext.scaleX + ", " + rootContext.scaleY + ")";
...
}
}
I'm trying to use an image upload/cropping plugin simple cropper. I have it working fine but I'm dynamically inserting elements with the class .cropme that aren't getting the event binding. I've changed most of the click events to use .on() instead of .click(). Is there something I'm missing?
(function($) {
$.fn.simpleCropper = function () {
var image_dimension_x = 600;
var image_dimension_y = 600;
var scaled_width = 0;
var scaled_height = 0;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var current_image = null;
var aspX = 1;
var aspY = 1;
var file_display_area = null;
var ias = null;
var jcrop_api;
var bottom_html = "<input type='file' id='fileInput' name='files[]'/><canvas id='myCanvas' style='display:none;'></canvas><div id='modal'></div><div id='preview'><div class='buttons'><div class='cancel'></div><div class='ok'></div></div></div>";
$('body').append(bottom_html);
//add click to element
this.on('click', function () {
aspX = $(this).width();
aspY = $(this).height();
file_display_area = $(this);
$('#fileInput').click();
});
$(document).on('ready', function () {
//capture selected filename
$('#fileInput').on('change', function (click) {
imageUpload($('#preview').get(0));
// Reset input value
$(this).val("");
});
//ok listener
$('.ok').on('click', function () {
preview();
$('#preview').delay(100).hide();
$('#modal').hide();
jcrop_api.destroy();
reset();
});
//cancel listener
$('.cancel').on('click', function (event) {
$('#preview').delay(100).hide();
$('#modal').hide();
jcrop_api.destroy();
reset();
});
});
function reset() {
scaled_width = 0;
scaled_height = 0;
x1 = 0;
y1 = 0;
x2 = 0;
y2 = 0;
current_image = null;
aspX = 1;
aspY = 1;
file_display_area = null;
}
function imageUpload(dropbox) {
var file = $("#fileInput").get(0).files[0];
//var file = document.getElementById('fileInput').files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function (e) {
// Clear the current image.
$('#photo').remove();
// Create a new image with image crop functionality
current_image = new Image();
current_image.src = reader.result;
current_image.id = "photo";
current_image.style['maxWidth'] = image_dimension_x + 'px';
current_image.style['maxHeight'] = image_dimension_y + 'px';
current_image.onload = function () {
// Calculate scaled image dimensions
if (current_image.width > image_dimension_x || current_image.height > image_dimension_y) {
if (current_image.width > current_image.height) {
scaled_width = image_dimension_x;
scaled_height = image_dimension_x * current_image.height / current_image.width;
}
if (current_image.width < current_image.height) {
scaled_height = image_dimension_y;
scaled_width = image_dimension_y * current_image.width / current_image.height;
}
if (current_image.width == current_image.height) {
scaled_width = image_dimension_x;
scaled_height = image_dimension_y;
}
}
else {
scaled_width = current_image.width;
scaled_height = current_image.height;
}
// Position the modal div to the center of the screen
$('#modal').css('display', 'block');
var window_width = $(window).width() / 2 - scaled_width / 2 + "px";
var window_height = $(window).height() / 2 - scaled_height / 2 + "px";
// Show image in modal view
$("#preview").css("top", window_height);
$("#preview").css("left", window_width);
$('#preview').show(500);
// Calculate selection rect
var selection_width = 0;
var selection_height = 0;
var max_x = Math.floor(scaled_height * aspX / aspY);
var max_y = Math.floor(scaled_width * aspY / aspX);
if (max_x > scaled_width) {
selection_width = scaled_width;
selection_height = max_y;
}
else {
selection_width = max_x;
selection_height = scaled_height;
}
ias = $(this).Jcrop({
onSelect: showCoords,
onChange: showCoords,
bgColor: '#747474',
bgOpacity: .4,
aspectRatio: aspX / aspY,
setSelect: [0, 0, selection_width, selection_height]
}, function () {
jcrop_api = this;
});
};
// Add image to dropbox element
dropbox.appendChild(current_image);
};
reader.readAsDataURL(file);
} else {
dropbox.innerHTML = "File not supported!";
}
}
function showCoords(c) {
x1 = c.x;
y1 = c.y;
x2 = c.x2;
y2 = c.y2;
}
function preview() {
// Set canvas
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// Delete previous image on canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// Set selection width and height
var sw = x2 - x1;
var sh = y2 - y1;
// Set image original width and height
var imgWidth = current_image.naturalWidth;
var imgHeight = current_image.naturalHeight;
// Set selection koeficient
var kw = imgWidth / $("#preview").width();
var kh = imgHeight / $("#preview").height();
// Set canvas width and height and draw selection on it
canvas.width = aspX;
canvas.height = aspY;
context.drawImage(current_image,(x1 * kw),(y1 * kh),(sw * kw),(sh * kh), 0, 0, aspX, aspY);
// Convert canvas image to normal img
var dataUrl = canvas.toDataURL();
var imageFoo = document.createElement('img');
imageFoo.src = dataUrl;
// Append it to the body element
$('#preview').delay(100).hide();
$('#modal').hide();
file_display_area.html('');
file_display_area.append(imageFoo);
}
$(window).resize(function () {
// Position the modal div to the center of the screen
var window_width = $(window).width() / 2 - scaled_width / 2 + "px";
var window_height = $(window).height() / 2 - scaled_height / 2 + "px";
// Show image in modal view
$("#preview").css("top", window_height);
$("#preview").css("left", window_width);
});
};
}(jQuery));
I need to clean my code up but this is what I changed to make this work:
this.on('click', function () {
aspX = $(this).width();
aspY = $(this).height();
file_display_area = $(this);
$('#fileInput').click();
});
to
$('body').on('click', '.cropme', function () {
aspX = $(this).width();
aspY = $(this).height();
file_display_area = $(this);
$('#fileInput').click();
});
I want to add 4 text boxes which will give me the coordinates of a rectangle and if I manually edit the coordinates it should change /alter the rectangle as well.
Please tell me how to proceed with this solution.
In my example if you click ROI it will draw a rectangle I want the upper and lower X and Y coordinates of the same.
the working fiddle is http://jsfiddle.net/qf6Ub/2/
// references to canvas and context
var oImageBuffer = document.createElement('img');
var oCanvas = document.getElementById("SetupImageCanvas");
var o2DContext = oCanvas.getContext("2d");
// set default context states
o2DContext.lineWidth = 1;
o2DContext.translate(0.50, 0.50); // anti-aliasing trick for sharper lines
// vars to save user drawings
var layers = [];
var currentColor = "black";
// vars for dragging
var bDragging = false;
var startX, startY;
// vars for user-selected status
var $roiCheckbox = document.getElementById("btnROI");
var $layersCheckbox = document.getElementById("btnLAYER");
var $patches = document.getElementById('txtPatchCount');
var $mouse = document.getElementById("MouseCoords");
var roiIsChecked = false;
var layersIsChecked = false;
var patchCount = 0;
// listen for mouse events
oCanvas.addEventListener('mousedown', MouseDownEvent, false);
oCanvas.addEventListener('mouseup', MouseUpEvent, false);
oCanvas.addEventListener('mousemove', MouseMoveEvent, false);
oCanvas.addEventListener('mouseout', MouseOutEvent, false);
$("#txtPatchCount").keyup(function () {
getStatus();
// clear the canvas
o2DContext.clearRect(0, 0, oCanvas.width, oCanvas.height);
// redraw all previously saved line-pairs and roi
for (var i = 0; i < layers.length; i++) {
var layer = layers[i];
if (layer.patchCount > 0) {
layer.patchCount = patchCount;
}
draw(layer);
}
});
// mouse event handlers
function MouseDownEvent(e) {
e.preventDefault();
startX = e.clientX - this.offsetLeft;
startY = e.clientY - this.offsetTop;
currentColor = randomColor();
getStatus();
bDragging = true;
}
function MouseUpEvent(e) {
if (!bDragging) {
return;
}
e.preventDefault();
bDragging = false;
mouseX = e.clientX - this.offsetLeft;
mouseY = e.clientY - this.offsetTop;
layers.push({
x1: startX,
y1: startY,
x2: mouseX,
y2: mouseY,
color: currentColor,
drawLayer: layersIsChecked,
patchCount: patchCount,
});
}
function MouseOutEvent(e) {
MouseUpEvent(e);
}
function MouseMoveEvent(e) {
if (!bDragging) {
return;
}
var mouseX = e.clientX - this.offsetLeft;
var mouseY = e.clientY - this.offsetTop;
// clear the canvas
o2DContext.clearRect(0, 0, oCanvas.width, oCanvas.height);
// redraw all previously saved line-pairs and roi
for (var i = 0; i < layers.length; i++) {
draw(layers[i]);
}
// create a temporary layer+roi object
var tempLayer = {
x1: startX,
y1: startY,
x2: mouseX,
y2: mouseY,
color: currentColor,
drawLayer: layersIsChecked,
patchCount: patchCount,
};
// draw the temporary layer+roi object
draw(tempLayer);
// Display the current mouse coordinates.
$mouse.innerHTML = "(" + mouseX + "," + mouseY + ")" + patchCount;
}
function draw(layer) {
if (layer.drawLayer) {
// set context state
o2DContext.lineWidth = 0.50;
o2DContext.strokeStyle = layer.color;
// draw parallel lines
hline(layer.y1);
hline(layer.y2);
}
if (layer.patchCount > 0) {
// set context state
o2DContext.lineWidth = 1.5;
o2DContext.strokeStyle = '#0F0';
// draw regions
o2DContext.strokeRect(layer.x1, layer.y1, (layer.x2 - layer.x1), (layer.y2 - layer.y1));
var w = layer.x2 - layer.x1;
o2DContext.beginPath();
for (var i = 1; i < layer.patchCount; i++) {
var x = layer.x1 + i * w / layer.patchCount;
o2DContext.moveTo(x, layer.y1);
o2DContext.lineTo(x, layer.y2);
}
o2DContext.stroke();
}
}
function getStatus() {
roiIsChecked = $roiCheckbox.checked;
layersIsChecked = $layersCheckbox.checked;
patchCount = $patches.value;
if (!roiIsChecked || !patchCount) {
patchCount = 0;
}
}
function randomColor() {
return ('#' + Math.floor(Math.random() * 16777215).toString(16));
}
function hline(y) {
o2DContext.beginPath();
o2DContext.moveTo(0, y);
o2DContext.lineTo(oCanvas.width, y);
o2DContext.stroke();
}
document.getElementById("MouseCoords").innerHTML = "(" + x + "," + y + "); "
+"("+ oPixel.x + "," + oPixel.y + "); "
+"("+ oCanvasRect.left + "," + oCanvasRect.top + ")";
}
Ok, I went back to the drawing board and came up with this FIDDLE.
It provides the dimensions of the div and its location from the top and left of the container.
You can calculate the exact coordinates from those numbers.
JS
var divwidth = $('.coord').width();
var divheight = $('.coord').height();
var pos = $('.coord').offset();
$('#divdimensions').html(divwidth + ',' + divheight);
$('#divposition').html( pos.left + ',' + pos.top );
I am using the following function to drag a div by a handle:
function enableDragging(ele) {
var dragging = dragging || false,
x, y, Ox, Oy,
current;
enableDragging.z = enableDragging.z || 1;
var grabber = document.getElementById("wrapId");
grabber.onmousedown = function (ev) {
ev = ev || window.event;
var target = ev.target || ev.srcElement;
current = target.parentNode;
dragging = true;
x = ev.clientX;
y = ev.clientY;
Ox = current.offsetLeft;
Oy = current.offsetTop;
current.style.zIndex = ++enableDragging.z;
document.onmousemove = function (ev) {
ev = ev || window.event;
pauseEvent(ev);
if (dragging == true) {
var Sx = ev.clientX - x + Ox,
Sy = ev.clientY - y + Oy;
current.style.left = Math.max(Sx, Math.min(document.body.offsetWidth - Sx, 0)) + "px";
current.style.top = Math.max(Sy, Math.min(document.body.offsetHeight - Sy, 0)) + "px";
document.body.focus();
document.onselectstart = function () {
return false;
};
ev.ondragstart = function () {
return false;
};
document.body.style.MozUserSelect = "none";
document.body.style.cursor = "default";
return false;
}
}
document.ondragstart = function () {
return false;
}
document.onmouseup = function (ev) {
ev = ev || window.event;
dragging && (dragging = false);
if (ev.preventDefault) {
ev.preventDefault();
} else {
e.cancelBubble = true;
e.returnValue = false;
}
document.body.style.MozUserSelect = "text";
document.body.style.cursor = "default";
//toggleEnableSelectStart(true);
return false;
}
};
}
I am trying to set boundaries to that the div cannot be dragged outside of the bounds of the actual browser window.
The above function accomplished 50% of this, it wont let the user drag the div outside of the top left and left bounds. However it left the user drag it outside bottom and right..
Any ideas how to fix this?
Take the minimum between the value you had calculated with the width/ height boundaries of the window minus the width of/height of the div:
current.style.left = Math.min(Math.max(Sx, Math.min(document.body.offsetWidth - Sx, 0)), document.body.offsetWidth - current.offsetWidth) + "px";
current.style.top = Math.min(Math.max(Sy, Math.min(document.body.offsetHeight - Sy, 0)), document.body.offsetHeight - current.offsetHeight) + "px";
edit:
Something along these lines (mind, this is quickly written, not in the same format as yours!)
http://jsfiddle.net/WKLa7/1/