JavaFx制作圆形头像

国内Fx的资料着实稀少，因此解决了一个问题就记录下来，慢慢的就便多了。前端时间实现了一些问题，没来得及记录现在补上，谨此督促一下自己。

我们知道在FX中显示一个图片可以使用ImageView来实现。那么想要实现圆角或者圆形的 图片肯定也是在其中做文章，查看其API可以发现里面有个public final void setClip(Node value)方法，该方法需要传递一个Node参数。在JavaFx中Node是做有元素的父类，因此我们只需要传递一个有形的Node就可以达到裁剪的目的。
在这里我们使用Fx为我们提供的Shap类，该类也是继承自Node，并且为我们实现了很多现成的形状其中就有Circle.直接上代码：

<ImageView>
     <Image backgroundLoading="true" url="@/icons/users.png"/>
     <fitWidth>30</fitWidth>
     <fitHeight>30</fitHeight>
     <clip>
         <Circle fx:id="circle" fill="aqua" centerX="15" centerY="15">
              <radius>15</radius>
          </Circle>
     </clip>
</ImageView>

效果图

此外我们还可以给它加上阴影这样就会显得更加有实质感。代码如下：

    <StackPane>
        <prefWidth>30</prefWidth>
        <prefHeight>30</prefHeight>
        <padding>
            <Insets topRightBottomLeft="5"/>
        </padding>
         <!--阴影效果-->
        <effect>
            <DropShadow>
                <radius>5</radius>
                <offsetY>2.0</offsetY>
            </DropShadow>
        </effect>
        <ImageView>
            <Image backgroundLoading="true" url="@/icons/users.png"/>
            <fitWidth>30</fitWidth>
            <fitHeight>30</fitHeight>
            <clip>
                <Circle fx:id="circle" fill="aqua" centerX="15" centerY="15">
                    <radius>15</radius>
                </Circle>
            </clip>
        </ImageView>
    </StackPane>

阴影效果

上面的代码，我们给ImageView的外层嵌套一层布局，然后把阴影加在布局上。

欢迎共同探讨更多安卓，java，c/c++相关技术QQ群：392154157