I am trying to get mouse pointer position on mousedown and mouseup event. There is a div named test and i want to get position when mousedown and mouseup happen within div area. And I am taking div as my surface so the mousedown and mouseup position should be related to div. I have a pdf inside that div so, the coordinates i get will help me to highlight the pdf.
I tried this, but its not working fine.
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while (element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
$("#test").mousedown(function(e){
var parentPosition = getPosition(e.currentTarget);
startX = e.clientX - parentPosition.x;
startY = (e.clientY - parentPosition.y)*2.5;
});
$("#test").mouseup(function(e){
var parentPosition = getPosition(e.currentTarget);
endX = e.clientX - parentPosition.x;
endY= (e.clientY - parentPosition.y)*2.5;
});
The coordinates of the mouse relative to the div are stored in the offsetX, offsetY properties of the event object
$("#someDiv").click(function(e){
var x = e.offsetX;
var y = e.offsetY;
});
So if you have a div with a width of 100 and a height of 50, and click exactly in the center of the div then
x = 50, y = 25
JSFiddle Demo
Related
I'm testing getting the mouse position in a canvas in Javascript.
I decided to try something: I wanted to draw a rectangle at the position the mouse clicked on, but when I click anywhere on my canvas, the rectangle does draw at the X position of the cursor, but not on the Y.
I then went to see what the problem was, so I made it so that the coordinates of the mouse on the canvas were visible, and I got interesting results.
In short: it's telling my cursor's Y position was 0, even though it wasn't at the top of the canvas:
ctx.canvas.addEventListener('mousemove', function(event) {
var mouseX = event.clientX - ctx.canvas.offsetLeft;
var mouseY = event.clientY - ctx.canvas.offsetTop;
var status = document.getElementById('status');
status.innerHTML = mouseX + ' | ' + mouseY;
});
ctx.canvas.addEventListener('click', function(event) {
var mouseX = event.clientX - ctx.canvas.offsetLeft;
var mouseY = event.clientY - ctx.canvas.offsetTop;
item.drawItem(mouseX, mouseY);
});
Can anyone tell me why is this happening?
Use canvas.getBoundingClientRect().left instead of ctx.canvas.offsetLeft and canvas.getBoundingClientRect().top instead of ctx.canvas.offsetTop. See if this works?
I want to move the image based on the coordinates from database.
I can already move the image (thing). But for example, i have x-coordinate as 293 and y-coordinate as 715, the image ends up moving to 293 and 715 BUT the image (thing) i'm moving is an arrow like
this
So i have to move the image but the upper left part of the image should be the one to locate the coordinates not the center part of it. Anyone who can help me with my problem? any help will be appreciated
here's my script so far,
<script>
function getClickPosition($valuex,$valuey) {
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var x1 = document.getElementById('valuex').value;
var y1 = document.getElementById('valuey').value;
var parentPosition = getPosition(x1.currentTarget);
var parentPosition = getPosition(y1.currentTarget);
var xPosition = x1 - parentPosition.x - (theThing.clientWidth / 2);
var yPosition = y1- parentPosition.y - (theThing.clientHeight / 2);
theThing.style.left = xPosition + "px";
theThing.style.top = yPosition + "px";
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while (element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
</script>
The position is relative to the top left corner by default. You have to manually offset it to get anything else. That's what the theThing.clientWidth /2 and theThing.clientHeight / 2 is doing in your code: moving the position up and left by half of the height/width. If you want to just use the top left position, replace this:
var xPosition = x1 - parentPosition.x - (theThing.clientWidth / 2);
var yPosition = y1 - parentPosition.y - (theThing.clientHeight / 2);
With this:
var xPosition = x1 - parentPosition.x;
var yPosition = y1 - parentPosition.y;
I'm attempting to take in mouse coordinates from a mouse listener but they are coming in undefined. The mouse listener is being added to the Canvas and the listener is triggering the onMouseMove function, however the event being passed doesn't seem to have any defined x or y coordinates for the mouse position.
I've tried the following variables: event.pageX, event.pageY, event.clientX, event.clientY, event.x, event.y
Any ideas on what I'm doing incorrectly to cause the mouse coordinates to come in undefined? Thanks for any help!
<script>
var boxes;
var canvas;
var context;
$(document).ready(function() {
canvas = document.getElementById("requirement_tree");
context = canvas.getContext("2d");
// Add mouse listener
canvas.addEventListener("mousemove", onMouseMove, false);
});
// Get the current position of the mouse within the provided canvas
function getMousePos(event) {
var rect = canvas.getBoundingClientRect();
if (event.pageX != undefined && event.pageY != undefined) {
x = event.pageX;
y = event.pageY;
} else {
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
console.log("X:" + x);
console.log("Y:" + y);
return {
X: x - rect.left,
Y: y - rect.top
};
}
function onMouseMove(event) {
var mousePos = getMousePos(canvas, event);
var message = 'Mouse position: ' + mousePos.X + ',' + mousePos.Y;
context.font = '10pt Arial'
context.fillStyle = 'black';
context.textAlign = 'left';
context.clearRect(0, 0, 200, 200);
context.fillText(message, 100, 100);
}
</script>
At least, error in handler for mouseMove event. Event object transmitted in second arguments of handler.
// ...
// Get the current position of the mouse within the provided canvas
function getMousePos(element, event) {
var rect = canvas.getBoundingClientRect();
// ...
I'm trying to make an editable textbox like those in powerpoint and other presentation editors.
This is my feeble attempt.
I'm having trouble with the initial rescaling. To be concise, the first instant when I adjust the drag handle, the box does not scale to the correct height and width.
Any idea why is that so?
element.find('span').bind('mousedown', function(event) {
console.log('resizing...');
event.preventDefault();
var domElement = element[0];
var rect = domElement.getBoundingClientRect();
startX = rect.left;
startY = rect.bottom;
console.log(startX + " " + startY);
$document.bind('mousemove', resize);
$document.bind('mouseup', mouseup2);
event.cancelBubble = true;
});
function resize(event) {
var height = event.screenY - startY;
var width = event.screenX - startX;
scope.$apply(function() {
scope.tb.height = height + 'px';
scope.tb.width = width + 'px';
});
}
I updated your fiddle implementing this:
tbW and tbH hold the current box size (inital 200px x 100px):
var tbW = 200,
tbH = 100;
scope.tb.width = tbW + 'px',
scope.tb.height = tbH + 'px';
On mousedown startX and startY are assigned to the current mouse postion
In the resize function the delta of the mouse movement is calculated and added to the width and height of your tbox:
tbH += event.screenY - startY;
startY = event.screenY;
tbW += event.screenX - startX;
startX = event.screenX;
scope.$apply(function () {
scope.tb.height = tbH + 'px';
scope.tb.width = tbW + 'px';
});
So ... I created canvas element with jquery:
var canvasElement = $("<canvas id='map' width='" + CANVAS_WIDTH + "' height='" + CANVAS_HEIGHT + "'></canvas");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');
And now i want to get mouse coordinates, but the next code doesn't work:
canvasElement.onmousemove = mousemove;
function mousemove(evt) {
var mouseX = evt.pageX - canvasElement.offsetLeft;
var mouseY = evt.pageY - canvasElement.offsetTop;
alert(mouseX+":"+mouseY);
}
canvasElement.offsetLeft is not work, evt.pageX too... Help !
Those properties aren't cross-browser.
I know of two solutions to get the canvas position :
the easy one : use jQuery offset
another one : use a custom and complex code :
if (!canvasElement.offsetX) {
// firefox
var obj = canvasElement;
var oX = obj.offsetLeft;var oY = obj.offsetTop;
while(obj.parentNode){
oX=oX+obj.parentNode.offsetLeft;
oY=oY+obj.parentNode.offsetTop;
if(obj==document.getElementsByTagName('body')[0]){break}
else{obj=obj.parentNode;}
}
canvas_position_x = oX;
canvas_position_y = oY;
} else {
// chrome
canvas_position_x = canvasElement.offsetX;
canvas_position_y = canvasElement.offsetY;
}
As there is a loop, you'd better store canvas_position_x and canvas_position_y and have them recomputed at each document resize instead of at each mousemove.
Demonstration
Live Demo
Its pretty easy actually without jQuery. Below is the important part from the fiddle. cX and cY are the coordinates of the clicked canvas.
function clicked(e) {
var cX = 0,
cY = 0;
if (event.pageX || event.pageY) {
cX = event.pageX;
cY = event.pageY;
}
else {
cX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
cY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
cX -= canvas.offsetLeft;
cY -= canvas.offsetTop;
ctx.fillRect(cX, cY, 2, 2);
}
Demo with mouse move