Wie mache ich einen javafx Knopf mit Kreisform von 3xp Durchmesser?

Update: Bei genauerer Betrachtung der resultierenden Schaltfläche scheint die Form wie in Josés Antwort besser auf sehr kleinen Schaltflächen zu funktionieren, als die in dieser Antwort verwendete -fx-background-radius zu setzen (die Resultierende) Die Schaltfläche sieht etwas kreisförmiger aus, wenn die Form festgelegt wird. Die Lösung hier ist wahrscheinlich am besten für größere Tasten (z. B. 10px oder mehr), während das Einstellen der Form wahrscheinlich am besten für eine extrem kleine Taste von 3px ist (es ist jedoch ein ziemlich subtiler Unterschied).

3px ist eine sehr kleine Schaltfläche. Ich bin mir nicht sicher, wie Sie erwarten, dass die Leute darauf klicken.

Sie können es mit CSS machen.

Hier ist ein runder Knopf von 30px Größe:

Und die gewünschte 3-Pixel-Größe:

Die Rundung wird erreicht, indem ein großer Wert auf -fx-background-radius gesetzt wird.

Es wurden Screenshots auf einem Retina-Mac gemacht, also sind sie doppelt so groß wie das Original.

Beachten Sie, dass eine Schaltfläche mit Hintergrundebenen gerendert wird. Die innere Ebene ist die eigentliche Schaltfläche und außerhalb davon gibt es einen Fokusring und ein leichtes Leuchten. So zusammen kann es tatsächlich etwas größer als 3px sein. Wenn Sie 3px genau erhalten möchten, müssen Sie die Fokushintergrundeinsätze loswerden. Etwas wie unten:

Die Inline-Stile werden hier nur verwendet, damit das Sample klein und eigenständig ist. In einer echten Anwendung würden Sie die Stile in ein Stylesheet einfügen.

Die Idee, einen -fx-background-radius zum Runden der Schaltfläche zu verwenden, kam von der Implementierung der gerundeten Optionsfelder im standardmäßigen JavaFX-Stylesheet modena.css. Sie können das Stylesheet finden, indem Sie in die Datei jfxrt.jar schauen, die JavaFX-Code und -Ressourcen enthält.

Zum Vergleich, hier ist ein Bild einer Schaltfläche, die mit der Kreisform-Lösung erstellt wurde, wie in Joses Antwort:

  

warum muss noch minSize () .....

eingerichtet werden

Weil JavaFX versucht, angemessene Standardwerte bereitzustellen. Wenn es keine Standardgröße für eine leere Schaltfläche gibt, wenn Sie die Größe der Szene verringern, werden einige der Schaltflächen einfach ausgeblendet und der Benutzer kann nicht darauf klicken - was eine sehr schlechte Benutzererfahrung wäre. Die Mindestgröße beträgt daher standardmäßig etwa 1 em plus eine Auffüllung (z. B. gerade größer als ein Zeichen), obwohl auf der Schaltfläche kein Text festgelegt ist. Es ist jedoch nur eine Standardeinstellung des Java-Systems, da es nicht genau wissen kann, was Ihre App möchte. Wenn die Standardeinstellungen für Ihre Situation nicht funktionieren, überschreiben Sie sie oder geben Sie zusätzliche Hinweise, wie z. B. das explizite Festlegen der Mindestgröße des Steuerelements.

  

Wofür steht "5em"?

Siehe JavaFX 8 css-Referenzhandbuch :

  

em: die 'font-size' der betreffenden Schriftart

Also 5em bedeutet 5 mal die Schriftgröße. Die meisten Größen für Steuerelemente im standardmäßigen JavaFX-Stylesheet werden mithilfe von em-Einheiten angegeben. Wenn Sie die Schriftart oder Schriftgröße ändern, skaliert die Benutzeroberfläche so, dass die größere oder kleinere Schriftart angepasst werden kann. In diesem speziellen Fall war die Wahl von 5em ziemlich willkürlich, ich wollte nur einen großen Wert, so dass der Button komplett rund wäre, sonst würde -fx-background-radius ein Rechteck mit abgerundeten Ecken anstelle eines vollständigen Kreises erzeugen. Indem sichergestellt wird, dass die Radiusbemaßungen, die an -fx-background-radius übergeben wurden, größer als die Hälfte der Größe des Steuerelements sind, nimmt das Steuerelement eine runde Kreisdarstellung an.

Ich weiß, das ist etwas verwirrend und nicht intuitiv. Ich habe das Konzept einfach aus dem Standard-JavaFX-Stylesheet mit der Idee kopiert, dass, egal wie verwirrend es sein mag, es wahrscheinlich die beste Vorgehensweise ist, um diese Art von Effekten zu erreichen, oder es im Standard-Stylesheet nicht verwendet würde.

Hauptsächlich ist der Vorteil eines solchen Ansatzes, dass kein Code benötigt wird, alle Stile können direkt in CSS erstellt werden (so können Sie das Aussehen ändern, ohne Ihren Java-Code zu ändern) und wenn Sie möchten, können Sie co angeben -Ordiniert in em-Einheiten, so dass das Steuerelement mit Ihrer Schriftgröße skaliert. Es gibt also einen Grund für den scheinbaren Wahnsinn.

Sie müssen nur die Mindestgröße festlegen. Dies wird tun:

Und es wird dir einen runden und sehr kleinen Knopf geben. Nicht sicher, ob Sie es kleiner machen wollen, aber Sie können das auch tun. Ändern Sie einfach den Radius r auf den erforderlichen Wert.