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

JavaScript
989

What problems are there.

  • When a line is active, the active stroke is not shown until you click on active.
  • Clicking on the line input removes the active stroke.
  • Clicking on a different line doesn’t remove the old one, so that you have multiple active ones showing.

Those are all easy things to fix, that will result in a fully working viewed and active system.

990

is that a lot to fix?

991

So, this should take, 20 min max to fix all of that?

992

The first problem has us wanting to run the applyStrokes() function when the dropdown item is selected.
The change function at line 163 is what gets triggered when an item is selected. The end of that change function is at line 194, and we find some code there that can be removed.

The code from 191-193 copies the SVG element stroke-width to the input field. That was to fix a problem that we later on fixed by making a change to the fieldsToClear array, so the code on lines 191-193 can now be deleted.

Where you deleted those lines, add a call to the applyStrokes(); function. That will make sure that the selected item gets the active width applied to it.

applyStrokes();

So in summary there are two changes to make that are best expressed as: replace lines 191-193 with a call to the applyStrokes() function.

993

Replace lines 191-193 with a call to the applyStrokes() function as instructed above, and the first problem is fixed.

994 
      }
applyStrokes();
    });
995
996

And test it. Does selecting a line trigger the active width on it? Then problem #1 is fixed.

997

no…

998

I’ve just been notified that there might be a 1000 post limit. Yes, I have a halo for telling you that.
If that becomes a problem we’ll continue on from a new topic.

What happens to the line width when you test it by selecting a line from the dropdown box?

999

it doesn’t change. it stays as is.

1000

Load up the https://jsfiddle.net/5ek6drwk/1/ page, dropdown the select box, and choose the Orange line.

Problem #1 is fixed when selecting that orange line results in the orange line being 6 pixels wide.
Does that happen for you?

1001

1002

Good, that looks to be working then. We can now move on to problem #2.

1003

Problem #2 is best experienced by selecting a line, and then clicking back and forth between Active and one of the Line fields. You’ll see that the active line goes away when clicking on one of the Line fields.

The code that shows the SVG code is where that problem occurs, which we’ll find in the showSVGCode function.

Here’s the problem function:

function showSVGCode() {
  getActiveShape().removeAttribute("stroke-width");
  var code = document.querySelector("svg").innerHTML;
  document.getElementById("result").innerHTML = escapeHTML(code);
  getActiveShape().setAttribute("stroke-width", document.getElementById("active"));
}

What’s going wrong is that it looks like instructions from earlier haven’t been followed.

What should be there is a separate var statement that gets the active element. That would have allowed us to more easily see what the problem is.

Here’s code with that update.

function showSVGCode() {
  getActiveShape().removeAttribute("stroke-width");
  var code = document.querySelector("svg").innerHTML;
  document.getElementById("result").innerHTML = escapeHTML(code);
  var active = document.getElementById("active");
  getActiveShape().setAttribute("stroke-width", active);
}

Note: The above code still doesn’t work, but is an important step to understanding how to get it working.

Now we can more easily see what the problem is. We need to assign to stroke-width the value of the active field. Not the active field itself.

So only one simple change is needed to fix that problem, and that is at the very end, changing active to active.value instead.

1004

I now have to depart, but will return in 7 hours time.

1 Like
1005

Like this?



function showSVGCode() {
  getActiveShape().removeAttribute("stroke-width");
  var code = document.querySelector("svg").innerHTML;
  document.getElementById("result").innerHTML = escapeHTML(code);
  var active = document.getElementById("active");
  getActiveShape().setAttribute("stroke-width", active.value);
}
1006

I have 2 ways of doing this for when I want to increase zoom dramatically

1 way

Another way:

1007

Here:

1008

Now it zooms in and out instantaneously as you move the dragger.