I am a beginner in Javascript/jQuery. I have a set of coordinates belonging to an area element and I am wondering if the following is possible: when I mouse over the area element, does jQuery have a method that would draw the rectangle defined by those coordinates? Or is there some library/plugin you know of that could do this?
I know I can't use the jQuery .show() method on an area element, but that is the effect I am looking for.
One way is to use the jQuery offset method to translate the event.pageX and event.pageY coordinates from the event into a mouse position relative to the parent. Here's an example:
$("body").hover(function(e){
var offset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
//You have your rectangle and the mouse position, Now you can check if mouse is in the area or not
//Do something...
});
Related
I am trying to get the coordinates of a div with JQuery. I am currently using this method:
$("#draw_area").click(function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
});
However, I realised that if I have html elements on top of the div "draw_area", it will give me different "y". I do not want that. What I want is to get the exact/relative coordinates of that particular div, and the coordinates are always the same regardless whether there are other elements
EDIT:
above the div or next to the div.
Can someone please tell me how I could achieve this? Any help will be appreciated. Thanks!
I think you're looking for .offset(), which gives you the position relative to the document, as opposed to .position(), which gives you the position relative to the offset parent.
$("#draw_area").click(function (e) {
var o = $(this).offset();
var x = o.left;
var y = o.top;
});
I have this code that let me draw rectangle on canvas:
https://jsfiddle.net/6u7bLkwc/4/
In order to draw a rectangle on the canvas, click on the image and then drag your mouse.
To reproduce my problem please follow this steps:
Draw a rectangle like mentionned in the top.
And then click on ADD TEXT button.
Now try to draw another rectangle, you will see that your cursor are not in the same way with the rectangle.
How to make my code work even if i add or remove any elements on the page dynamically?
I tried to do like this:
var shape = new Shape(mouseDownX - canvasOffset.left, mouseDownY - canvasOffset.top, mouseX - mouseDownX, mouseY - mouseDownY, color);
But didn't resolved it.
Something like updating new positions will solve it, but not have idea about how to process.
check the solution over here : https://jsfiddle.net/6u7bLkwc/9/
the problem is that you are not calculating the PageX and PageY relative to the canvas position, but instead to the whole page which is giving you wrong coordinates.
I have just changed these:
mouseDownX = e.pageX;
mouseDownY = e.pageY;
to this:
mouseDownX = e.pageX - this.offsetLeft;
mouseDownY = e.pageY - this.offsetTop;
UPDATE
For some other cases you should just use getBoundingClientRect() method on the canvas to get the element position relative to the viewport as the following jsfiddle shows sfiddle.net/dkboaq7p/2
// Get Element's relative position
var canvasPosition=document.getElementById("canvas").getBoundingClientRect();
mouseDownX = e.pageX - canvasPosition.left;
mouseDownY = e.pageY - canvasPosition.top;
I am trying to create a canvas that allows me to draw on it rectangles using mouse events. Very similar to the way selection works in windows, I want to be able to click down anywhere on my page, drag left/right/up/down, then once I release, a rectangle is drawn with the starting coordinates (x1 and y1) on mousedown and the ending coordinates (x2, y2) on mouseup.
I've been trying to create eventListeners bound to my canvas that return the starting and ending coordinates on mousedown and mouseup respectively, but my variables stay undefined.
My canvas spans the entire length of my window so no need to take into account relative positioning. Also the solution has to be implemented using purely Javascript, no JQuery allowed.
Thank you for your help!
UPDATE
Ignore most of what is underneath, re-reading your question, it seems like you have the theory nailed. Your problem is most likely the mousedown and mouseup function parameters are missing. Try the following;
document.getElementsByTagName('canvas')[0].addEventListener('mousedown', function(e){
// I THINK IT'S THE e ON THE LINE ABOVE THIS THAT YOU'RE MISSING.
// YOU CAN THEN ACCESS THE POSITION OF THE MOUSE USING;
mouse.x = e.pageX;
mouse.Y = e.pageY;
})
I won't write the code for you, but I can give you theory.
Store your mouse x & y variables in an object such as mouse = {}.
Add an event listener to the canvas for mouse down (click) and store the e.pageX and e.pageY in mouse.firstX and mouse.firstY. Use something like:
document.getElementsByTagName('canvas')[0].addEventListener('mousedown', function(e){
mouse.firstX = e.pageX;
mouse.firstY = e.pageY;
})
Create a second event listener for the canvas for mouseup and store this set of e.pageX and e.pageY in mouse.secondX and mouse.secondY.
Calculate the difference between firstX and secondX, firstY and secondY to work out big your rectangle sound be.
var width = mouse.firstX + mouse.secondX // rect width
var height = mouse.firstY + mouse.secondY // rect height
Then, using these calculations, draw a rectangle on your canvas using firstX and firstY as the position parameters.
I hope this is relatively clear and helpful for you. If not, this might help;
http://simonsarris.com/blog/140-canvas-moving-selectable-shapes
I would like to have a function run when the mouse is X distance away from an element.
I assume mousemove event should be moved, but since the element may not always be in the same place I'm not sure how to get the mouse position relative to the element?
Does anyone have an example of something similar?
var mX, mY, distance;
$element = $('#YourElementID');
function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}
$(document).mousemove(function(e) {
mX = e.pageX;
mY = e.pageY;
distance = calculateDistance($element, mX, mY);
// do your stuff with distance
});
You will need to bind to the mousemove event, store the coordinates of your elements corners in a global variable and keep checking at every pixel the mouse moved until the vector between current mouse position and your objects coordinates is of length X. that would then be the moment to trigger your custom event which you bound some function to.
i am unaware of a plugin that already does that, so make sure to post a link to the plugin you write here. :)
I'm moving the mouse over a div and I want to know the mouse coordinates with respect to the div origin. (upper left corner)
I expected the mousemove event to contain the relative (client?) coordinates of the mouse, but apparently it doesn't.
In firefox for instance, none of the event properties* contain relative coordinates
Am I missing something?
*clientX,Y - pageX,Y - screenX, y
You're not missing anything, but you'll need to calculate the relative coordinates yourself.
Something along these lines should do it (substitute jquery with w/e code you want to use to get the position):
var pos = $('div').position();
var relX = event.pageX - pos.left;
var relY = event.pageY - pos.top;
Also see: JS: mouse coordinates relative to an element which covers some of the details on supporting other browsers (though if you're using jquery that may not be needed).