Get x1 y1 x2 y2 Coordinates of a line drawn on an Image

JavaScript
1

Is there any such thing where I can put a dot here and then put a dot there, and the coordinates of the line will appear on the screen?

Either that or something where I can draw a line on the image, and then the coordinates would appear.

I found this, but will this help me at all?

Something that will give me these coordinates:

<line x1="" y1="" x2="" y2="" ></line>

As an example, but it doesn’t do what I’m looking for.

I have a feeling it exists, but I’m not looking for it the right way.

1 Like
2

I was just given this, but I have no idea what to do with it.

You’re looking for:

.getElementsByTagName() to get the element without an ID or class
getAttribute() to get the attribute once the element has been selected

This can be seen in the following:

var line = document.getElementsByTagName('line')[0];
console.log(line.getAttribute('y1'));

<line x1="10px" y1="20px" x2="30px" y2="40px"></line>

Note that .getElementsByTagName() returns a NodeList collection of objects, so you need to explicitly state that you’re looking for the first instance by accessing the first index with [0].
https://developer.mozilla.org/en-US/docs/Web/API/NodeList

1 Like
3

If you just want the mouse coordinates, you can get them from the event object.

function clickHandler(evt) {
  // evt.x and evt.y contain the screen coordinates of the click
}
document.addEventListener("click", clickHandler, false);

The more important question is to ask why. Why do you want to draw lines on the image?

4

To help me do this.

Is there something that’s out there that I can use that will allow me to draw a line on an image, and then for it to give me the coordinates of the line?

1 Like
5

MS Paint will do that. Load the image in to MS Paint, and it will show you the coordinates for where you click.

6

It’ll give me this?

<line x1="" y1="" x2="" y2="" ></line>

Of any line I draw on there?

7

You will be able to easily get the x,y coords for anywhere on the image.

Making things easier, you can in a web browser have the coords for where you click, shown in the console.
Or, as I know that you hate the idea of using the console (correct me if I’m wrong), you can go to the extra effort to make your own on-screen results area and show the click information there instead.

If you want only line information to be shown, the x,y can be remembered by a script and when you release the mouse button, both that starting x,y and the ending x,y can be shown.

To help make the development of this easier, because there are several types of approaches that can be made, for what intended end results are you wanting this line coordinate information for?

1 Like
8

I need these, not just x y.

x1=“” y1=“” x2=“” y2=“”

9

These are all the numbers shown to me.

10

Go back and read what I said in post #7 because you can’t have properly read what I said.

11

Using </script> I can easily get all that information?

Is there a code that’s already available that I can use, or does one need to be made for this specific purpose?

12

I don’t know of any ready-made code to refer you to. You’re welcome to look around, but it’s likely to be faster to write it yourself.

13

Will this be easier to understand than the timer, or no?

or more difficult.

So, then, there’s a chance it might not work then?

14

How easy to understand? How well do you understand click event properties?

screenX Read only	long	The X coordinate of the mouse pointer in global (screen) coordinates.
screenY Read only	long	The Y coordinate of the mouse pointer in global (screen) coordinates.
clientX Read only	long	The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY Read only	long	The Y coordinate of the mouse pointer in local (DOM content) coordinates.
15

[quote=“asasass, post:13, topic:280229, full:true”]
Will this be easier to understand than the timer, or no?[/quote]

You were only about 15 minutes away from having completed the timer work, then you gave up on it. What a shame.

16

This is all new to me. But I’m a fast learner.

17

I would say that it’s about twice as difficult as recording the loading time of an image, and displaying the result.
Does that sound like a fair approximation, @Mittineague?

18

My test code is working and showing some values, such as:

<line x1="20" y1="132" x1="117" y1="133"></line>
<line x1="98" y1="54" x1="197" y1="108"></line>
<line x1="146" y1="73" x1="143" y1="188"></line>
<line x1="160" y1="155" x1="192" y1="206"></line>
<line x1="203" y1="177" x1="217" y1="198"></line>

I’m all ready to teach you how this is done.

19

ok. let’s do it.

20

I have the image here:

Let’s start drawing lines.