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>

和css：

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

评级控制的原始大小对我的purpouse来说很大，所以我想缩放它。

问题是，在scalling之后，Rating的控件的布局界限与没有scalling的一样。

我尝试用Group容器包装这个控件。

这有点帮助。布局还可以，但是在评级控件中将鼠标移动到星形之后，会出现阴影效果并且布局边界会增加。

整个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; 
}

如何在javafx中正确扩展控件和布局

1 个答案: