JImageCanvas Tutorial Hello

The first aim of JImageCanvas is to display images. Here is the code of a simple JavaFX / JCommon JFX application based on a JImageCanvas:

import org.jorigin.Common;
import org.jorigin.jfx.JImageCanvas;

import javafx.application.Application;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.layout.BorderPane;
import javafx.scene.paint.Color;
import javafx.stage.Screen;
import javafx.stage.Stage;

public class JImageCanvasSample01 extends Application{

	@Override
	public void start(Stage primaryStage) throws Exception {

		Rectangle2D screenBounds = Screen.getPrimary().getBounds();
		
		// load image
		Image image = new Image(getClass().getResource("/image/landscape/mountain-lake-320x200.jpg").toExternalForm());
		
		// Create display
		JImageCanvas canvas = new JImageCanvas(image);

		canvas.setBackgroundPaint(Color.DARKGRAY);
		
		canvas.setAutoFit(false);

		BorderPane centerPane = new BorderPane();
		centerPane.setMinSize(0.0d, 0.0d);

		centerPane.setCenter(canvas);
		
		Scene scene = new Scene(centerPane);

		primaryStage.setWidth(screenBounds.getWidth() / 2.0d);
		primaryStage.setHeight(screenBounds.getHeight() / 2.0d);
		primaryStage.setTitle("JImageCanvas Sample");

		primaryStage.setScene(scene);

		primaryStage.show();
	}

	public static void main(String[] args) {
		Common.init();
		launch(args);
	}

}

This code is accessible from the jcommon-sample library (JImageCanvasSample01.java). It load an image from the library resources and display it within an application. If there is no access to the JCommon sample resources, the image can be downloaded, placed within the execution directory and the code for image loading can be replaced by:

Image image = new Image("file:mountain-lake-320x200.jpg");

As JavaFX image loading only deals with URL, the file: is needed before the path of the image. If the application is running correctely, the following display is expected:

The JImageCanvas integrates many controls and functionnalities. The first ones are dedicated to the move of the view using default contols:

• The image can be dragged within the canvas using the mouse dragging
• The image can be zommed using the mouse scroll

You can try these controls before passing to the next tutorial.