Wie füge ich einem Diagramm auf draw.io eine Kurve oder einen Bogen hinzu?

Ich habe alle verfügbaren Elemente durchgesehen, kann jedoch keine Kurve oder keinen Bogen finden, die meinem Diagramm hinzugefügt werden können. Ist es irgendwo da?

Sie können eine neue Kante als Kurve aus der Verbindungsbibliothek ziehen

Sie können eine vorhandene Verbindung auch ändern, indem Sie sie auswählen und eine Kurve aus der Dropdown-Liste der Kantenstil-Symbolleiste auswählen

Ein manuellerer Ansatz zum Abrufen von Kurven in draw.io besteht darin, die Form eines Elements zu bearbeiten. Dies ermöglicht drei verschiedene Variationen von Kurven <arc ... />, <quad ... />oder <curve ... />. Das Bild zeigt diese drei Kurven, und weiter unten befindet sich der Code, der zur Erzeugung dieser Elemente benötigt wird. Das Bild enthält einige zusätzliche Richtlinien zur Veranschaulichung der Kurvengenerierung.

Formen ändern

Wir können den Stil und die Form von Elementen in draw.io bearbeiten. Nicht alle Elemente müssen jedoch bearbeitet werden. Die meisten Elemente im Grundmenü eine Form muss bearbeitet.

Form und Stil aus dem bearbeiteten Format - Panel Ctrl+Shift+P in den Style - Registerkarte und dort haben Sie einige Tasten treffend benannte Stil bearbeiten , Bild bearbeiten und / oder Form bearbeiten . Welche Schaltflächen angezeigt werden, hängt vom ausgewählten Element ab.

Für diese Antwort konzentrieren wir uns auf die Schaltfläche Form bearbeiten. Um sie anzuzeigen, fügen wir unserer Zeichnung zunächst ein Basic> Star hinzu . Draw.io hat eine Dokumentation zum Bearbeiten von Formen mit einem kleinen Beispiel und einen Verweis auf die SVG-Dokumentation zum Zeichnen von Bögen , die die Grundlage für meine Experimente war, bis ich die in dieser Antwort verwendeten Codebeispiele gefunden habe.

Fügen Sie für jedes der folgenden Beispiele ein Element mit einer Form ein, wählen Sie es aus und klicken Sie auf die Schaltfläche Form bearbeiten . Fügen Sie den Text ein oder bearbeiten Sie ihn und klicken Sie entweder auf Vorschau, um eine Vorschau anzuzeigen , oder auf Übernehmen , um den Dialog zu schließen und Ihr Endergebnis anzuzeigen. Das Endergebnis dieses Codes mit einigen hinzugefügten Richtlinien führt zu diesem Bild:

Bearbeiten Sie eine arc

Der Bogen basiert auf zwei Ellipsen, die durch den Basispunkt und den angegebenen Punkt verlaufen. Da diese tatsächlich vier verschiedene Pfade von der Basis bis zum Endpunkt bilden, müssen Sie auswählen, welchen dieser Pfade Sie verwenden.

Hier ist ein Beispielcode für ein Tortensegment von 240 °:

<shape aspect="variable" h="2.0" w="2.0" name="Angle" strokewidth="inherit">
  <connections/>
  <background>
    <path>
      <move x="2.0" y="1.0"/>
      <arc x="0.5" y="1.866" rx="1.0" ry="1.0" large-arc-flag="1" sweep-flag="0" x-axis-rotation="0"/>
      <line x="1.0" y="1.0"/>
      <close/>
    </path>
  </background>  
  <foreground>
    <fillstroke/>
  </foreground>
</shape>

Hier sind die Details, warum dieser Code ein Tortensegment von 240 Grad zeichnet:

• Die meisten Formen haben müssen shape, backgroundund / oder foreground. Wenn ich mich für die Verwendung entschieden backgroundhabe, kann ich der Form sehr einfach Schatten hinzufügen. Ich habe die Grundfläche der Form so gestaltet, dass sie ein Quadrat mit einer Höhe von 2,0 und einer Breite von 2,0 ist. Dies soll ermöglichen, dass ein vollständiger Einheitskreis in die Form aufgenommen wird
• Wir müssen a zeichnen path
  • Wir beginnen bei 0 Grad, was sich in dem <move x="2.0" y="1.0">Befehl niederschlägt
  • Wir zeichnen dann ein arcGehen vom vorherigen Punkt im Pfad bis zu einem Endpunkt (x, y)mit Radien der Ellipsen ( rxund ry), wo sweep-flagund large-arc-flagwählt den richtigen Ellipsen-Teil aus und ob diese Ellipsen gedreht werden ( x-axis-rotation). Um 240 Grad zu erreichen, benötigen wir Folgendes:
    • Unter Verwendung eines einfachen Triggers oder eines interaktiven Einheitskreises finden wir die Koordinaten auf dem Einheitskreis, die 240 Grad entsprechen: (cos(240°), sin(240°) = (-0.5, -0.866)Was in unsere Form übersetzt wird, muss (1+x, 1-y)was gebenx="0.5" y="1.866"
    • Der Grad ist größer als 180, also wählen wir large-arc-flag="1"
    • Und wir zeichnen den Weg gegen den Uhrzeigersinn, der gibt sweep-flag="0"
  • Um es zu einem schönen Kuchensegment zu machen, fügen wir lineder Mitte, den Koordinaten 1.0, 1.0und dann closedem Pfad ein Zurück hinzu
• Dies definiert den gesamten Pfad, der einen Schatten bekommen wird, aber streng genommen wurde er noch nicht gezeichnet. Dies erfolgt mit dem fillstrokeBefehl im foregroundAbschnitt

Beachten Sie, dass Sie, wenn Sie nur das Bogensegment möchten, die Tags lineund closelöschen und durch fillstrokeein einfaches ersetzen können stroke. Experimentieren Sie mit dem Ändern der Tags sweep-flagund large-arc-flagund der anderen Tags. In meinem Beispiel habe ich verwendet rx=ry=1, um die Auslassungspunkte in Kreise umzuwandeln, aber experimentieren Sie mit dem Ändern des Radius, des Sweeps oder des Großbogens und sehen Sie, was passiert.

Einige andere Koordinaten, um einige Standardwinkel zu erhalten, sind wie folgt:

• 45 ° auf Einheitskreis: (0.707, 0.707)was ergibtx="1.707" y="0.293"
• 60 ° auf Einheitskreis: (0.5, 0.866)was ergibtx="1.5" y="0.134"
• 225 ° = 180 ° + 45 °: (-0.707, -0.707)was ergibtx="0.293" y="1.707"
• n ° auf Einheitskreis : (cos(n), sin (n) `` was gibtx="1+cos(n)" y="1-sin(n)"
• Notieren Sie die Werte 0.707(& 0.293) 0.5, 0.866(& 0.134), die auf die 30 regelmäßig im Zusammenhang tritt sie erneut °, 45 ° und 60 ° und n*90°Winkel um den Kreis ...

Beachten Sie die Verwendung von move, um den Basispunkt anzugeben, und dann die Verkettung von arcund line(und Sie hätten quadund verwenden können curve), um einen längeren Pfad zu erstellen.

Bearbeiten Sie eine quad

Eine quadKurve ist eine quadratische Kurve. Dies ist die Kurve, die Sie erhalten, wenn Sie mit einer Linie vom Basispunkt bis zum Kontrollpunkt beginnen und sich drehen, bis Sie mit der Linie vom Kontrollpunkt bis zum Endpunkt übereinstimmen.

Hier ist ein Beispiel:

<shape aspect="variable" h="1" w="1" name="Quad" strokewidth="inherit">
  <connections />
  <background>
    <path>
      <move x="0" y="0"/>
      <quad x1="0.25" y1="1" x2="1" y2="1"/>
    </path>
  </background>
  <foreground>
    <stroke/>
  </foreground>
</shape>

Erklärung der quadKurve:

• Stellen Sie den Basispunkt ein, <move x="0" y="0" />
• Geben Sie einen Kontrollpunkt auf das quad,x1="0.25" y1="1"
• Und geben Sie den Endpunkt an, x2="1" y2="1"

Diese Art von Kurve kann nützlich sein, wenn Sie den Winkel der Start- und Endliniensegmente der Kurve steuern möchten. Das heißt, wenn Sie mehrere Kurvensegmente erstellen möchten und diese schöne Verbindungen haben sollen.

Bearbeiten a curve

Die endgültige curveForm verwendet zwei Kontrollpunkte, die als Gravitationszüge auf der Linie bis zum Endpunkt wirken. Hier ist der Code:

<shape aspect="variable" h="1" w="1" name="curve" strokewidth="inherit">
  <connections />
  <background>
    <path>
      <move x="0" y="0"/>
      <curve x1="0.1" y1="0.4" x2="0.9" y2="0.3" x3="1" y3="1"/>
    </path>
  </background>
  <foreground>
    <stroke/>
  </foreground>
</shape>

• Stellen Sie den Basispunkt ein, <move x="0" y="0" />
• Geben Sie zwei Kontrollpunkte auf der curve,x1="0.1" y1="0.4" x2="0.9" y2="0.3"
• Und geben Sie den Endpunkt an, x3="1" y3="1"

Beachten Sie, dass ich die obere linke als Startpunkt verwendet haben, und rechts als Endpunkt senken sowohl für die quadund die curve, dies kann natürlich geändert werden , wenn Sie eine andere allgemeine Richtung der Kurve soll.

Eine Möglichkeit zum Zeichnen von Bögen besteht darin, die bidirektionale Kurve aus dem Bedienfeld „Verschiedenes“ in den Zeichenbereich zu ziehen und dann auf die Kurve zu klicken, um die als „Wegpunkte“ bezeichneten "blau gefärbten" Punkte anzuzeigen. Sie können diese Wegpunkte entfernen, um ihre Struktur zu ändern. Klicken Sie mit der rechten Maustaste und wählen Sie Wegpunkt entfernen. Entfernen Sie unnötige Wegpunkte, bis Sie nur noch 3 Wegpunkte haben, 2 an den Rändern und einen irgendwo dazwischen. Durch Ziehen des Wegpunkts zwischen den beiden Wegpunkten erhalten Sie eine Kurve mit verschiedenen Krümmungen.