【问题标题】:javafx rounded rectangle cornersjavafx圆角矩形角
【发布时间】:2016-04-11 13:27:51
【问题描述】:

当你在JavaFX中创建一个圆角VBox,并且VBox的背景颜色是黑色时,假设填充按钮后的圆角是白色的,我怎样才能用另一种颜色填充这个区域(假设我希望它完全透明)。

【问题讨论】:

  • 如何创建圆形按钮?当我使用 button.setStyle("-fx-background-radius: 20;") 时,背景已经是透明的。要更改背景颜色,您可以将按钮放在父节点中,例如一个 StackPane 并设置该组件的背景颜色。

标签: javafx-8 rounded-corners


【解决方案1】:

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

正如他已经写的那样,您还需要让Scenes 填充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>

然后是Controller类: 打包申请;

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

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

【讨论】:

  • 顺便说一句:这也是我第一次尝试使用剪辑节点。我刚刚听说了很多关于它及其有用性的信息,这是一个很好的小“项目”来测试它。 :-D
  • 你可以稍微简化你的绑定:circle.radiusProperty().bind(vbox.widthProperty().divide(2).add(25));
  • 啊。是的!谢谢@jns,这就是我真正忘记的,怎么做。我不得不承认,不幸的是,我目前还没有以 UI 为中心进行任何活动编程,所以我基本上是根据我所记得的来写这个的,同时我知道必须有一种更优雅的方式。这就是我失踪的那个。再次感谢。
【解决方案2】:

假设填充按钮后的圆角是白色的,如何用另一种颜色填充这个区域

你说的是“中风”吗?有“填充”(内部)和“描边”(轮廓、外缘、边缘等)

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/shape/Shape.html

Shape 类为表示某种几何形状的对象提供通用属性的定义。

这些属性包括: 应用于形状可填充内部的 Paint(请参阅 setFill)。

用于描边形状轮廓的 Paint(请参阅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)

设置属性描边的值。

属性描述: 使用指定 Paint 的设置定义围绕 Shape 轮廓绘制的笔画参数。除 Line、Polyline 和 Path 之外的所有形状的默认值为 null。这些形状的默认值为 Color.BLACK。

从这里你用一个“Paint”对象填充它,它是许多不同类的基类,例如“Color”

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/paint/Color.html#TRANSPARENT

public static final Color TRANSPARENT

ARGB 值为 #00000000 的完全透明颜色。

所以...总结一下,你会想要做的。

button.setStroke(Color.TRANSPARENT);

如果这当然是你要问的,因为很难说......;但是,我提供的似乎就是您所要求的,但如果不是,我会再试一次:)。

【讨论】:

    【解决方案3】:

    为了将VBox的容器背景设置为透明,则需要将包含VBox的场景的fill属性设置为TRANSPARENT COLOR,下面这段代码说明了这一点:

    这是 vbox 样式:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-12-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多