Image Drag with Mouse in JavaFX

So, we got a discussion here. Last week we(me, Subrata and Vikram, both my office colleagues) are discussing about dragging an image with mouse pointer in JavaFX. 

So,  this was the first code. Point is to drag an image from the same place where we first hit the mouse, like it happens when we drag a folder :

 
package sample5;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import java.lang.System;

var x: Number;
var y: Number;

var im = Image {
       url: "{__DIR__}im2.PNG"
   };

var temp1:Number = 0;
var temp2: Number = 0;
var count: Integer = 1;
Stage {
   title: "Application title"
   width: 250
   height: 280
   scene: Scene {
       content: [
           ImageView {
               x: bind x - temp1
               y: bind y - temp2
               image: Image {
                   url: "{__DIR__}im2.PNG"
               }
               onMouseDragged: function( e: MouseEvent ):Void {
                   x = e.x;
                   y = e.y;
                   if(count <= 1) {
                       temp1 = e.x;
                       temp2 = e.y;
                   }
                   count++;
              }
            }
       ]

   }
}




You can see those patches of counts and flags which makes the code so unstable. And a bug, when you leave the mouse once, it cant grip the image from your mouse point again.

Subrata has written a cleaner code which works correct and here it is :

  
package mousedrag;
import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.image.ImageView; import javafx.scene.image.Image; import javafx.scene.input.MouseEvent;
/\*\* \* @author Subrata Nath \*/
var imgX : Number = 20; var imgY : Number = 20; var startX : Number; var startY : Number ; var distX : Number; var distY : Number ;
    Stage {         title: "Mouse smooth drag"         width: 250         height: 280         scene: Scene {             content: [                 ImageView {                     x : bind imgX                     y : bind imgY                     image: Image {url: "{__DIR__}Mail.png"                     }                     onMousePressed: function( e: MouseEvent ):Void {                         startX = e.x;                         startY = e.y;          // Calculate the distance of the mouse point from the image top-left corner          // which will always come out as positive value                         distX = startX - imgX;                         distY = startY - imgY;                     }                     onMouseDragged: function( e: MouseEvent ):Void {                         // Find out the new image postion by subtracting the distance part from the mouse point.                         imgX = e.x - distX;                         imgY = e.y - distY;                     }                 }             ]
        } }



Comments:

I actually did this awhile back (in June 2007) -
http://cld.blog-city.com/learning_javafx__four_examples__images__mouse_events.htm
all the syntax has changed. I wanted to update it so that when you (Mouse)clicked on the image it would change to a different image today. It used to be you could do "url: bind pix" - now it complains "url has script-only (default) bind in javafx.scene.image.image". Any ideas ?

Posted by Charles Ditzel on November 30, 2008 at 03:27 AM IST #

O yes, little modification will work for you :)

image: bind Image {
url: pix
}

in place of

image: Image {
url: bind pix
}

They made it script-only maybe because changing url will change the image itself, so bind the image in place of url.

This is your code for Catcing the mouseEvent example :

/\*
\* Main.fx
\*
\* Created on Nov 30, 2008, 3:20:48 PM
\*/

package sample7;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.transform.\*;
import javafx.scene.input.MouseEvent;

var pix = "http://files.blog-city.com/files/aa/1263/p/f/m3.jpg";
var switchit = false;

Stage {
title: "Catching MouseEvents"
width: 250
height: 280
scene: Scene {
content: [
ImageView {
image: bind Image {
url: pix
}
scaleX: 0.75
scaleY: 0.75
// Mouse click changes the initial image
onMouseClicked: function( e: MouseEvent ):Void {
if (switchit == false) {
pix = "http://files.blog-city.com//files/aa/1263/p/f/m2.jpg";
switchit = true;
}
else {
pix = "http://files.blog-city.com//files/aa/1263/p/f/m3.jpg";
switchit = false;
}
}
}
]
}
}

Posted by Vaibhav on November 30, 2008 at 07:28 AM IST #

Thanks for the info!

Posted by Charles Ditzel on November 30, 2008 at 04:01 PM IST #

Again, Thanks. I have blogged an update :
http://cld.blog-city.com/javafx_script__moving_images_code__short_video.htm

Posted by Charles Ditzel on November 30, 2008 at 06:14 PM IST #

Thanks Charles and you are welcome too :)

Posted by Vaibhav Choudhary on December 01, 2008 at 03:02 AM IST #

I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

Alanna

http://www.craigslistsimplified.info

Posted by Alanna on March 10, 2009 at 07:38 AM IST #

thanks Alanna !

Posted by Vaibhav on March 12, 2009 at 02:14 AM IST #

Hello Vaibhav
I have a larger than frame image in my webpage that I would like to see piece by piece when I click and drag the mouse.
Is there a simple java script for this? thanks!

Posted by Natalia on March 14, 2009 at 12:13 PM IST #

no idea about JS but in FX you can do that by clip feature. I guess in JS also there must be some feature in which you can clip a big image into a clip size (defined by you) and then mouse move can help it going here and there.

Posted by Vaibhav on March 14, 2009 at 12:18 PM IST #

Excellent post. Thanks for sharing.

Posted by clipping path on April 07, 2009 at 08:03 AM IST #

Thanks a lot! this works for me (a lot better than: http://javafx.com/docs/gettingstarted/javafx/create-first-javafx-app.jsp)

Posted by Peter on April 16, 2010 at 03:13 PM IST #

Again me :-/
I wanted to drag not only an image. This was not possible with this solution so I went back to the javafx gettingstarted example I mentioned before. And if you download the provided example as a NB project you want get an exception like I did when I was working with the explanation in the tutorial:

AssignToBoundException: Cannot assign to bound variable

So you can use the getting started example but download the project (at the very top)!

Posted by Peter on April 18, 2010 at 10:33 AM IST #

Post a Comment:
Comments are closed for this entry.
About

Hi, I am Vaibhav Choudhary working in Sun. This blog is all about simple concept of Java and JavaFX.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today