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

JavaScript
849

Oh. Using the mouse scrollwheel to change the viewed value doesn’t change the lines on the screen.
That one’s easy to fix too.

850

This is why we test. It’s like cooking, where you taste frequently as you cook to check if anything else is needed.

2 Likes
851

We will want two event handlers, one for mousewheel which works in most web browsers, and the other for DOMMouseScroll because Firefox is special.

Duplicate lines 210 and 211, so that there are four addEventListener lines in there, and use "mousewheel" and "DOMMouseScroll" on two of the new addEventListener lines.

852 
    Array.from(document.querySelectorAll("#stroke input")).forEach(function(input) {
      input.addEventListener("click", strokeHandler);
      input.addEventListener("keyup", strokeHandler);
      
            input.addEventListener("click", strokeHandler);
      input.addEventListener("keyup", strokeHandler);
    });
853

You see how “click” is in there twice? On the second one, change “click” to “mousewheel”
Also on the second “keyup”, change it to “DOMMouseScroll”

854 

    Array.from(document.querySelectorAll("#stroke input")).forEach(function(input) {
      input.addEventListener("click", strokeHandler);
      input.addEventListener("click", strokeHandler);
      input.addEventListener("keyup", strokeHandler);
      input.addEventListener("keyup", strokeHandler);
    });
855 
    Array.from(document.querySelectorAll("#stroke input")).forEach(function(input) {
      input.addEventListener("click", strokeHandler);
      input.addEventListener("mousewheel", strokeHandler);
      input.addEventListener("keyup", strokeHandler);
      input.addEventListener("DOMMouseScroll", strokeHandler);
    });
856

Good one. To help keep similar things together, please move the “keyup” line below the others.

857 
    Array.from(document.querySelectorAll("#stroke input")).forEach(function(input) {
      input.addEventListener("click", strokeHandler);
      input.addEventListener("mousewheel", strokeHandler);
      input.addEventListener("DOMMouseScroll", strokeHandler);
       input.addEventListener("keyup", strokeHandler);
    });
858

Hit the Tidy button in jsfiddle and it’s a good time to test viewed, to be sure that there are no other problems with it.

859
860

You can now officially be really pleased with the progress that you’ve made here.

1 Like
861

active doesn’t work.

862

Yep, that’s next.

Tell you what though, if you add “mousewheel” and “DOMMouseScroll” to the other event listeners on line 205, you will then be able to scroll the mouse wheel to easily move the coordinates around.

863

they already work for them.

864

The numbers change, but I don’t see the lines move until you click on the number.
With “mousewheel” and “DOMMouseScroll” the lines will move as soon as the number changes when you scroll the mousewheel.

865

I wanted to do this:

A potential improvement from here is to use scripting to control the up and down arrows.

That way:

up/down change by 1
shift-up and shift-down can change by 0.1
and ctrl-up and ctrl-down can change by 10

I think this may be more accurate than mouse.

When you zoom in, you’re only moving it a tiny bit.

And with zoom, I was thinking about a slider instead.

866

That one will take some planning, as I need to develop a good working solution first before leading you through how to most easily achieve it. I’ll certainly work on it though.

867

We have two other things to consider. The active input, and using zoom inputs.

Which of those do you want to work on next?

868

active