2017-11-27 4 views
0

Ich möchte einen radial-gradient Hintergrund erstellen und in der unteren rechten Ecke meines Elements Region platzieren. Ich möchte, dass es einen festen Radius von 30 Pixeln hat. Nach documentation kann ich entweder Prozent oder feste Größe angeben. Das Problem ist, wenn in der festen Größe mein Gradient in der oberen linken Ecke gerendert wird, aber wenn ich Prozentsatz verwende, verhält es sich wie es soll. Was vermisse ich?JavaFX. Warum kann ein fester Radiusgrßengradient nicht positioniert werden?

-Code und führen für feste Größe:

radial-gradient(focus-angle 0deg, focus-distance 0%, center 100% 100%, radius 30px, #ffb06a 0%, #cc3671 50%, #3f003a 100%); 

enter image description here

-Code und Ergebnis Prozentsatz:

radial-gradient(focus-angle 0deg, focus-distance 0%, center 100% 100%, radius 30%, #ffb06a 0%, #cc3671 50%, #3f003a 100%); 

enter image description here

Antwort

1

Nach dem docs

Prozent- und Längengrößen können nicht in einer einzigen Gradientenfunktion gemischt werden.

Das bedeutet, wenn Sie einen festen Radius von 30px haben wollen, dann sollte der Mittelpunkt auch px, zum Beispiel unter Verwendung definiert werden:

radial-gradient(focus-angle 0deg, focus-distance 0%, center 600px 400px, radius 30px, #ffb06a 0%, #cc3671 50%, #3f003a 100%); 

enter image description here

+0

Einfach und genial! Aber was ist, wenn ich eine reaktionsschnelle Positionierung möchte? Wie ich möchte, dass mein Gradient immer bei 80% 60% Punkt ist, aber wenn ich den Prozentsatz für den Radius verwende, dehnt sich die Form aus. Da Fenster nicht quadratisch, sondern rechteckig ist, ist die Form meines Gradienten auch Ellipse, eher Kreis. Ist es möglich, den Radius in Prozent anzugeben, aber die Kreisform des Gradienten beizubehalten? – Alyona

+0

Die Dokumentation sagt "Prozentwerte sind relativ zur Größe des zu befüllenden Bereichs". Dies bedeutet, dass der Prozentwert, den Sie verwenden, relativ zu dem Bereich ist, den Sie ausfüllen. Der Gradient ist also eine Ellipse, wenn der Bereich kein Quadrat ist. Scheint, dass Sie hier einen Kompromiss machen müssen. Eine alternative Lösung wäre die Verwendung einer zusätzlichen Rechteckform oben auf dem Hauptfenster, so dass der Verlauf kreisförmig ist, zum Beispiel https://i.stack.imgur.com/U1WlL.png – Boris

Verwandte Themen