How to set an image in a circle - javafx

How could I set an image in a circle. Is there a better way to set an image with a circled frame? (particularly the image frame on windows 10 login screen)
Circle cir2 = new Circle(250,200,80);
cir2.setStroke(Color.SEAGREEN);
cir2.setFill(Color.SNOW);
cir2.setEffect(new DropShadow(+25d, 0d, +2d, Color.DARKSEAGREEN));

ImagePattern is what you are looking for.
It fills a Shape with an Image, so your code might look like this
cir2.setFill(new ImagePattern(Image));
test code
public void start(Stage primaryStage) {
try {
BorderPane root = new BorderPane();
root.setPadding(new Insets(10));
Scene scene = new Scene(root,400,400);
Label l = new Label("SHAPE IMAGE OF MY SISTER");
l.setFont(Font.font(Font.getFontNames().get(23), FontWeight.EXTRA_BOLD, 14));
l.setAlignment(Pos.CENTER);
l.setPrefWidth(Double.MAX_VALUE);
root.setTop(l);
///////////////important code starts from here
Circle cir2 = new Circle(250,250,120);
cir2.setStroke(Color.SEAGREEN);
Image im = new Image("https://juicylinksmag.files.wordpress.com/2016/02/juliet-ibrahim.jpg",false);
cir2.setFill(new ImagePattern(im));
cir2.setEffect(new DropShadow(+25d, 0d, +2d, Color.DARKSEAGREEN));
//////////////important code ends here
root.setCenter(cir2);
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}

Related

Frosted Glass Clipping in JavaFX

I'm trying to achieve this effect here but on a static background (without the scrolling). I'm getting this weird clip on my results though (without the frost effect). I think I know where the problem is in my code but I'm not sure how to solve it.
public class App extends Application {
private static final double BLUR_AMOUNT = 80;
private static final Effect frostEffect = new BoxBlur(BLUR_AMOUNT, BLUR_AMOUNT, 3);
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) throws Exception {
ImageView background = new ImageView(bgImage);
StackPane centerBlurredPane = (StackPane) frozenCenterUI();
BorderPane centerContent = new BorderPane();
centerContent.setCenter(new Text("Center"));
centerContent.setTop(new Text("Top"));
centerContent.setLeft(new Text("Left"));
centerContent.setRight(new Text("Right"));
centerBlurredPane.getChildren.add(centerContent);
Scene scene = new Scene(new StackPane(background,centerBlurredPane),414, 849);
primaryStage.setScene(scene);
primaryStage.show();
}
private Node frozenCenterUI() {
Image frostImage = background.snapshot(new SnapshotParameters(), null);
ImageView frost = new ImageView(frostImage);
Rectangle filler = new Rectangle(24, 762, 366, 696);
filler.setArcHeight(50);
filler.setArcWidth(50);
filler.setFill(Color.AZURE);
Pane frostPane = new Pane(frost);
frostPane.setEffect(frostEffect);
StackPane frostView = new StackPane(filler, frostPane);
Rectangle clipShape = new Rectangle(24, 762, 366, 696);
frostView.setClip(clipShape);
return frostView;
}
}
This is what i'm getting, however. I want to apply frost on the white area here.
What should my clip shape be?
Here's my background image, backgroundImage
Edit: I found that if I change my clipShape to have the same dimensions as the scene, then I get the desired effect. However, the BorderPane I added to the frozen pane is not constrained to it, but actually stretches and fills the entire window.

multiple Scenes in single Stage

facing Difficulties to create multiple scenes in a single stage.
this is the init method where i've loaded two images.
public void init() {
Rotate rotate=new Rotate();
rotate.setAngle(0.0);
rotate.setPivotX(1000/2);
rotate.setPivotY(1020/2);
Image img=new Image("file:///C:/Users/Avi/Desktop/test.jpg");
ImageView view=new ImageView(img);
Image back=new Image("file:///C:/Users/Avi/Desktop/background.jpg");
ImageView backview=new ImageView(back);
view.setOpacity(0.25);
view.setX(1000/2);
view.setY(1020/2);
sp_mainlayout = new StackPane();
backlay=new StackPane();
cc_custom = new CustomControl();
sp_mainlayout.getChildren().add(backview);
sp_mainlayout.getChildren().add(view);
sp_mainlayout.getChildren().add(cc_custom);
backlay.getChildren().add(backview);
}
Now in the start method the stage is single but i want to show one image at the background at a large size and the other one in front of it in a smaller size. But two scenes aren't working together. Need some modification for the code.(the sizes of the scenes will be different)
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("Chess game");
Scene scene1 =new Scene(sp_mainlayout,800,600);
primaryStage.setScene(scene1);
primaryStage.show();
Scene scene =new Scene(backlay,800,600);
primaryStage.setScene(scene);
primaryStage.setMinWidth(300);
primaryStage.setMinHeight(300);
primaryStage.setResizable(false);
primaryStage.show();
}

javafx - Navigation Sidebar with Toggle

So in windows 10 you have the windows menu with the icons on the left side:
When clicking on the hamburger icon the menu expands and text is show.
The expanded part is overlaying the content. The text is showing. and it was animated in (sliding transition).
In my application I want to make a similar menu on the right side (see blue part):
I have absolutely no idea how to get this effect. Currently I made a button with a graphic. I only display the graphic and when I click on the hamburger I show all the text by changing the setContentDisplay(ContentDisplay.GRAPHIC_ONLY) to setContentDisplay(ContentDisplay.RIGHT) 2 things that are wrong with this approach.
it pushes the content.
You cannot add a transition.
Any help would be appreciated, especially examples.
Demo
I made a demo that shows what I currently have:
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
BorderPane root = new BorderPane();
JFXButton[] jfxButtons = {
new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
};
JFXHamburger hamburger = new JFXHamburger();
HamburgerNextArrowBasicTransition transition = new HamburgerNextArrowBasicTransition(hamburger);
transition.setRate(-1);
hamburger.setAlignment(Pos.CENTER_RIGHT);
hamburger.setPadding(new Insets(5));
hamburger.setStyle("-fx-background-color: #fff;");
hamburger.setOnMouseClicked(event -> {
transition.setRate(transition.getRate() * -1);
transition.play();
if (transition.getRate() == -1) {
for (JFXButton jfxButton : jfxButtons) {
jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
}
} else {
for (JFXButton jfxButton : jfxButtons) {
jfxButton.setContentDisplay(ContentDisplay.RIGHT);
}
}
});
ScrollPane scrollPane = new ScrollPane();
VBox vBox = new VBox();
scrollPane.setContent(vBox);
vBox.getStyleClass().add("content_scene_right");
vBox.getChildren().add(hamburger);
vBox.getChildren().addAll(jfxButtons);
for (JFXButton jfxButton : jfxButtons) {
jfxButton.setMaxWidth(Double.MAX_VALUE);
jfxButton.setRipplerFill(Color.valueOf("#40E0D0"));
VBox.setVgrow(jfxButton, Priority.ALWAYS);
jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
}
vBox.setFillWidth(true);
Label labelHoverOverTest = new Label("Testing label");
VBox vbox2 = new VBox();
vbox2.getChildren().addAll(labelHoverOverTest);
vbox2.setAlignment(Pos.CENTER_RIGHT);
root.setRight(scrollPane);
root.setCenter(vbox2);
Scene scene = new Scene(root);
primaryStage.setMinWidth(400);
primaryStage.setMinHeight(400);
primaryStage.setScene(scene);
primaryStage.show();
}
}
I used JFoenix and fontawesomefx for this demo, but it can also be javafx scene buttons with any graphic.
Here are some images of what the demo looks like:
As you can see it pushes it the content in the center and I can't add any transition.
(here is a sample from bootstrap to give you an idea on What I'm trying to make it look like 1: https://bootsnipp.com/snippets/Pa9xl, 2: https://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle (with this one the content still moves, but it should give you a clear idea on what my vision is))
Problem is that you are using BorderPane and placing everything on same layer, so when content on right changes width it will affect one in the center and such.
In other to avoid this you should make it layered, so for root of view use StackPane, this pane should have 2 children, 1 for main content and 1 for sidebar, make sure that sidebar is above main content, now this 2 can be any Pane that you want. This way sidebar will be placed over main content and it won't push content.
Using code you provided and just adding StackPane you get something like this:
#Override
public void start(Stage primaryStage) {
StackPane root = new StackPane();
BorderPane mainContent = new BorderPane();
BorderPane sidebar = new BorderPane();
JFXButton[] jfxButtons = {
new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),};
JFXHamburger hamburger = new JFXHamburger();
HamburgerNextArrowBasicTransition transition = new HamburgerNextArrowBasicTransition(hamburger);
transition.setRate(-1);
hamburger.setAlignment(Pos.CENTER_RIGHT);
hamburger.setPadding(new Insets(5));
hamburger.setStyle("-fx-background-color: #fff;");
hamburger.setOnMouseClicked(event -> {
transition.setRate(transition.getRate() * -1);
transition.play();
if (transition.getRate() == -1) {
for (JFXButton jfxButton : jfxButtons) {
jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
}
} else {
for (JFXButton jfxButton : jfxButtons) {
jfxButton.setContentDisplay(ContentDisplay.RIGHT);
}
}
});
ScrollPane scrollPane = new ScrollPane();
VBox vBox = new VBox();
scrollPane.setContent(vBox);
vBox.getStyleClass().add("content_scene_right");
vBox.getChildren().add(hamburger);
vBox.getChildren().addAll(jfxButtons);
for (JFXButton jfxButton : jfxButtons) {
jfxButton.setMaxWidth(Double.MAX_VALUE);
jfxButton.setRipplerFill(Color.valueOf("#40E0D0"));
VBox.setVgrow(jfxButton, Priority.ALWAYS);
jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
}
vBox.setFillWidth(true);
Label labelHoverOverTest = new Label("Testing label");
VBox vbox2 = new VBox();
vbox2.getChildren().addAll(labelHoverOverTest);
vbox2.setAlignment(Pos.CENTER_RIGHT);
mainContent.setCenter(vbox2);
sidebar.setRight(scrollPane);
root.getChildren().addAll(mainContent, sidebar);
Scene scene = new Scene(root);
primaryStage.setMinWidth(400);
primaryStage.setMinHeight(400);
primaryStage.setScene(scene);
primaryStage.show();
}
As for transition I'm not sure what is problem there, for me it works fine.

JAVAFX: How can I put this into one window instead of two?

I've been trying to make a toolbar inside a window with a checkers game, what happens now is, Checkers game opening in a separate window and so is the toolbar, what am I doing wrong? How can I make this code open in one window with both functions?
#Override
public void start(Stage primaryStage) throws Exception {
Stage toolStage = new Stage();
Button btnNewGame = new Button("New Game");
Button btnConcede = new Button("Concede");
Button btnNetwork = new Button("Network");
ToolBar toolBar = new ToolBar();
toolBar.getItems().addAll( new Separator(), btnNewGame, btnConcede, btnNetwork);
BorderPane pane = new BorderPane();
pane.setTop(toolBar);
Scene toolScene = new Scene(pane, 600, 400);
toolStage.setScene(toolScene);
toolStage.show();
Scene scene = new Scene(createContent());
primaryStage.setTitle("Dam spill - OBJ2000 Eksamen 2016");
primaryStage.setScene(scene);
primaryStage.show();
}
You're creating a new Scene+Stage fot the toolbar, show it and then show the content in the primaryStage instead of adding both toolbar and content as parts of the same scene, e.g. by adding the content as center node of the BorderPane:
#Override
public void start(Stage primaryStage) throws Exception {
Button btnNewGame = new Button("New Game");
Button btnConcede = new Button("Concede");
Button btnNetwork = new Button("Network");
ToolBar toolBar = new ToolBar();
toolBar.getItems().addAll( new Separator(), btnNewGame, btnConcede, btnNetwork);
BorderPane pane = new BorderPane();
pane.setTop(toolBar);
pane.setCenter(createContent());
Scene scene = new Scene(pane, 600, 400);
primaryStage.setTitle("Dam spill - OBJ2000 Eksamen 2016");
primaryStage.setScene(scene);
primaryStage.show();
}

how to rotate reflection from Imageview?

My question concerns rotating the reflection of imageview. Is it possible or not?
my code is shown below:
Group root = new Group();
File file = new File("c://Users/Garm/Downloads/AnimGif.gif");
Image image1 = new Image(file.toURI().toString());
ImageView view = new ImageView(image1);
view.setFitHeight(image1.getHeight()/2);
view.setFitWidth(image1.getWidth()/2);
root.getChildren().add(view);
view.setOnMouseClicked(new EventHandler<MouseEvent>()
{
#Override
public void handle(MouseEvent t)
{
System.exit(0);
}
});
Reflection reflection = new Reflection();
reflection.setFraction(1.0);
reflection.setTopOffset(55.5);
reflection.setTopOpacity(0.600);
reflection.setBottomOpacity(0.001);
view.setEffect(reflection);
Scene scene = new Scene(root, image1.getWidth(), image1.getHeight());
stage.setTitle("Animated GIF");
stage.setScene(scene);
stage.initStyle(StageStyle.TRANSPARENT);
stage.show();
In my code, I would like to object reflection was rotated 90 degrees. Whether it is feasible, and if not, can anyone give an idea to solve this problem. Thank you for all your help and guidance on this topic.

Resources