如何围绕按钮缩放的矢量图形？ [英] How to center scaled vector graphic on Button?

问题描述

我想提请围绕按钮缩放SVGPath节点。按钮应该保持独立的图像尺寸的大小以及SVGPaths应保留它们的相对位置。

我是新来的JavaFX所以也许我采取错误的做法。基本上，我试图用不重叠SVG图像文本创建按钮。

问题是，按钮图像移位。

 ＆LT;按钮prefWidth =30prefHeight =30＆GT;
    ＆LT;＆填充GT;
        ＆所述;插图顶端=0右=0底部=0左=0/＆GT;
    ＆LT; /填充＆GT;
    ＆LT;＆图形GT;
        ＆所述;窗格的scaleX =0.3的scaleY =0.3＆GT;
            ＆LT; SVGPath填写=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/＆GT;
            ＆LT; SVGPath填写=RED
                     内容=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/＆GT;
        ＆LT; /窗格＆GT;
    ＆LT; /图形＆GT;
＆LT; /按钮＆GT;
 

解决方案

我找到了解决办法。我认为关键是组文件的这一部分：

任何变换，效果，或者应用到一组状态将被应用到该组的所有孩子。这样的变换和效果将不包括在该组的布局界限，但是如果变换和效果直接设置这个小组的孩子，那些将被纳入本集团的布局界限。

 ＆LT;组＆gt;
   ＆LT;面板的scaleX =0.25的scaleY =0.25＆GT;
       ＆LT; SVGPath填写=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/＆GT;
       ＆LT; SVGPath填写=RED
             内容=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/＆GT;
   ＆LT; /窗格＆GT;
＆LT; /组＆gt;
 

I want to draw scaled SVGPath nodes centered on button. Button should maintain its size independent of image size, and SVGPaths should retain their relative positions.

I am new to JavaFX so maybe I'm taking the wrong approach. Basically I'm trying to create button without text with overlayed SVG image.

Problem is that button image is displaced.

<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>

解决方案

I found the solution. I think the key was this part of Group documentation:

"Any transform, effect, or state applied to a Group will be applied to all children of that group. Such transforms and effects will NOT be included in this Group's layout bounds, however if transforms and effects are set directly on children of this Group, those will be included in this Group's layout bounds."

<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>

这篇关于如何围绕按钮缩放的矢量图形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！