如何在javafx中正确缩放控件和布局

Question

我想要的位置评级控制(http://fxexperience.com/controlsfx/features/#rating)如下:

<HBox spacing="10.0" alignment="CENTER" >
         <children>
            <Label text="Rating" />
            <Rating  fx:id="rating1" styleClass="scale-half" />
            <Pane HBox.hgrow="ALWAYS"/>
            <Label text="Difficulty" />
            <Rating  fx:id="rating2" styleClass="scale-half" />
         </children>
</HBox>

和

.scale-half {
    -fx-scale-x:0.5;
    -fx-scale-y:0.5;
}

Rating控件的原始大小对于我的目的来说太大了，所以我想缩放它。

问题是，在调用后，Rating控件的布局边界与未调用时相同。

我尝试通过分组容器包装此控件。

这有点帮助。布局正常，但是当鼠标移动到评级控件中的星星上时，会出现阴影效果，并且布局边界增加。

整个HBox也增加了，所以最终效果非常糟糕:抖动布局。

如何避免这种情况?

Answer 1

您可以尝试缩放而不是缩放。但是，由于缩放在FireFox或Opera中不起作用，请尝试以下所有操作:

.scale-half {
    zoom: 0.5; /* IE */
    -moz-transform: scale(0.5); /* Firefox */
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.5); /* Opera */
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.5); /* Safari And Chrome */
    -webkit-transform-origin: 0 0;
    transform: scale(0.5); /* Standard Property */
    transform-origin: 0 0; 
}