Możesz użyć elementu SVG i stylów css do absolutnej pozycji nakładającej się na stół. I uzyskaj punkt początkowy i końcowy przez JavaScript DOM API jakgetBoundingClientRect()
Oto demo. (Wykonane w Angular, ale można go używać wszędzie. Przykład czystego JavaScript patrz poniżej.)
const startElement = document.querySelector('#start');
const endElement = document.querySelector('#end');
const startRect = startElement.getBoundingClientRect();
const endRect = endElement.getBoundingClientRect();
const startX = startRect.right;
const startY = startRect.top;
const endX = endRect.left;
const endY = endRect.bottom;
Możesz dynamicznie zmieniać początek i koniec. Musisz tylko ponownie wywołać metodę, aby uzyskać pozycje. Zauważ, że używam lewego, górnego, prawego przycisku, aby umieścić strzałkę na krawędzi elementu. Możesz obliczyć punkt środkowy lub krawędź, porównując obie pozycje.
I musisz położyć SVG na stole. Możesz to zrobić ustawiając css position: absolute; left: 0; top: 0
. Pamiętaj jednak, że twój rodzic również powinien mieć ten position
atrybut. na przykładposition: relative
.
Aktualizacja: tutaj czysta wersja JavaScript. Kliknij po lewej, aby wyświetlić wszystkie pliki i wybierz plik index.js, aby wyświetlić zawartość JS. (jak w kodzie VS).
Pełny kod:
<table style="position: absolute; left: 0; top: 0;">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td id="end">9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td id="start">0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<svg style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="3" orient="auto"
markerUnits="strokeWidth" viewBox="0 0 20 20">
<path d="M0,0 L0,6 L9,3 z" fill="#f00" />
</marker>
</defs>
<line id="svg-line" stroke="#f00" stroke-width="5"
marker-end="url(#arrow)" />
</svg>
</table>
<script>
const svgLine = document.querySelector('#svg-line');
const startElement = document.querySelector("#start");
const endElement = document.querySelector("#end");
const startRect = startElement.getBoundingClientRect();
const endRect = endElement.getBoundingClientRect();
const startX = startRect.right;
const startY = startRect.top;
const endX = endRect.left;
const endY = endRect.bottom;
svgLine.setAttribute('x1', startX);
svgLine.setAttribute('y1', startY);
svgLine.setAttribute('x2', endX);
svgLine.setAttribute('y2', endY);
</script>
Po prostu skopiuj powyższy kod do nowego pustego pliku HTML i uruchom go w przeglądarce.
Btw. Możesz to również zrobić z płótnem. (alternatywa dla svg)