Do you know the toy Mr. Potato Head? Now meet the Java Potato.
Duke images here from previous dukes I posted and other images from Open Clipart Project.
Java Web Start:
The code:
package dukepotato; import javafx.application.Frame; import javafx.application.Stage; import javafx.scene.CustomNode; import javafx.scene.Node; import javafx.scene.Group; import javafx.input.MouseEvent; import javafx.scene.geometry.Circle; import javafx.scene.paint.Color; import javafx.scene.image.ImageView; import javafx.scene.image.Image; public class Img extends ImageView{ public attribute content: Node[]; public attribute src: String; private attribute endX = 0.0; private attribute endY = 0.0; private attribute startX = 0.0; private attribute startY = 0.0; override attribute translateX = bind endX; override attribute translateY = bind endY; override attribute blocksMouse = true; init { image = Image { url: "{__DIR__}/{src}" } } override attribute onMousePressed = function(e:MouseEvent):Void { startX = e.getDragX()-endX; startY = e.getDragY()-endY; } override attribute onMouseDragged = function(e:MouseEvent):Void { endX = e.getDragX()-startX; endY = e.getDragY()-startY; } } var dukesimages = ["duke1.png", "duke2.png", "duke3.png", "duke4.png"]; var dukes = for (image in dukesimages){ Image { url: "{__DIR__}/{image}" } } var index = 0; var duke = ImageView { x: 200, y:170 image: bind dukes[index]; onMouseClicked: function( e: MouseEvent ):Void { index = (index + 1) mod sizeof dukesimages; } } var hat = Img { src: "hat.png", x: 370 } var partyhat = Img { src: "party_hat.png", x: 160, y: 5 } var cap = Img { src: "cap.png", x: 230, y: 10 } var cake = Img { src: "cake.png", x: 526, y: 190 } var glove = Img { src: "glove.png", x: 338, y: 363 } var baseball = Img { src: "baseball.png", x: 548, y:373 } var pencil = Img { src: "pencil.png", x: 451, y: 365 } var camera = Img { src: "camera.png", x: 125, y: 380 } var coffee = Img { src: "coffee.png", x: 541, y: 114 } var burger = Img { src: "burger.png", x: 542, y: 282 } var diamond = Img { src: "diamond.png", x: 243, y: 383 } var pliers = Img { src: "pliers.png", x: 20, y: 368 } var rubikcube = Img { src : "rubikcube.png", x: 37, y: 295 } var syringe = Img { src: "syringe.png", x: 35, y: 245 } var hourglass = Img { src: "hourglass.png", x: 35, y: 127 } var adventurehat = Img { src: "adventurehat.png", x: 8, y:30 } var tie = Img { src: "tie.png", x: 547, y:35 } Frame { title: "Duke Potato" width: 640 height: 480 closeAction: function() { java.lang.System.exit( 0 ); } visible: true stage: Stage { content: [duke, hat, partyhat, cake, adventurehat, cap, glove, baseball, pencil, camera, coffee, burger, diamond, pliers, rubikcube, syringe, hourglass, tie] } } |
- Lines 14 to 42 is the same dragging approach I showed in the post Draggable Nodes, but this time creating a class that inherits the behavior of ImageView.
- Lines 44 to 57 is the Duke that changes when you click on it. It cycles over the dukesimages list.
- Lines 59 to 75 is just instantiations of all toys and objects we will use to dress the Duke. Look how easier was to create and place a image.
- Lines 78 to the end is just creating a Frame and putting all elements on it.
Download a package with the NetBeans project, sources, libraries and images, DukePotato.tar.gz.