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 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.
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
Post a Comment