poniedziałek, 1 lipca 2013

Wyrównywanie elementów na diagramie

Każdy autor diagramu chciałby, aby efekt jego pracy wyglądał profesjonalnie i ładnie. W tym celu zazwyczaj rozciągamy i ściągamy elementy na diagramie - aby były tej samej wielkości, przesuwamy je - aby były odpowiednio wyrównane i wyrównujemy odstępy między elementami. Takie manualne operacje na zawartości diagramu są czasochłonne, a mimo naszych usilnych starań i tak często widoczne są niedoskonałości.

Załóżmy, że mamy do czynienia z takim przykładowym diagramem.



Zacznijmy od metody wyrównania wysokości i szerokości tych klas. 
W tym celu należy zaznaczyć wszystkie klasy na diagramie. Można to zrobić poprzez naciśnięcie Ctrl+A lub wciśnięcie lewego klawisza myszy i przeciągnięcie obszaru zaznaczania.

Zauważcie, że gdy zaznaczonych jest wiele elementów, to zawsze jeden z nich jest zaznaczony "jakoś bardziej". W tym przypadku zaznaczenie elementu Klasa1 wygląda nieco inaczej.
Oznacza to, że Klasa1 będzie stanowić wzór, do którego zostaną dostosowane pozostałe zaznaczone klasy.
Gdybyśmy chcieli jako wzór wybrać jednak inny element, wówczas możemy to łatwo zmienić klikając na wybranym elemencie prawym przyciskiem myszy.

Kliknięcie prawym przyciskiem myszy powoduje wyświetlenie menu kontekstowego.
W przypadku zaznaczenia wielu elementów - menu kontekstowe zawiera pozycje, które nas interesują.
Są to:
  • Align Left - wyrównanie elementów do lewej krawędzi,
  • Align Right  - wyrównanie elementów do prawej krawędzi,
  • Align Top  - wyrównanie elementów do górnej krawędzi,
  • Align Bottom  - wyrównanie elementów do dolnej krawędzi,
  • Align Centers  - wyrównanie do osi elementów (pionowej lub poziomej),
  • Space Evenly - wyrównanie odstępów pomiędzy elementami (poziomo lub pionowo),
  • Same Height - wyrównanie wysokości elementów,
  • Same Width - wyrównanie szerokości elementów,
  • Same Height and Width - wyrównanie zarówno wysokości, jak i szerokości elementów.
Zaczniemy od ustalenia takiej samej wysokości i szerokości, jak Klasa1 dla pozostałych klas.
Po wybraniu opcji Same Height and Width diagram wygląda następująco:
Następnym krokiem będzie wyrównanie Klasy1, Klasy2, Klasy3 do górnej krawędzi poprzez zaznaczenie tylko tych trzech elementów i wybranie opcji Align Top.
Po tej operacji diagram wygląda tak:

Patrząc na górny rząd elementów widać, że Klasa2 znajduje się bliżej elementu Klasa1 niż Klasa3. Trzeba to poprawić poprzez wybranie opcji Space Evenly -> Across.

Teraz klasy są rozmieszczone w takich samych odstępach.

Widać jednak, że relacja pomiędzy Klasa2 a Klasa4 nie jest idealnie prostopadła. Moglibyśmy próbować poprawiać położenie samego konektora, ale skoro Klasa2 i Klasa4 mają taką samą szerokość, to możemy spróbować go wyrównać poprzez zaznaczenie Klasy4 i Klasy2 a następnie wywołanie opcji Align Left, aby wyrównać je do lewej krawędzi elementu Klasa2.
Po tej operacji diagram wygląda następująco:
Teraz można uznać, że rozmieszczenie elementów na diagramie jest akceptowalne.

Brak komentarzy:

Prześlij komentarz