国内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的外层嵌套一层布局,然后把阴影加在布局上。