javafx 圆角矩形角

Question

当您在 JavaFX 中创建一个圆形 VBox 时，VBox 的背景颜色为黑色，假设填充按钮后的圆角为白色，如何用另一种颜色填充该区域（假设我想要它完全透明）。

Answer 1

assume the rounded corners after filling the button is white, How can I fill this region with another color

你说的是 "Stroke?" 有 "Fill"（内部）和 "Stroke"（轮廓、外缘、边缘等）

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-（如果你没有点击上面的setStroke）

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.

从这里你用一个"Paint"对象填充它，它是许多不同类的基础class，例如"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.

所以...总而言之，您将要做的事情。

button.setStroke(Color.TRANSPARENT);

当然，如果这就是您要问的，因为很难说...；但是，看来我提供的就是你要的，但如果不是我会再试一次:)。

Answer 2

为了设置VBox的容器背景为透明，那么需要将包含VBox的场景的填充属性设置为TRANSPARENT COLOR，下面这段代码说明：

这是垂直框样式：

.vbox
{
    -fx-background-color: black;
    -fx-background-radius: 300%;
    -fx-alignment:center;
}

如果您将上述样式应用于宽度和高度 = 200 的 vbox，您将得到一个黑色背景的圆，而圆角填充白色。要让这个白角变透明，需要加入这段代码：

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);

Answer 3

我想，提问者想最终有一个浮动回合 VBox。这可能可以通过多种方式实现，无需考虑太多，我宁愿使用剪辑 Node 而不是纯粹的 CSS 方法（这应该也是可行的）。

正如他已经写的那样，您还需要使 Scene 填充 Color.TRANSPARENT（可能还有 Stage）。

我的方法是这样的。首先是 FXML 文件：

<?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>

然后是控制器class：包裹申请；

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);
    }
}

最后是粘合代码 - 主要 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);
    }
}

所以。假设我理解正确，这就是我的解决方案。

javafx 圆角矩形角

javafx rounded rectangle corners

javafx-8

rounded-corners