我試圖模擬一個會得到這個CSS例子效果：JavaFX的CSS邊界半徑的問題

border-radius: 50%;

從搜索API和閱讀論壇上的帖子，包括這一次，我發現，我應該是使用-fx-background-radius。然而這並不能給我想要的效果。

我使用-fx-background-image:url(...)設置了一張圖片作爲背景，然後我想將它製成一個圓圈。

我該如何做到這一點？

更新

因此，我認爲，我是不是太具體，所以讓我嘗試闡述：

我創建了一個Pane對象，這並從JavaFX的擴展Region類。

main.fxml：

... 
<Pane styleClass="wrapper"> 
    <Pane layoutX="34.0" layoutY="28.0" styleClass="image" /> 
</Pane>

對於該窗格我創建的styleClass image如上所見。

的main.css：

.list-contact .image { 
    -fx-alignment:left; 
    -fx-pref-height:40px; 
    -fx-pref-width:40px; 
    -fx-background-radius:50%; 
    -fx-background-image:url(...); 
    -fx-background-repeat:no-repeat; 
}

的影響，我得到：

的影響我想：

我希望這可以更好地解釋它。

來源

2016-06-24 miniwolf

你能解釋一下這一點嗎？邊界半徑：50％是什麼？你有沒有可以嵌入你的問題的示例圖像？你只是想創建一個剪切成圓形的背景圖片（使用JavaFX CSS）？你想改變顯示背景圖像的整個區域的形狀，還是要留下一個圓形背景的正方形區域？ – jewelsea

[如何製作3xp直徑圓形的javafx按鈕？]（http://stackoverflow.com/questions/26850828/how-to-make-a-javafx-button-with-circle-shape-直徑爲3xp） –

@OJKrylow：不，'ImageView'不像'Button'那樣是一個'Region' ... – fabian

它看起來像一個CSS border-radius: 50%應該創建一個橢圓形的邊框，JavaFX CSS不支持%簡寫或者-fx-border-radius或-fx-background-radius。但是，要獲得所需的效果，請使用Path.subtract()爲圖像創建橢圓遮罩，如下所示。

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.image.Image; 
import javafx.scene.image.ImageView; 
import javafx.scene.layout.StackPane; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Ellipse; 
import javafx.scene.shape.Path; 
import javafx.scene.shape.Rectangle; 
import javafx.scene.shape.Shape; 
import javafx.stage.Stage; 

/** 
* @see http://stackoverflow.com/a/38008678/230513 
*/ 
public class Test extends Application { 

    private final Image IMAGE = new Image("http://i.imgur.com/kxXhIH1.jpg"); 

    @Override 
    public void start(Stage primaryStage) { 
     primaryStage.setTitle("Test"); 
     int w = (int) (IMAGE.getWidth()); 
     int h = (int) (IMAGE.getHeight()); 
     ImageView view = new ImageView(IMAGE); 
     Rectangle r = new Rectangle(w, h); 
     Ellipse e = new Ellipse(w/2, h/2, w/2, h/2); 
     Shape matte = Path.subtract(r, e); 
     matte.setFill(Color.SIENNA); 
     StackPane root = new StackPane(); 
     root.getChildren().addAll(view, matte); 
     Scene scene = new Scene(root); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
}

來源

2016-06-24 08:15:46 trashgod

這不是單從CSS可能的，因爲ImageView不支持任何Region的CSS屬性。

但是你可以使用的ImageView一個Ellipse爲clip：

@Override 
public void start(Stage primaryStage) throws MalformedURLException { 
    Image img = new Image("https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Space_Needle_2011-07-04.jpg/304px-Space_Needle_2011-07-04.jpg"); 
    ImageView iv = new ImageView(img); 
    Ellipse ellipse = new Ellipse(img.getWidth()/2, img.getHeight()/2, img.getWidth()/2, img.getHeight()/2); 
    iv.setClip(ellipse); 

    Text text = new Text("Space Needle, Seattle, Washington, USA"); 
    StackPane.setAlignment(text, Pos.TOP_CENTER); 

    StackPane root = new StackPane(text, iv); 

    Scene scene = new Scene(root, img.getWidth(), img.getHeight()); 
    scene.setFill(Color.AQUAMARINE); 

    primaryStage.setScene(scene); 
    primaryStage.show(); 
}

我知道它看起來並不好讓圖像覆蓋文本。這只是爲了演示的目的。

來源

2016-06-24 10:11:40 fabian

在一行Circle作爲剪輯。您可以使用setClip的（任何形狀）：

imageView.setClip(new Circle(width,height,radius);

的width,height,radius必須略低越小ImageView的大小來工作。

受GuiGarage web site的啓發。

來源

2016-06-24 18:52:58 GOXR3PLUS

JavaFX的CSS邊界半徑的問題

更新

回答

相關問題