jsplumb passt sich an, wenn sich die Größe des Browserfensters ändert (zeichnet Endpunkte und Verbindungen neu)

Szenen, die verwendet werden sollen

In letzter Zeit besteht die Notwendigkeit, ein ER-Diagramm zu zeichnen und die Attribute von Knoten oder Kanten im Beziehungsdiagramm den Feldern in der Datentabelle zuzuordnen und zu konfigurieren.
Es kann sein, dass die Breite und Höhe meines Containers nicht px sind, sondern Prozentsätze oder vw, vh und dergleichen. Wenn sich die Größe des Browserfensters ändert, ist das ER-Diagramm in diesem Bereich nicht adaptiv.
Verwenden Sie dann window.onresize, um das Problem zu lösen.

lösen

Achten Sie auf Änderungen im Browserfenster und zeichnen Sie Punkte und Linien neu.

window.addEventListener('resize', () => {
    
    
	this.jsplumbInstance.repaintEverything()
})

Das ist ok.

Spitze

Um einen Exkurs zu machen: Bei der Verwendung von jsplumb müssen Sie übrigens den Stil für den Container festlegen: position: relative;

おすすめ

転載: blog.csdn.net/zhangxiaodui/article/details/123272562