Question

我有这个名为moneyLadder的图片：

MoneyLadder

注意：在程序中，图像不是那么大。它要小得多

然后，在钱梯的底部，我还有一个黄金矩形，我希望在数字1上出现并随着用户的进展而增加。现在，我设计布局的方式是在FXML文件中，根元素是gridpane。我试图在矩形中使用X和Y变量来查看我是否可以移动它，但这不起作用。有没有什么方法可以让我按照他设计布局的方式来完成这项工作？

为方便起见，矩形和图像位于FXML文件的底部。

FXML文件

<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import java.net.URL?>
<?import javafx.scene.image.*?>
<?import javafx.geometry.*?>

<GridPane  xmlns:fx="http://javafx.com/fxml/1" vgap="25"  fx:controller="millionairetriviagame.GameScreenController">
    <stylesheets>
        <URL value="@BackgroundImages.css"/>
    </stylesheets>
    <stylesheets>
        <URL value="@ButtonLayout.css"/>
    </stylesheets>
    <columnConstraints>
        <ColumnConstraints hgrow="ALWAYS" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints vgrow="ALWAYS" percentHeight="55" />
    </rowConstraints>
    <children>
        <VBox spacing="15" >
            <children>
                <Button fx:id="AudienceButton" onAction="#chooseLifeline"  prefHeight="70" prefWidth="70">
                    <shape>
                        <javafx.scene.shape.Circle radius="1" /> 
                    </shape>
                    <graphic>
                        <ImageView fitHeight="70" fitWidth="70" scaleX="1.2" scaleY="1.2"  smooth="true" >
                            <image>
                                <Image url="@ImageFiles/AudienceButton.png"/>
                            </image>    
                        </ImageView>
                    </graphic>
                </Button>
                <Button fx:id="Button5050" onAction="#chooseLifeline"  prefHeight="70" prefWidth="70">
                    <shape>
                        <javafx.scene.shape.Circle radius="1" /> 
                    </shape>
                    <graphic>
                        <ImageView fitHeight="70" fitWidth="70" scaleX="1.25" scaleY="1.25"  smooth="true" >
                            <image>
                                <Image url="@ImageFiles/5050Button.png"/>
                            </image>    
                        </ImageView>
                    </graphic>
                </Button>
                <Button fx:id="PhoneButton" onAction="#chooseLifeline"  prefHeight="70" prefWidth="70" GridPane.rowIndex="2">
                    <shape>
                        <javafx.scene.shape.Circle radius="1" /> 
                    </shape>
                    <graphic>
                        <ImageView fitHeight="70" fitWidth="70" scaleX="1.25" scaleY="1.25"  smooth="true" >
                            <image>
                                <Image url="@ImageFiles/PhoneAFriendButton.png"/>
                            </image>    
                        </ImageView>
                    </graphic>
                </Button>
            </children>
        </VBox>
        <VBox GridPane.columnIndex="1" alignment="TOP_CENTER" >
            <children>
                <ImageView fitHeight="300" fitWidth="300"  smooth="true">
                    <VBox.margin>
                        <Insets>
                            <right>
                                125
                            </right>
                        </Insets>
                    </VBox.margin>
                    <image>
                        <Image url="@ImageFiles/MillionaireLogo1.png"/>
                    </image>
                </ImageView>
            </children>
        </VBox >
        <VBox GridPane.columnIndex="1" GridPane.rowIndex="1" alignment="CENTER" >
            <children>
                <ImageView fitHeight="200" fitWidth="700" smooth="true">
                    <VBox.margin>
                        <Insets>
                            <right>
                                75
                            </right>
                        </Insets>
                    </VBox.margin>
                    <image>
                        <Image url="@ImageFiles/QuestionFrame.png"/>
                    </image>
                </ImageView>
            </children>
        </VBox>
        <HBox GridPane.rowIndex="2" GridPane.columnIndex="1" spacing="140" >
            <children>
                <Button prefHeight="30" prefWidth="200" id="ButtonLayout">
                    <shape>
                        <javafx.scene.shape.SVGPath content="
                       m181,299l220,1l49,-28l-52,-28l-219,-1l-44,28l46,28z" /> 
                    </shape>
                    <HBox.margin>
                        <Insets >
                            <left>
                                80
                            </left>
                        </Insets>
                    </HBox.margin>
                </Button>
                <Button prefHeight="30" prefWidth="200" id="ButtonLayout">
                    <shape>
                        <javafx.scene.shape.SVGPath content="
                         m181,299l220,1l49,-28l-52,-28l-219,-1l-44,28l46,28z"  /> 
                    </shape>
                </Button>
            </children>
        </HBox>
        <HBox GridPane.rowIndex="3" GridPane.columnIndex="1" spacing="140">
            <children>
                <Button prefHeight="30" prefWidth="200" id="ButtonLayout" >
                    <shape>
                        <javafx.scene.shape.SVGPath content="
                         m181,299l220,1l49,-28l-52,-28l-219,-1l-44,28l46,28z"  /> 
                    </shape>
                    <HBox.margin>
                        <Insets >
                            <left>
                                80
                            </left>
                        </Insets>
                    </HBox.margin>
                </Button>
                <Button prefHeight="30" prefWidth="200" id="ButtonLayout">
                    <shape>
                        <javafx.scene.shape.SVGPath content="
                        m181,299l220,1l49,-28l-52,-28l-219,-1l-44,28l46,28z"  /> 
                    </shape>
                </Button>
            </children>
        </HBox>
        <VBox GridPane.columnIndex="2" alignment="TOP_RIGHT"  >
            <children>
                <ImageView fitHeight="300" fitWidth="300" smooth="true" >
                    <image>
                        <Image url="@ImageFiles/MoneyLadder.png"/>
                    </image>
                </ImageView>     
                <javafx.scene.shape.Rectangle width="300" height="30" fill="goldenrod" />
            </children>
        </VBox>
    </children>
</GridPane>

以下是供参考的屏幕截图

GameScreen

更新我最近将矩形更改为半透明，我也可以使用translateY将矩形移动到底部（当然这不是我想要的但是它＆＆＃39;开始）。

Answer 1

所以我想现在这是一个合适的答案。

   <VBox GridPane.columnIndex="2" alignment="CENTER_RIGHT"  >
        <children>
             <javafx.scene.shape.Rectangle width="250" height="28" fill="goldenrod" opacity="0.5" translateY="100" translateX="-30" />
        </children>
   </VBox>

所以我从VBox中取出矩形并将其放在自己的VBox中，与中心对齐并使用与图像相同的columnIndex。然后我把它翻译成单位向下，x单位向左翻译。所以我猜每次他们正确回答问题时，我会将它翻译成单位。

如何在图像上堆叠矩形并使其向上移动？

1 个答案: