Masking in Javafx 2.0

by Narayan G. Maharjan
June 22, 2011January 31, 2012
17 Comments

Hello , Today I’m going to show the small demo of masking. In javafx masking is known as clipping. Every Node Object has

public final void <strong>setClip</strong>(<a title="class in javafx.scene">Node</a> value)

1	public final void <strong>setClip</strong>(<a title="class in javafx.scene">Node</a> value)

You can use the setClip to any Node.The setClip is used to mask for specific dimension of the existing Node.Let’s see the demo application of this masking in Detective Glass Application.

Source Code (DetectiveGlass.java):

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Cursor;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

/**
 *
 * @author Narayan G.M
 */
public class DetectiveGlass extends Application {

    
    public static void main(String[] args) {
        Application.launch(DetectiveGlass.class, args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Detective Glass");
        Group root = new Group();
        Scene scene = new Scene(root, 800, 470,Color.BLACK);

        //ImageView 
        ImageView maskView = new ImageView();    
        maskView.setCursor(Cursor.NONE);
        //Image is loaded 
        Image image = new Image(DetectiveGlass.class.getResource("oldimg.jpg").toExternalForm());
        maskView.setImage(image);
        //Mask Shape 
        final Circle glass = new Circle(100,100,100);
        maskView.setClip(glass);
        
        //adding to the root's children
        root.getChildren().add(maskView);
        
        //MouseMoved Event on Scene
        scene.setOnMouseMoved(new EventHandler(){

            public void handle(MouseEvent event) {                
                //Setting X and Y position of mask shape
                glass.setCenterX(event.getX());
                glass.setCenterY(event.getY());
            }
            
        });

        primaryStage.setScene(scene);  
        primaryStage.setVisible(true);
    }
}

import javafx.application.Application;

import javafx.event.EventHandler;

import javafx.scene.Cursor;

import javafx.scene.Group;

import javafx.scene.Scene;

import javafx.scene.image.Image;

import javafx.scene.image.ImageView;

import javafx.scene.input.MouseEvent;

import javafx.scene.paint.Color;

import javafx.scene.shape.Circle;

import javafx.stage.Stage;

/**

* @author Narayan G.M

public class DetectiveGlass extends Application {

public static void main(String[] args) {

Application.launch(DetectiveGlass.class, args);

}

@Override

public void start(Stage primaryStage) {

primaryStage.setTitle("Detective Glass");

Group root = new Group();

Scene scene = new Scene(root, 800, 470,Color.BLACK);

//ImageView

ImageView maskView = new ImageView();

maskView.setCursor(Cursor.NONE);

//Image is loaded

Image image = new Image(DetectiveGlass.class.getResource("oldimg.jpg").toExternalForm());

maskView.setImage(image);

//Mask Shape

final Circle glass = new Circle(100,100,100);

maskView.setClip(glass);

//adding to the root's children

root.getChildren().add(maskView);

//MouseMoved Event on Scene

scene.setOnMouseMoved(new EventHandler(){

public void handle(MouseEvent event) {

//Setting X and Y position of mask shape

glass.setCenterX(event.getX());

glass.setCenterY(event.getY());

}

});

primaryStage.setScene(scene);

primaryStage.setVisible(true);

}

Detective Glass (Masking)

A worked out example : Detective Glass

Feel free to comment.

Have a 🙂 good day.

Tags:detective glass in JavaFX masking

17 thoughts on “Masking in Javafx 2.0”

Shakir Gusaroff June 22, 2011 at 8:51 pm

Hi Narayan. Nice example.
Thank you for sharing.
mehdi June 23, 2011 at 7:09 am

Hi,

thanks for your nice example
Cedric sipa July 28, 2011 at 5:35 pm

Hi
i’m not sure this is a place to make my request but i hope someone will help me
i’m tring for severals day now to convert this javafx1.3 code to javafx 2.0
http://blogs.oracle.com/rakeshmenonp/entry/javafx_image_viewer
can someone please help me to convert it?
thanks
Narayan Gopal Maharjan July 29, 2011 at 10:52 am

I think Javafx 2.0 is easy and flexible who have already knowledge of Java. So There won’t be any difficulties on converting 1.3 app to 2.0
Anna September 4, 2011 at 4:18 pm

you need Windows Mobile 6.0 or 6.1 platform installed on a target device with network connectivity, 32-bit RISC based microprocessor, and minimum 64 MB RAM.

1) First, you copy the SUN_JAVAFX.CAB file over to the device emulator file system
2) Click on the SUN_JAVAFX.CAB to install it
3) Copy the JavaFX application jar file over to the device emulator file system
4) Click on the jar file – this should start the JavaFX application installer and should ask you if you want to install the application
5) Once the installation finishes you can start JavaFX by choosing the “JavaFX” icon in the “Programs” section of the device
6) You should see your JavaFX application in the list of installed applications. Click to run it. Tesla Secret
Narayan Gopal Maharjan September 5, 2011 at 12:14 pm

What is this??
Nora Alcombright September 9, 2011 at 6:46 am

I just want to leave you an quick post to thank you for your blog! Keep up the good work! Much Thanks!
West Side Story Tickets September 26, 2011 at 2:09 pm

Perhaps this is one of the most interesting blogs that I have ever seen. Interesting article.
first iphone October 2, 2011 at 5:11 am

wonderful post, thank you.
Knock Knock Jokes October 7, 2011 at 8:18 pm

Thanks for sharing Masking in Javafx 2.0 Java and FX with us keep update bro love your article about Masking in Javafx 2.0 Java and FX .
free electricity October 8, 2011 at 11:20 pm

thanks for sharing the info.that is interesting.
Elettronica January 30, 2012 at 10:24 pm

Favorite post having such an fantastic and useful informative content. describing good blogging concepts as well as basics that are very much useful in skilled content writing as well
free poker bankroll February 9, 2013 at 7:30 pm

I think i got it, i just have to test it. Thanks a lot!
amd sempron processor 3400 May 29, 2013 at 1:36 am

Hey! I just wish to give an enormous thumbs up for the great
information you’ve got right here on this post.
I might be coming again to your blog for more soon.
click here June 19, 2013 at 5:47 pm

I just wish to give an enormous thumbs up for the great
information you’ve got thanks a lot dude!
Stefanos September 3, 2013 at 12:36 pm

Is there a way to create masking with complex shapes? What I have is an image of the back side of an iphone device and I’d like to create a “skin” for it using a photo but leaving the Apple logo as is (meaning not covered). Is there a way to achieve this if javaFX?

Thank you
Narayan G. Maharjan September 4, 2013 at 5:25 pm

@Stefanos,
You can easily make use of “clipProperty” available for every Node . To make masking for the apple logo you need to make ImageView instance which will be shown to the user masking in the shape of applet logo.
imageToDisplay.setClip();

Thanks

Masking in Javafx 2.0

Share this:

17 thoughts on “Masking in Javafx 2.0”

Leave a Reply Cancel reply