のJavaFX CSSボーダー半径の問題

Question

：

border-radius: 50%; 

APIを検索し、この1を含むフォーラムの投稿を読んでからは、私は私があるべきことがわかりました-fx-background-radiusを使用してください。しかし、これは私に欲しい効果を与えていません。

私は-fx-background-image:url(...)を使用して背景として画像をセットアップしてから、それを円にしたいと思います。

どうすればこの問題を解決できますか？

更新

だから、私はので、私は詳しく説明してみましょうあまりにも特定されていなかったことを参照してください。

私はJavaFXのからRegionクラスを拡張しPaneオブジェクトを作成しました。

main.fxml：上で見たように私はstyleClassのimageを作成し、このペインのために

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

。

の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; 
} 

私が手効果：

私が欲しい効果：

この方が良いと思うことを願っています。

Answer 1

それは楕円形の境界線を作成する必要があります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); 
    } 
} 

Answer 2

ImageViewがRegionのCSSプロパティのいずれかをサポートしていないので、これは、一人でCSSからはできません。

@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(); 
} 

私はそれがイメージがテキストをカバーできるように良い見ていない知っている：あなたはEllipseImageViewためclipとして使用することができますしかし

。これはデモンストレーションの目的でのみ行われます。

Answer 3

1行で、Circleをクリップとします。あなたはsetClipメソッド（任意の形状）：

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

を使用することができますwidth,height,radiusはImageViewのサイズが動作することをslighty小さくすることがあります。

GuiGarage web siteに触発されています。