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

JavaScript
869

So, I’ll be able to do a mouse slider thing then? or is that difficult?

Like how it works here:

But for zooming in and out.

Way easier than clicking a bunch of times.

870

Okay. let’s plan for the active one.

An easy way to do the active one, while without messing up the SVG code that’s shown at the bottom of the screen, is:

  • remove stroke-width from all shapes
  • show the SVG code
  • add stroke-width to the currently active shape

That helps to keep the shown SVG code nice and clean.

So first, we need to create a new function called showSVGCode on line 183

function showSVGCode() {

}
871

Quick question:

Can I have this part open into a new window?

872

A new window would mean lots of complications on how to communicate from one window to another.

It would be a lot easier though to have that part at the top of the screen though, with the image on one side and the controls on the other.

873

Intercom.js

874

I think that it would be a problem if we got halfway there only to realise that there’s a major problem blocking our path.

Do you want to be with me when we explore those potential dark alleys together?

875

Something like this will work.

752×309 79 KB

876

Can the zooming thing be accomplished?

877

There aren’t any stroke weights.

878

Yes it can be accomplished. The active one will be easier to complete though. It would also be nice if we can get that finished off so that there’s less things to worry about.

879

Add them to line 25.

880

Add or remove?

881

<svg stroke-width="2" class="initial" width="260" height="245" viewbox="0 0 260 245">

882 

    function escapeHTML(html) {
      return document.createElement('div').appendChild(document.createTextNode(html)).parentNode.innerHTML;
    }

function showSVGCode() {

}
883

First of all, it’s not stroke-weight. It’s stroke-width.
That confusion caused pain with earlier work. I have gone back to fix that error on that post.

Second, there are two issues here. One that deals with the starting view of the image, and another that deals with getting active working.

With the starting view of the image, stroke-width needs to be added to line 25
With getting active working, we are going to add a stroke-width to the currently active shape, so that needs to be removed before showing the SVG code, which is why it’s removed before showing the SVG code, and then added again afterwards.

The easy and quick one is to fix the starting view of the image by adding stroke-width to line 25.

884
885

We now have the showSVGCode function on line 184.

Please move the 197-198 lines of code in to the showSVGCode function, and in their old location, call showSVGCode instead.

The code beforehand:

function showSVGCode() {

}
function updateShape(evt) {
  ...
  var code = document.querySelector("svg").innerHTML;
  document.getElementById("result").innerHTML = escapeHTML(code);
  return;
}

And the code afterwards:

function showSVGCode() {
  var code = document.querySelector("svg").innerHTML;
  document.getElementById("result").innerHTML = escapeHTML(code);
}
function updateShape(evt) {
  ...
  showSVGCode();
  return;
}

This is the Extract function technique.

886

I tried using margin, there’s an issue.

887

Can we just do one thing at a time? Which one thing do you currently want help with.

888