Как поместить прямоугольник на изображение и переместить его вверх?

Question

У меня есть этот файл под названием moneyLadder:

Примечание: В программе, изображение не тот размер. Это намного меньше

, а затем, в нижней части денежной лестницы, у меня также есть золотой прямоугольник, который я хочу отобразить на номере 1, и увеличивать его по мере продвижения пользователя. Теперь, когда у меня есть дизайн, макет находится в файле FXML с корневым элементом, являющимся сеткой. Я попытался, возможно, использовать переменную 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> 

Вот скриншот для справки

Update Я недавно изменить прямоугольник быть полупрозрачным и Я также мог использовать translateY, чтобы переместить прямоугольник на дно (конечно, это не то, что я хочу, но это начало).

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, что изображение используется. Затем я перевел его на единицы и х единиц влево. Поэтому я думаю, что каждый раз, когда они правильно отвечают на вопрос, я буду переводить его на единицы.