JavaFX Scene Builder 2.0如何将图像添加到标签

我正在使用JavaFX Scene Builder 2.0，我想使用FXML将image添加到label。JavaFX Scene Builder 2.0如何将图像添加到标签

在oracle docs，我们可以发现如何实现这一目标使用Java代码，但我想实现这个使用场景生成器

2014-09-18 user3375401

有两种方法来实现这个

使用FXML
使用CSS

FXML

<Label text="My Image"> 
    <graphic> 
     <ImageView fitWidth="150" preserveRatio="true" smooth="true"> 
     <image> 
      <Image url="myImage.png"/> 
     </image> 
     </ImageView> 
    </graphic> 
</Label>

在场景构建器中，将一个ImageView拖动到一个标签的顶部，它将自动设置为该标签的图形。然后选择ImageView并在“场景生成器”属性窗格的ImageView的图像字段中键入图像的URL。

CSS

在FXML分配一个id到Label。你还会发现一个id作为标签的场景生成器属性

<Label text= "My Image" id = "labelwithimage"/>

现在，您可以指定CSS值直接FXML（使事情变得笨拙），或创建一个新的CSS文件，并在其定义的属性

直接分配

<Label text= "My Image" id = "labelwithimage" style="-fx-graphic:url('myImage.png'); -fx-graphic-text-gap : 10;"/>

对于在CSS文件中定义它，你需要创建一个CSS文件，明确反对id assig的atrributes斯内德在Label，包括它在FXML

mycss.css

#labelwithimage {   
    -fx-graphic: url("myImage.png"); 
    -fx-graphic-text-gap : 10; 
}

正如你可能已经猜到了，-fx-graphic确实是我们内部<graphic></graphic>写的一切，很少有其他属性，如-fx-graphic-text-gap。你可以在Label中找到所有可用于css reference guide for label

现在在css中的最后一件事是在fxml中加载css。为此，您需要包含以下标签内你FXML

<stylesheets> 
    <URL value="@mycss.css" /> 
</stylesheets>

只要确保有在FXML

来源

2014-09-19 06:45:05 ItachiUchiha

还有一种方法，在https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Labeled.html#setGraphic-javafx.scene.Node- – Zavael 2015-12-11 10:06:55

也可以直接在现场生成器做适当的进口，而不手动触摸FXML或CSS。

只需将ImageView节点拖放到标签上即可。然后可以在添加的ImageView节点上设置图像的路径。

或者，您可以将图像文件从文件资源管理器（或等效文件）拖到Scene Builder中的标签中。 Scene Builder将自动添加中间ImageView节点。然后，您可以根据需要调整路径（相对于文档，类路径相对等）。

实际上，该方法与Java代码以及FXML的直接修改相同：只需将ImageView设置为标签的“图形”节点即可。

这也适用于按钮。

来源

2015-06-30 11:01:23 Padrig

这应该是被接受的答案。 – 2016-03-12 00:40:00

JavaFX Scene Builder 2.0如何将图像添加到标签

回答

相关问题