css3 - JavaFX css border-radius issue -


i trying simulate effect 1 css example:

border-radius: 50%; 

from searching api , reading posts on forums including one, found should using -fx-background-radius. not giving me wanted effect.

i setup picture background using -fx-background-image:url(...) , want make circle.

how can achieve this?

update

so see not being specific let me try elaborate:

i created pane object, extend region class javafx.

main.fxml:

... <pane styleclass="wrapper">     <pane layoutx="34.0" layouty="28.0" styleclass="image" /> </pane> 

for pane created styleclass image seen above.

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

the effect get:

the effect get:

the effect want:

the effect want

i hope explains better.

it looks css border-radius: 50% should create elliptical border, , javafx css does support % shorthand either -fx-border-radius or -fx-background-radius. desired effect, however, use path.subtract() create elliptical matte image, shown below.

image

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

Comments

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

delphi - Take screenshot in webcam using VFrames in Console Application -

meteor - MongoDB URL in MeteorD -