0

I want to find cooridnates of point placed on div/ viewport borde, relative center and to point outside it.

Here's example:

enter image description here

Does somebody knows where to start? For the first time I'm doing something like this.

I want to add this point so it is not predefined. Basically I need coordinates of where to add it to div.

I was trying to get the ratio between x and y and scale it but reult was wrong.

Thanks.

EDIT: Using Thomas' answer the results are: enter image description here

and here's my approach:

enter image description here enter image description here

Result seems incorrect, maybe I did some mistake.

Michał B
  • 339
  • 1
  • 3
  • 12
  • you can use getBoundingClientRect() to get the coordinates of html objects link: – maxkroon Jun 06 '23 at 16:11
  • Sorry, I forgot to add that I want to add this point so getBoundingClientRect() cannot be used. – Michał B Jun 06 '23 at 16:17
  • You need the `delta` (x,y) between your `point` and `viewport.center`. Then you take that compute a `ratio` (for both axes: x,y) `delta * 2 / viewport.dimensions`. Then you take the one with the smaller value `t = min(abs(ratio.x), abs(ratio.y))` and you do a linear interpolation `pt = lerp(viewport.center, point, t)` to get the exact point on the border. or `pt = viewport.center + delta * t` – Thomas Jun 06 '23 at 16:24
  • Thanks for answer. I will try it. And this should works for every angles? – Michał B Jun 06 '23 at 17:39
  • Look here dor universal solution: https://stackoverflow.com/a/58055928/844416 – MBo Jun 07 '23 at 05:02

1 Answers1

1

Result seems incorrect, maybe I did some mistake.

I got the equation for the ratio the wrong way around.

const viewport = document.querySelector(".viewport");
const [a, b, c] = document.querySelectorAll(".dot");
let bb, center, mouse = new DOMPoint();

const render = () => {
  const dx = mouse.x - center.x;
  const dy = mouse.y - center.y;
  const t = Math.min(
    Math.abs(bb.width / 2 / dx),
    Math.abs(bb.height / 2 / dy),
  );
  const pt = new DOMPoint(center.x + dx * t, center.y + dy * t);

  a.style.top = center.y + "px";
  a.style.left = center.x + "px";
  b.style.top = pt.y + "px";
  b.style.left = pt.x + "px";
  c.style.top = mouse.y + "px";
  c.style.left = mouse.x + "px";  
};

const updateViewport = () => {
  setTimeout(updateViewport, 5000);

  viewport.style.top = Math.random() * 100 + 20 + "px";
  viewport.style.left = Math.random() * 300 + 20 + "px";
  viewport.style.width = Math.random() * 300 + 100 + "px";
  viewport.style.height = Math.random() * 300 + 100 + "px";

  bb = viewport.getBoundingClientRect();
  center = new DOMPoint(
    bb.x + bb.width / 2,
    bb.y + bb.height / 2
  );

  render();
};

document.body.onmousemove = ({ clientX, clientY }) => {
  mouse = new DOMPoint(clientX, clientY);
  render();
}

updateViewport();
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.viewport {
  position: absolute;
  background: #88F;
}

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid #00F;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
<div class="viewport"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
Thomas
  • 11,958
  • 1
  • 14
  • 23