2012-04-10 15 views
0

Ich möchte meine Website mit einem Layout entwickeln, das ein wenig wie Häuser mit verbundenen Rohrleitungen aussieht, oder mehrere Computer mit einem Netzwerk verbunden sind. Im Grunde werden die Boxen im Raum schweben, mit Linien, die einige der Boxen verbinden. Ich möchte, dass diese Linien auch einige Kurven haben (nur einfache 90-Grad-Kurven) und nicht nur eine gerade Linie.Verbinden Sie divs mit (nicht geraden) Linien

Meine Frage ist, was ist der beste Weg, um dies zu erreichen, und vielleicht ein kleines Beispiel. Meine Gedanken waren zu verwenden:

PHP und CSS: Ich könnte ein Hintergrundraster erstellen und dann, mit einigen komplizierten Algorithmen, zeichnen Pfade mit den Grenzen des Rasters. Das wäre dynamischer, aber ich bin mir nicht sicher, ob ich die Mathematik ganz alleine auftragen kann.

nur CSS: Vielleicht ist das so einfach wie einige vorgezeichnete Linien wie L-Formen und T-Verzweigungen, dann nur platzieren und skalieren sie. Aber ich glaube nicht, dass es eine Möglichkeit gibt, ein Bild zu skalieren, indem man es schneidet. Also würde die Linienbreite skaliert werden und somit würde jedes Bild anders aussehen.

Irgendwelche Gedanken?

+1

[SVG] (http://raphaeljs.com/graffle.html) kommt in den Sinn. – Andrew

+0

Hmmm .. diese Seite möchte nicht auf meiner Zelle rendern. Ich muss warten, bis ich nach Hause komme, um das zu überprüfen. – Snailer

+0

Wow .. 'Raphael' sieht toll aus! Aber es sieht nicht so aus, als könnte ich etwas wie 'Paper.rect()' auf ein div voller Inhalt anwenden. – Snailer

Antwort

0

Sie können möglicherweise einige der jQuery-Position & Bemaßungsfunktionen und -eigenschaften verwenden.

I.e. um die Offsets und Distanzen zwischen div zu erhalten, die dann dazu verwendet werden könnten, einige extra divs als Konnektoren zu zeichnen.

Könnte chaotisch sein, würde aber funktionieren.

+0

Oh ich sehe, ich könnte einige 1px breite Divs als die Zeilen selbst verwenden .. gute Idee. Aber um dynamische Wege zwischen divs zu machen, würde es immer noch komplizierte Mathematik erfordern. – Snailer

Verwandte Themen