Get Coordinates of image on click - javascript

I have a set of divs which are dynamic, I somehow want them in a different order. So I'm using flex order to control the order of the divs. One of the div contains an image. By clicking on that image it should console the x & y coordinates of the click which is related to the image. I have made everything I want. But the problem is I'm getting the y coordinates in a negative number, I believe it is because of the order I have changed using flex.
Here's what I tried
The expected result: When I click on the border image top left position it should console the exact position of the click which is related to the image.

This is caused by your own calculations.
You can simplify the calculation using this function
GetMousePositionRelativeToTarget(e) {
// Get the target
const target = e.target;
// Get the bounding rectangle of target
const rect = target.getBoundingClientRect();
// Mouse position
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
console.log(x + ':' + y);
return [x, y];
}

Related

React-Native: Get X and Y coordinates of draggable Object using panResponder.panHandlers (nativeElement)

I am developing an app, which provides the design of Different shapes like Square and Circle, I have used the following Library
https://www.npmjs.com/package/react-native-draggable
At the time of creating my drawing view its working fine, but at the time of edit that drawing, I want to move Circle and Square from its previous saved position to its new position, but when I am trying to set my previous last position from the DB, I can't get perfect position of X and Y.
When I debug, I am getting touch position of the object, not the X and Y position of the object
this is my code :
I used draggable class for creating an object Draggable,
In my Component :
<Draggable
renderSize={68}
renderColor='rad'
x={80.80097961425781}
y={72.79156494140625}
renderText='B'
pressDrag={()=>alert('touched!!')}
pressDragRelease={({ nativeEvent }) => { console.log(nativeEvent);}}
reverse={false}
/>
Here is my Question:
1. How can I get X and Y from nativeElement,
'nativeElement` property are : nativeEvent
ChangedTouches - Array of all touch events that have changed since the last event
identifier - The ID of the touch
locationX - The X position of the touch, relative to the element
locationY - The Y position of the touch, relative to the element
pageX - The X position of the touch, relative to the root element
pageY - The Y position of the touch, relative to the root element
target - The node id of the element receiving the touch event
timestamp - A time identifier for the touch, useful for velocity calculation
touches - Array of all current touches on the screen
I used react-native-draggable in a project too. pageX, pageY are the coordinates of your actual touch, while locationX, locationY are the offset of your touch from the top-left of the object. You didn't specify how you're rendering the shapes, but for instance if you're rendering an image to drag, you can get the exact top-left coordinates by getting (pageX-locationX), (pageY-locationY). And you can pull them out of nativeEvent like this:
<Draggable
renderSize={68}
renderColor='rad'
x={80.80097961425781}
y={72.79156494140625}
renderText='B'
onDragRelease={(e) => {console.log("pageX, pageY = " + e.nativeEvent.pageX + ", " + e.nativeEvent.pageY);
console.log("locX, locY = " + e.nativeEvent.locationX + ", " + e.nativeEvent.locationY)}}>
reverse={false}
/>
Also, I changed pressDragRelease to onDragRelease; not sure if you wrapped onDragRelease in your own separate function or you have a different version or something, but in mine it's onDrag / onDragRelease. Hope that helps.
you can get the bounds of your Draggable in the next arguments of your callback.
<Draggable
...
onDragRelease={(e, gestureState, bounds) => { console.log(bounds); }}
/>

Is there a way of clicking an specific point/element in a canvas (with javascript, jquery or selenium)

How can I apply a click at a specific position in a canvas? (using coordinates seems the most logical to me, but can't find any way to do it, any other idea is welcomed). Note that I do not have access to the code that creates the canvas.
EDIT: Some clarification, the canvas has multiple elements being drawn that i can't select with jquery but need to click them. I could find their coordinates manually and do some calculations, but every time i try to pass a click or mouse event into that position is not being taken as a real mouse click (the button that should be clicked, is not).
How about trying
canvas.on('click', function(e) {
// calculate x y coordinates on canvas
var x = e.pageX - $(this).offset().left,
y = e.pageY - $(this).offset().top;
// implement collision detection via the coordinates the element you want to click (assuming you know where it is)
if (y > <elementY> && y < <elementY> + <elementHeight>
&& x > <elementX> && x < <elementX> + <elementWidth>) {
alert('found it');
}
});
I have no time testing that snippet. If you know the x and y coordinates of your elements within your canvas, that code might just do the trick.
What I tried to do with that snippet is to simulate a bounding box via elmentY and elementY + elementHeight as well as elementX and elementX + elementWidth. If you know all those values, you can simply check whether the x and y values of your click event fall in that said box.
Edit
If you want to trigger a click event at a certain position, define the clickEvent beforehand and set the pageX and pageY attributes.
var e = new jQuery.Event("click");
e.pageX = 10;
e.pageY = 10;
$(<canvas>).trigger(e);
You might have to include the offset of your canvas in the calculations as well.

Paint canvas not working properly

http://www.asifslab.com/reveal.js-master/Why%20does%20wind%20feel%20cold.html#/4
Why doesn't the drawing canvas work properly? The line drawn is away from the point clicked. However, if I use the canvas out of reveal.js it works perfectly. http://codepen.io/anon/pen/eEaKh
Also when the erase function is run, it leaves a white border outside. How do I fix these problems?
just change e.pageX to e.clientX and e.pageY to e.clientY because in your codepen account
canvas origin and page origin is almost at same place but in other it is not.
To calculate the mouse position you need to subtract the position of the canvas:
Here is one way of doing this (inside the event handler):
var rect = canvas.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;
Now your x and y will be relative to canvas.
Here's a copy/pasta of a small part of my paint app. Notice I'm using offsets of the canvas in my calculations. I also have a zoom function that scales the canvas, so taking into account that I added it to the calculation of the mouse cursor.
$('canvas').mousemove(function(e) {
// x and y are globals, x inits to null, mousedown sets x, mouseup returns x to null
if (x==null) return;
x = (100/$('#zoom').val())*(e.pageX - $(this).offset().left);
y = (100/$('#zoom').val())*(e.pageY - $(this).offset().top);
$('#debug').html(x+', '+y); // constantly update (x,y) position in a fixed div during debugging
});

How to get the exact mouse down coordinate? Why my code does not work?

I would like to show something at the mouse down place, I tried to use :
$('#my-graph').mousedown(function(evt){
// show object at:
var x= evt.screenX, y=evt.screenY;
//or show object at:
var x2=evt.pageX, y2=evt.pageY;
//code to render object at (x,y) and (x2,y2)
......
});
But neither of the above (x, y) and (x2,y2) place the rendered object at the mouse clicked place, and show the object some distance away from mouse down place, why?
I render the object with a position attributes, the position is relative to the #my-graph div, left up most corner of the div is supposed to be the origin point(0,0)
You seem to want offsetX and offsetY: http://jsfiddle.net/f52Gg/.
$("div").mousedown(function(e){
alert(e.offsetX + " " + e.offsetY);
});

HTML5/Canvas Mouse Position off when placed in actual Site

I'm capturing mouse position like this
mouse_move: function(e)
{
mousePos.x = e.pageX - vr.o.context.canvas.offsetLeft;
mousePos.y = e.pageY - vr.o.context.canvas.offsetTop;
},
and it has worked like a dream in all modern browsers while in development, Even tested Wrapping the <canvas/> in a basic dom structure to make sure mouse position adjusted...
obviously now I'm putting it in the actual site it's not working...
You can see here http://jondavidjohn.com/projects/
the mouse position ends up quite a ways south of the actual cursor, anything specifically that could be causing this?
SOLUTION
mouse_move: function(e)
{
mousePos.x = e.offsetX;
mousePos.y = e.offsetY;
},
COPIED FROM: http://simonsarris.com/blog/510-making-html5-canvas-useful
Getting mouse coordinates on Canvas
Getting good mouse coordinates is a little tricky on Canvas. You could use offsetX/Y and LayerX/Y, but LayerX/Y is deprecated in webkit (Chrome and Safari) and Firefox does not have offsetX/Y.
The most bulletproof way to get the correct mouse position is shown below. You have to walk up the tree adding the offsets together. Then you must add any padding or border to the offset. Finally, to fix coordinate problems when you have fixed-position elements on the page (like the wordpress admin bar or a stumbleupon bar) you must add the ’s offsetTop and offsetLeft.
Then you simply subtract that offset from the e.pageX/Y values and you’ll get perfect coordinates in almost every possible situation.
// Creates an object with x and y defined,
// set to the mouse position relative to the state's canvas
// If you wanna be super-correct this can be tricky,
// we have to worry about padding and borders
CanvasState.prototype.getMouse = function(e) {
var element = this.canvas, offsetX = 0, offsetY = 0, mx, my;
// Compute the total offset
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
// Add padding and border style widths to offset
// Also add the <html> offsets in case there's a position:fixed bar
offsetX += this.stylePaddingLeft + this.styleBorderLeft + this.htmlLeft;
offsetY += this.stylePaddingTop + this.styleBorderTop + this.htmlTop;
mx = e.pageX - offsetX;
my = e.pageY - offsetY;
// We return a simple javascript object (a hash) with x and y defined
return {x: mx, y: my};
}
Use e.offsetX and e.offsetY for now instead.
It actually gets more complicated when you introduce some other things, like margins and padding, but offsetX and offsetY will be much more accurate than what you've got to say the least.
I don't have my new "bulletproof-works-in-every-situation" mouse code on me right now, I can get that later for you if you think you'll need it.
edit: Derp! Thanks chopperdave for finally providing the code I forgot to add!

Categories

Resources