javafx rounded rectangle corners - javafx-8

Question

When you create a rounded VBox in JavaFX, and the background color for the VBox is black, assume the rounded corners after filling the button is white, How can I fill this region with another color (Assume I want it to be totally transparent).

Answer 1

I assume, the questioneer wants to finally hava a floating round VBox.
This can probably be achieved in many ways, without thinking to much about it, I would rather make use of a clipping Node instead of a pure CSS approach (which should be doable as well).
As he already wrote, you would also need to make the Scenes fill Color.TRANSPARENT (and probably the Stage as well).
My approach looks like this. First the FXML file:
<?import java.lang.*?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>
<BorderPane xmlns:fx="http://javafx.com/fxml" fx:id="root" fx:controller="application.ClipExampleController" style="-fx-background-color: steelblue;">
<center>
<VBox fx:id="vbox" alignment="CENTER" spacing="5" maxWidth="150">
<Label text="Bla"/>
<TextField promptText="Blub"/>
<Button text="Do it"/>
</VBox>
</center>
</BorderPane>
Then the Controller class:
package application;
import javafx.beans.binding.DoubleBinding;
import javafx.fxml.FXML;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
public class ClipExampleController {
#FXML
private BorderPane root;
#FXML
private VBox vbox;
#FXML
protected void initialize() {
Circle clip = new Circle();
clip.radiusProperty().bind(new DoubleBinding() {
{
bind(vbox.widthProperty());
}
#Override
protected double computeValue() {
return vbox.getWidth() / 2 + 25;
}
});
clip.centerXProperty().bind(new DoubleBinding() {
{
bind(root.widthProperty());
}
#Override
protected double computeValue() {
return root.getWidth() / 2;
}
});
clip.centerYProperty().bind(new DoubleBinding() {
{
bind(root.heightProperty());
}
#Override
protected double computeValue() {
return root.getHeight() / 2;
}
});
root.setClip(clip);
}
}
and finally the glue code - the main Application:
package application;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
public class Main extends Application {
#Override
public void start(Stage stage) throws Exception {
FXMLLoader loader = new FXMLLoader(getClass().getResource("ClipExample.fxml"));
Parent root = loader.load();
Scene scene = new Scene(root, 300, 300);
scene.setFill(Color.TRANSPARENT);
stage.initStyle(StageStyle.TRANSPARENT);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
So. Assuming, that I understand you correctly, this would be my solution.

Answer 2

assume the rounded corners after filling the button is white, How can I fill this region with another color
Are you talking about the "Stroke?" There is "Fill" (Inside) and "Stroke" (outline, outer-rim, edge, etc)
https://docs.oracle.com/javase/8/javafx/api/javafx/scene/shape/Shape.html
The Shape class provides definitions of common properties for objects that represent some form of geometric shape.
These properties include:
The Paint to be applied to the fillable interior of the shape (see setFill).
The Paint to be applied to stroke the outline of the shape (see setStroke).
https://docs.oracle.com/javase/8/javafx/api/javafx/scene/shape/Shape.html#setStroke-javafx.scene.paint.Paint- (in case you didn't click setStroke above)
public final void setStroke(Paint value)
Sets the value of the property stroke.
Property description:
Defines parameters of a stroke that is drawn around the outline of a Shape using the settings of the specified Paint. The default value is null for all shapes except Line, Polyline, and Path. The default value is Color.BLACK for those shapes.
From here you fill it with a "Paint" Object which is a base class for many different Classes such as "Color"
https://docs.oracle.com/javase/8/javafx/api/javafx/scene/paint/Color.html#TRANSPARENT
public static final Color TRANSPARENT
A fully transparent color with an ARGB value of #00000000.
So... To sum this up, you are going to want to do.
button.setStroke(Color.TRANSPARENT);
If this, of course, is what you're asking, since it's hard to tell...; However, it seems what I have provided is what you ask, but if not I'll try again :).

Answer 3

In order to set the container's background of the VBox to be transparent, then you need to set the fill property of the scene that contains the VBox to TRANSPARENT COLOR, the following piece of code clarifies that:
This is the vbox style:
.vbox
{
-fx-background-color: black;
-fx-background-radius: 300%;
-fx-alignment:center;
}
if you applied the above style to a vbox with width and height = 200 you will get a circle with black background while the rounded corners filled with white. To make this white corners transparent, you need to add this piece of code:
loader.setLocation(MainApp.class.getResource("view/Test.fxml"));
VBox page = (VBox) loader.load();
Stage testStage = new Stage();
Scene scene = new Scene(page);
scene.setFill(Color.TRANSPARENT);
testStage.setScene(scene);