Ich habe eine HTML-Tabelle und möchte einen Pfeil von einer Zelle zu einer anderen Zelle zeichnen. Zum Beispiel so:
Wie könnte das gemacht werden?
Beispiel HTML:
<html>
<body>
<table>
<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>
</body>
</html>
Wenn Sie die Größe des Browsers ändern, sollte der Pfeil an der (neuen) Start- / Endposition bleiben.
javascript
html
svg
guettli
quelle
quelle
Antworten:
Mit etwas JavasSript und CSS können Sie dies ohne Canvas oder SVG erreichen. Hier ist ein Beispiel:
quelle
ctrl -
(Größe verringern), verliert der Pfeil die Endposition.Sie können meine Lösung verwenden, die den Pfeil noch nicht vollständig gezeichnet hat. Lassen Sie eine Leinwand erstellen und eine Linie aus zwei Punkten zeichnen, basierend auf der Berechnung von Start- und Endpunkt.
quelle
Javascript-Lösung:
quelle
So würde ich es machen: Das svg-Element verwendet die Größe der Tabelle für den viewBox-Wert. Sie berechnen die Größe und die Position der Zellen, die Sie korrelieren müssen, und verwenden diese Position, um die Linie zu zeichnen. Für die Pfeilspitze wird ein Marker verwendet.
Bitte ändern Sie die Größe des Fensters:
AKTUALISIEREN:
Da jemand kommentiert hat, dass der Pfeil beim Ändern der Größe seine Position verliert, füge ich ein GIF hinzu:
quelle
ctrl +
(nachctrl -
) imgur.com/8xbEAK2 Iuse Chromium 78.0.3904.70Sie können ein SVG-Element und CSS-Stile für die absolute Position verwenden, die Ihre Tabelle überlagert. Und erhalten Sie den Start- und Endpunkt per JavaScript-DOM-API wie
getBoundingClientRect()
Hier ist eine Demo. (Hergestellt mit Angular, aber Sie können es überall verwenden. Beispiel für reines JavaScript siehe unten.)
Sie können Start und Ende dynamisch ändern. Sie müssen nur die Methode neu aufrufen, um die Positionen zu erhalten. Beachten Sie, dass ich den Pfeil mit der linken, oberen, rechten Taste am Rand des Elements platziere. Sie können den Mittelpunkt oder die Kante berechnen, indem Sie beide Positionen vergleichen.
Und du musst das SVG über den Tisch legen. Sie können dies tun, indem Sie css setzen
position: absolute; left: 0; top: 0
. Beachten Sie jedoch, dass Ihre Eltern auch dasposition
Attribut haben sollten. zBposition: relative
.Update: Hier ist eine reine JavaScript-Demo. Klicken Sie links, um alle Dateien anzuzeigen, und wählen Sie index.js aus, um das JS-Material anzuzeigen. (wie in VS Code).
Vollständiger Code:
Kopieren Sie einfach den obigen Code in eine neue leere HTML-Datei und führen Sie ihn in Ihrem Browser aus.
Übrigens. Sie können dies auch mit einer Leinwand tun. (Alternative für SVG)
quelle
Sie müssen die Tabelle in ein div einfügen und eine Eigenschaft angeben, position: relative Dann schreiben Sie HTML für den Pfeil (verwenden Sie ein Bild, wenn Sie möchten) und geben Sie ihm eine Eigenschaft von absolute und formatieren Sie es dann wie Sie möchten, top, links rechts..
Weitere Informationen zu Positionseigenschaften finden Sie hier https://www.w3schools.com/css/css_positioning.asp
quelle