如何在 javafx 中正确缩放控制和布局答案

【问题标题】：How to scale control and layout it properly in javafx如何在 javafx 中正确缩放控制和布局
【发布时间】：2014-06-02 14:37:09
【问题描述】：

我想要位置评级控制（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;
}

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

问题是，在缩放之后，Rating 控件的布局边界和没有缩放时一样。

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

这有点帮助。布局没问题，但是在 Rating 控件中将鼠标移到星上后，出现阴影效果并且布局边界增加了。

整个HBox也增加了，所以最终效果很差：抖动布局。

如何避免？

【问题讨论】：

标签： java css layout javafx effects

【解决方案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; 
}

【讨论】：