After applying the color adjust effect and redrawing the canvas , the canvas is not being cleared so that i can update the canvas with some other image, the images are overlapping.
I have a Border Pane containing Scroll Pane to adjust large images
The scroll Pane contains the canvas
A function that clears the canvas then adjusts the brightness and applies the effect on canvas.
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Group;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.ScrollPane;
import javafx.scene.effect.ColorAdjust;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class Main extends Application {
Stage primaryStage;
// load the image
Image image = new Image("https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Gatto_europeo4.jpg/1024px-Gatto_europeo4.jpg");
// the container for the image as a javafx node
Canvas canvas = new Canvas(600,700);
GraphicsContext gc = canvas.getGraphicsContext2D();
#Override
public void start(Stage primaryStage) throws Exception{
this.primaryStage = primaryStage;
primaryStage.setTitle("Test");
BorderPane root = new BorderPane();
// container for image layers
ScrollPane scrollPane = new ScrollPane();
// use scrollpane for image view in case the image is large
scrollPane.setContent(canvas);
gc.drawImage(image,0,0,canvas.getWidth(),canvas.getHeight());
changeBrightness(canvas,image);// function to add effect on canvas
// put scrollpane in scene
root.setCenter(scrollPane);
primaryStage.setScene(new Scene(root, 780.0, 620.0));
primaryStage.show();
}
private void changeBrightness(Canvas canvas, Image image) {
//clearing canvas before changing brightness working
gc.clearRect(0,0,canvas.getWidth(),canvas.getHeight());
ColorAdjust colorAdjust = new ColorAdjust();
colorAdjust.setBrightness(0.3);
gc.setEffect(colorAdjust);
gc.drawImage(image,0,0,canvas.getWidth(),canvas.getHeight());
//trying to clear canvas after changing brightness
gc.clearRect(0,0,canvas.getWidth(),canvas.getHeight());
gc.drawImage(image,0,0,canvas.getWidth()/2,canvas.getHeight()/2);
}
public static void main(String[] args) {
launch(args);
}
}
You have to remove the effect on your Graphics object before calling gc.clearRect(...)
Here the code:
package com.simple.test;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Group;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.ScrollPane;
import javafx.scene.effect.ColorAdjust;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class Main extends Application {
Stage primaryStage;
// load the image
Image image = new Image("https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Gatto_europeo4.jpg/1024px-Gatto_europeo4.jpg");
// the container for the image as a javafx node
Canvas canvas = new Canvas(600,700);
GraphicsContext gc = canvas.getGraphicsContext2D();
#Override
public void start(Stage primaryStage) throws Exception{
this.primaryStage = primaryStage;
primaryStage.setTitle("Test");
BorderPane root = new BorderPane();
// container for image layers
ScrollPane scrollPane = new ScrollPane();
// use scrollpane for image view in case the image is large
scrollPane.setContent(canvas);
gc.drawImage(image,0,0,canvas.getWidth(),canvas.getHeight());
changeBrightness(canvas,image);// function to add effect on canvas
// put scrollpane in scene
root.setCenter(scrollPane);
primaryStage.setScene(new Scene(root, 780.0, 620.0));
primaryStage.show();
}
private void changeBrightness(Canvas canvas, Image image) {
//clearing canvas before changing brightness working
gc.clearRect(0,0,canvas.getWidth(),canvas.getHeight());
ColorAdjust colorAdjust = new ColorAdjust();
colorAdjust.setBrightness(0.3);
gc.setEffect(colorAdjust);
gc.drawImage(image,0,0,canvas.getWidth(),canvas.getHeight());
// Remove the effect
gc.setEffect(null);
//trying to clear canvas after changing brightness
gc.clearRect(0,0,canvas.getWidth(),canvas.getHeight());
// Now apply again
gc.setEffect(colorAdjust);
// Redraw
gc.drawImage(image,0,0,canvas.getWidth()/2,canvas.getHeight()/2);
// Remove the effect again
gc.setEffect(null);
}
public static void main(String[] args) {
launch(args);
}
}
You may look at this for further information:
JavaFX GraphicsContext clearRect doesn't work with clip mask
Why won't gc.clearRect clear the canvas?
Btw, cat is cute.
I am new to overflow so I apologize in advance if I am not precise enough.
During a class project I have to make a tanquin game in javafx. I must be able to cut an image into x part in order to insert them then in an Arraylist with an id and the part of the image. But I have the error attached here.
I guess the reader is null and that the error is related to that. But I don't know how to fix it.
I never used those library so i dont know how to use them.
Thank you in advance for your reply.
Code:
package sample;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.image.PixelReader;
import javafx.scene.image.WritableImage;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception{
Image image = new Image("https://scontent-yyz1-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/c180.0.720.720a/s640x640/75272157_461406551233157_7963091763107249286_n.jpg?_nc_ht=scontent-yyz1-1.cdninstagram.com&_nc_cat=105&_nc_ohc=eu-9K8wyx6oAX9H695F&oh=429cc1e6dcec03badc9aac439b6b8ac0&oe=5EAD8EA3", true);
PixelReader reader = image.getPixelReader();
WritableImage newImage = new WritableImage(reader,100,100,100,100);
ImageView imageView = new ImageView(newImage);
HBox hbox = new HBox(imageView);
Scene scene = new Scene(hbox, 640, 640);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
I made a javafx program using a horizontal SplitPane with a Canvas on one side in which something is drawn. When the SplitPane is resized the Canvas resizes with it.
Everything worked fine until I switched to Java 10. Suddenly the Canvas-side can only be expanded, not reduced.
Anyone has an idea why that is?
(The working Java version was 1.8.0_181)
package test;
import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class Test extends Application {
private static Display display;
#Override
public void start(Stage primaryStage) {
display = new Display();
StackPane stackPaneDisplay = new StackPane();
stackPaneDisplay.getChildren().add(display);
stackPaneDisplay.setStyle("-fx-background-color: white");
AnchorPane anchorPaneDisplay = new AnchorPane();
anchorPaneDisplay.getChildren().add(stackPaneDisplay);
AnchorPane.setBottomAnchor(stackPaneDisplay, Double.MIN_VALUE);
AnchorPane.setTopAnchor(stackPaneDisplay, Double.MIN_VALUE);
AnchorPane.setLeftAnchor(stackPaneDisplay, Double.MIN_VALUE);
AnchorPane.setRightAnchor(stackPaneDisplay, Double.MIN_VALUE);
display.widthProperty().bind(stackPaneDisplay.widthProperty());
display.heightProperty().bind(stackPaneDisplay.heightProperty());
StackPane stackPaneLeft = new StackPane();
SplitPane splitPane = new SplitPane();
splitPane.setOrientation(Orientation.HORIZONTAL);
splitPane.getItems().addAll(stackPaneLeft, anchorPaneDisplay);
BorderPane root = new BorderPane();
root.setCenter(splitPane);
Scene scene = new Scene(root);
primaryStage.setMaximized(true);
primaryStage.setScene(scene);
primaryStage.show();
splitPane.setDividerPositions(0.2);
}
public static void main(String[] args) {
launch(args);
}
}
and the Canvas-Class
package test;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
public class Display extends Canvas {
GraphicsContext gc = this.getGraphicsContext2D();
public Display() {
widthProperty().addListener(e -> {
draw();
});
}
public void draw() {
gc.strokeOval(500, 500, 100, 100);
}
}
Thanks in advance
I have the image files in my bin folder but when I run my program all I have is my button options that are not being replaced with my images. I think it has something to do with the file: in front of the images but I'm not sure. The images are not actually a moving gif (dunno why its called gif).
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class Project4 extends Application {
public static void main(String[] args) {
launch(args);
}
public void start(Stage primaryStage) throws Exception {
HBox root = new HBox();
Button btnKings;
Button btnDucks;
Button btnSharks;
Button btnBlues;
btnKings = new Button("Kings");
btnDucks = new Button("Ducks");
btnSharks = new Button("Sharks");
btnBlues = new Button("Blues");
Image imgKings = new Image("file:kings.jpg");
btnKings.setGraphic(new ImageView(imgKings));
Image imgDucks = new Image("file:ducks.gif");
btnDucks.setGraphic(new ImageView(imgDucks));
Image imgSharks = new Image("file:sharks.gif");
btnSharks.setGraphic(new ImageView(imgSharks));
Image imgBlues = new Image("file:blues.gif");
btnBlues.setGraphic(new ImageView(imgBlues));
HandleButtonClick clickEvent = new HandleButtonClick();
btnKings.setOnAction(clickEvent);
btnDucks.setOnAction(new HandleButtonClick("You clicked the ducKS!"));
btnKings.setOnAction(new HandleButtonClick("You clicked the Kings"));
btnSharks.setOnAction(new HandleButtonClick("You clicked the sharks"));
btnBlues.setOnAction(new HandleButtonClick("You clicked the blues"));
root.getChildren().add(btnKings);
root.getChildren().add(btnDucks);
root.getChildren().add(btnSharks);
root.getChildren().add(btnBlues);
Scene scene = new Scene(root, 960, 130);
primaryStage.setTitle("HockeyButtons");
primaryStage.setScene(scene);
primaryStage.show();
}
}
I cant find out how to replace the words buttons with the pictures
Nghia Duong
If you want only images to be shown on the button but text then you should create Button without text.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class Project4 extends Application {
public static void main(String[] args) {
launch(args);
}
public void start(Stage primaryStage) throws Exception {
HBox root = new HBox();
Button btnKings;
Button btnDucks;
Button btnSharks;
Button btnBlues;
btnKings = new Button();
btnDucks = new Button();
btnSharks = new Button();
btnBlues = new Button();
Image imgKings = new Image("kings.jpg");
btnKings.setGraphic(new ImageView(imgKings));
Image imgDucks = new Image("ducks.gif");
btnDucks.setGraphic(new ImageView(imgDucks));
Image imgSharks = new Image("sharks.gif");
btnSharks.setGraphic(new ImageView(imgSharks));
Image imgBlues = new Image("blues.gif");
btnBlues.setGraphic(new ImageView(imgBlues));
root.getChildren().add(btnKings);
root.getChildren().add(btnDucks);
root.getChildren().add(btnSharks);
root.getChildren().add(btnBlues);
Scene scene = new Scene(root, 960, 130);
primaryStage.setTitle("HockeyButtons");
primaryStage.setScene(scene);
primaryStage.show();
}
}
And here you are showing the path of the image incorrectly.
Image imgKings = new Image("file:kings.jpg");
You'd better show absolute path or if the images are in classpath folder then by:
String absolutePathToIcon =
getClass().getResource("kings.jpg").toExternalForm();
Image imgKings = new Image(absolutePathToIcon);
How I will get white rectangle in the middle of scene. I wanna preserve my own code and the height and width of it. Probably it should be use to set X and Y layouts. but I do not know how. When I set them, it resize it from upper left corner.
Code:
Pane paneCanvas = new Pane();
final Canvas canvas = new Canvas();
paneCanvas.setStyle("-fx-background-color: white;");
canvas.setHeight(32);
canvas.setWidth(32);
paneCanvas.getChildren().add(canvas);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
Try this example ... for position in middle of scene you can calculate width this formula:
layoutxcanvas=(widthscene/2)-(widthcanvas/2)
layoutycanvas=(heightscene/2)-(heightcanvas/2)
import java.awt.Graphics2D;
import java.awt.Paint;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class JavaFXApplication1 extends Application {
#Override
public void start(Stage primaryStage) {
Pane paneCanvas = new Pane();
final Canvas canvas = new Canvas();
paneCanvas.setStyle("-fx-background-color: black;");
canvas.setHeight(32);
canvas.setWidth(32);
canvas.getGraphicsContext2D().setFill(Color.WHITE);
canvas.getGraphicsContext2D().fillRect(0, 0, 32, 32);
canvas.setLayoutX((300/2)-(32/2));
canvas.setLayoutY((300/2)-(32/2));
paneCanvas.getChildren().add(canvas);
Scene scene=new Scene(paneCanvas,300,300);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}