如何在按钮上居中缩放矢量图形?

时间:2015-04-02 13:48:41

标签: button svg javafx fxml

我想绘制以按钮为中心的缩放SVGPath节点。按钮应保持其大小与图像大小无关,SVGPath应保持其相对位置。

我是JavaFX的新手,所以也许我采取了错误的方法。基本上我正在尝试使用覆盖的SVG图像创建没有文本的按钮。

问题是按钮图像被移位了。

<Button prefWidth="30" prefHeight="30">
    <padding>
        <Insets top="0" right="0" bottom="0" left="0"/>
    </padding>
    <graphic>
        <Pane scaleX="0.3" scaleY="0.3">
            <SVGPath fill="BLACK" content="M92.032,33.384L69.047,55.835l5.465,31.662L46.057,72.576L17.634,87.557l5.398-31.673L0,33.481l31.791-4.654L45.98,0
l14.25,28.797L92.032,33.384z"/>
            <SVGPath fill="RED"
                     content="M65.681,48.339c0,10.776-8.804,19.512-19.665,19.512s-19.665-8.736-19.665-19.512
            s8.804-19.512,19.665-19.512S65.681,37.563,65.681,48.339z"/>
        </Pane>
    </graphic>
</Button>

1 个答案:

答案 0 :(得分:1)

我找到了解决方案。我认为关键是Group文档的这一部分:

“应用于组的任何变换,效果或状态都将应用于该组的所有子项。此类变换和效果将不包含在此组的布局范围中,但是如果直接设置变换和效果对于本集团的子女,这些将包括在本集团的布局范围内。

<Group>
   <Pane scaleX="0.25" scaleY="0.25">
       <SVGPath fill="BLACK"
             content="M92.032,33.384L69.047,55.835l5.465,31.662L46.057,72.576L17.634,87.557l5.398-31.673L0,33.481l31.791-4.654L45.98,0
l14.25,28.797L92.032,33.384z"/>
       <SVGPath fill="RED"
             content="M65.681,48.339c0,10.776-8.804,19.512-19.665,19.512s-19.665-8.736-19.665-19.512
            s8.804-19.512,19.665-19.512S65.681,37.563,65.681,48.339z"/>
   </Pane>
</Group>