國內(nèi)Fx的資料著實稀少贱枣，因此解決了一個問題就記錄下來，慢慢的就便多了颤专。前端時間實現(xiàn)了一些問題纽哥，沒來得及記錄現(xiàn)在補上，謹(jǐn)此督促一下自己栖秕。
我們知道在FX中顯示一個圖片可以使用ImageView來實現(xiàn)春塌。那么想要實現(xiàn)圓角或者圓形的 圖片肯定也是在其中做文章，查看其API可以發(fā)現(xiàn)里面有個public final void setClip(Node value)方法，該方法需要傳遞一個Node參數(shù)只壳。在JavaFx中Node是做有元素的父類俏拱，因此我們只需要傳遞一個有形的Node就可以達到裁剪的目的。
在這里我們使用Fx為我們提供的Shap類吼句，該類也是繼承自Node锅必，并且為我們實現(xiàn)了很多現(xiàn)成的形狀其中就有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>
效果圖
此外我們還可以給它加上陰影這樣就會顯得更加有實質(zhì)感。代碼如下：
<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的外層嵌套一層布局搞隐，然后把陰影加在布局上。
