Subtract distance from set of coordinates (x1, y1, x2, y2)-CodePudding

I need to "subtract" from the distance a line has and doing so maintaining the same direction it initially had.

Note: If we try to simply subtract a given value (example 10) the direction will change.

I guess it's a mathematical problem? I need to be able to change coordinates to cause the distance to shorten by percentage. Be it from the initial position (x1, y1) or from the end position (x2, y2) all the while keeping the line in the same direction.

Note: See attached image for illustration.

// Gray line (100% distance)
<line x1="x1" y1="y1" x2="x2" y2="y2" />

// Purple line (90% distance)
<line
   x1="x1"
   y1="y1"
   x2="subtractByPercentage(x2, '10%')"
   y2="subtractByPercentage(y2, '10%')"
/>

Full distance vs percentage

I tried subtracting a given value e.g. 10, or a percentage of x and y value, but that would always change the direction of line.

CodePudding user response：

The math that you are looking for is:

<line
  x1="x1"
  y1="y1"
  x2="x1   (x2 - x1) * .9"
  y2="y1   (y2 - y1) * .9">

CodePudding user response：

Any point along the line has coordinates given by the parametric equations

X = X0   t.(X1 - X0)
Y = Y0   t.(X1 - X0)

where t varies from 0 to 1 along the segment. The distance travelled from P0 is just t.|P0P1| = t.√((X1 - X0)² (Y1 - Y0)²). So if you want to adjust the length, set the value of t to the desired percentage.