Wikia

Planet JFX

Rectangle

118pages on
this wiki
Talk1

Simple examples with a rectangle (move, resize, bouncing, catch) for the compiler and interpreter.

RectMove.fx (Compiler) Edit

RectMove
import javafx.ext.swing.*;
import javafx.input.*;
import javafx.scene.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
import java.lang.System;


var rect: Rectangle = Rectangle {
    var dragStartX: Number;
    var dragStartY: Number;
    
    width : 100 
    height: 100 
    fill  : Color.BLUE
    cursor: Cursor.MOVE   
    
    onMousePressed: function (e: MouseEvent) {
        dragStartX = rect.x;
        dragStartY = rect.y;
    }// onMousePressed

    
    onMouseDragged: function (e: MouseEvent) {
        rect.x = dragStartX + e.getDragX();
        rect.y = dragStartY + e.getDragY();
    }// onMouseDragged
}// Rectangle



SwingFrame {
    closeAction: function(): Void {System.exit(0);}
     
    title      : 'Rectangle: Move with mouse'
    background : Color.WHITE;
    width      : 600
    height     : 400       
    visible    : true
    
    content: Canvas {
        content: rect
    }// Canvas   
}// SwingFrame


RectResize.fx (Compiler) Edit

RectResize
import javafx.ext.swing.*;
import javafx.input.*;
import javafx.scene.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
import java.lang.System;


public class RectResize extends CustomNode {
    public attribute x     : Number;
    public attribute y     : Number;
    public attribute width : Number;
    public attribute height: Number;
    
    public attribute startWidth : Number;
    public attribute startHeight: Number; 


    public override function create(): Node {

        // SE_RESIZE (bottom, right)

        var grab: Rectangle = bind Rectangle {
            width : 10
            height: 10
            x     : bind x + width  - grab.width
            y     : bind y + height - grab.height
            fill  : Color.RED
            cursor: Cursor.SE_RESIZE

            onMousePressed: function (e: MouseEvent) {
                this.startWidth  = this.width;
                this.startHeight = this.height;               
             }// onMousePressed
            
            onMouseDragged: function (e: MouseEvent) {               
                if(this.startWidth + e.getDragX() > 0) {
                    width = this.startWidth + e.getDragX();
                }

                if(this.startHeight + e.getDragY() > 0) {
                    height = this.startHeight + e.getDragY();
                }
            }// onMouseDragged
        }// Rectangle (SE_RESIZE)


        Group {   
          content: [Rectangle {
                        x     : bind x
                        y     : bind y
                        width : bind width
                        height: bind height
                        fill  : Color.BLUE
                    }, // Rect

                    grab
               ]// content (Group)
        }// Group
    }//create()
}// RectResize



SwingFrame {
    closeAction: function(): Void {System.exit(0);}
     
    title      : 'Rectangle: Resize rectangle with mouse'
    background : Color.WHITE;
    width      : 600
    height     : 400
    visible    : true

    content: Canvas {
        content: [RectResize {
                      x     : 250
                      y     : 100
                      width : 100 
                      height: 100 
                  }// RectResize
        ]// content (Canvas)
    }// Canvas
}// SwingFrame


RectBounce.fx (Compiler) Edit

RectBounce
import javafx.ext.swing.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
import javafx.animation.*;
import java.lang.System;


public class Bounce {   
    public attribute rect: Rectangle;
    
    public attribute dx  : Number = 3;
    public attribute dy  : Number = 3;   

     
    function move(): Void {
       var x = rect.x + dx;
       var y = rect.y + dy;

       if(x <   0){x =   0; dx = -dx;}
       if(y <   0){y =   0; dy = -dy;}
       if(x > 200){x = 200; dx = -dx;}
       if(y > 150){y = 150; dy = -dy;} 

       rect.x = x;
       rect.y = y;  
    }// move()
}// Bounce



var rect = Bounce {
    rect: Rectangle {
        width : 50
        height: 50
        fill  : Color.BLUE
    }// Rectangle
}// Bounce


var t = Timeline {
    repeatCount: Timeline.INDEFINITE
   
    keyFrames: [KeyFrame{time  : 1s / 25
                         action: function(): Void {rect.move();}}
    ]//keyFrames
}// Timeline



SwingFrame {
    closeAction: function(): Void {System.exit(0);}
     
    title      : 'Rectangle: Bounce'
    background : Color.WHITE;
    width      : 600
    height     : 400                  
    visible    : true

    content: Canvas{
                 content: [Rectangle{width: 250  height: 200  stroke: Color.BLACK},
                           rect.rect]
             }// Canvas
}// SwingFrame

t.start();


RectCatch.fx (Compiler) Edit

RectCatch
import javafx.ext.swing.*;
import javafx.input.*;
import javafx.scene.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
import javafx.animation.*;
import java.lang.System;


public class Bounce {   
    public attribute running: Boolean = true;

    public attribute rect   : Rectangle;
    
    public attribute dx     : Number = 3;
    public attribute dy     : Number = 3;   

     
    function move(): Void {
       var x = rect.x + dx;
       var y = rect.y + dy;

       if(x <   0){x =   0; dx = -dx;}
       if(y <   0){y =   0; dy = -dy;}
       if(x > 200){x = 200; dx = -dx;}
       if(y > 150){y = 150; dy = -dy;} 

       rect.x = x;
       rect.y = y;  
    }// move()
}// Bounce



var rect: Bounce = Bounce {
    rect: Rectangle {
        cursor: Cursor.HAND
        width : 50
        height: 50
        fill  : Color.BLUE
        
        onMousePressed: function(e: MouseEvent) {
            rect.running = not rect.running;
            if(rect.running){t.resume()}else{t.pause()};
        }// onMousePressed
    }// Rect
}// Bounce


var t = Timeline {
    repeatCount: Timeline.INDEFINITE
   
    keyFrames: [KeyFrame{time  : 1s / 25
                         action: function(): Void {rect.move();}}
    ]//keyFrames
}// Timeline



SwingFrame {
    closeAction: function(): Void {System.exit(0);}
     
    title      : 'Rectangle: Catch'
    background : Color.WHITE;
    width      : 600
    height     : 400                  
    visible    : true

    content: Canvas {
        content: [Rectangle{width: 250  height: 200  stroke: Color.BLACK},
                  rect.rect]
    }// Canvas
}// SwingFrame

t.start();


RectMove.fx Edit

import javafx.ui.*;
import javafx.ui.canvas.*;
		
Frame {
    title  : 'Rectangle move'
    width  : 600
    height : 400
    content: Canvas {
        content: [Rect {
                      var   : self
                      width : 100 
                      height: 100 
                      fill  : blue
                      cursor: MOVE
                      
                      onMouseDragged: operation (e: CanvasMouseEvent) {
                          self.x += e.localDragTranslation.x;
                          self.y += e.localDragTranslation.y;
                      }// onMouseDragged
                  }// Rect
        ]// content (Canvas)
    }// Canvas
       
    visible: true
}// Frame

RectResize.fx Edit

import javafx.ui.*;
import javafx.ui.canvas.*;

class RectResize extends CompositeNode {
    public attribute x     : Number;
    public attribute y     : Number;
    public attribute width : Number;
    public attribute height: Number;
}


function RectResize.composeNode() = Group {   
    content: [Rect {
                  x     : bind x
                  y     : bind y
                  width : bind width
                  height: bind height
                  fill  : blue
              }, // Rect


              // SE_RESIZE (bottom, right)

              Rect {var   : self
                    width : 10
                    height: 10
                    x     : bind x + width  - self.width
                    y     : bind y + height - self.height
                    fill  : red
                    cursor: SE_RESIZE
             
                    onMouseDragged: operation (e: CanvasMouseEvent) {
                        if(width + e.localDragTranslation.x > 0) {
                            width += e.localDragTranslation.x;
                        }

                        if(height + e.localDragTranslation.y > 0) {
                            height += e.localDragTranslation.y;
                        }
                    }// onMouseDragged
               }// Rect (SE_RESIZE)
         ]// content (Group)
};// Group


		
Frame {
    title  : 'Rectangle resize'
    width  : 600
    height : 400
    content: Canvas {
        content: [RectResize {
                      x     : 250
                      y     : 100
                      width : 100 
                      height: 100 
                  }// RectResize
        ]// content (Canvas)
    }// Canvas
       
    visible: true
}// Frame

RectBounce.fx Edit

import javafx.ui.*;
import javafx.ui.canvas.*;

class Bounce {
    public attribute ticks : Number;
    
    public attribute rect  : Rect;
    
    public attribute dx    : Number;
    public attribute dy    : Number;   
}// class Bounce

     
trigger on Bounce.ticks = newValue {
   var x = rect.x + dx;
   var y = rect.y + dy;

   if(x <   0){x =   0; dx = -dx;}
   if(y <   0){y =   0; dy = -dy;}
   if(x > 200){x = 200; dx = -dx;}
   if(y > 150){y = 150; dy = -dy;} 

   rect.x = x;
   rect.y = y;  
}// trigger on Bounce.ticks



var rect = Bounce {
    dx: 3
    dy: 3

    rect: Rect {
        width : 50
        height: 50
        fill  : blue
    }// Rect
}; // Bounce



Frame {
    title  : 'Rectangle bounce'
    width  : 300
    height : 300
    content: Canvas {
                 content: [Rect{width: 250  height: 200  stroke: black},
                           rect.rect]
             }// Canvas
       
    visible: true
}// Frame



// Start

rect.ticks = [1..1000] dur 1000 linear fps 50 continue if true;

RectCatch.fx Edit

import javafx.ui.*;
import javafx.ui.canvas.*;

// Click in rectangle to stop/start moving

class Catch {
    public attribute ticks  : Number;
    public attribute running: Boolean;

    public attribute rect   : Rect;
    
    public attribute dx     : Number;
    public attribute dy     : Number;  
}// class Catch


trigger on Catch.running = newValue {
    if(true == newValue) {
        ticks = [1..500] dur 500 linear fps 50 continue if running;
    }
}// trigger on Catch.running


trigger on Catch.ticks = newValue {
   if(running) {
       var x = rect.x + dx;
       var y = rect.y + dy;

       if(x <   0){x =   0; dx = -dx;}
       if(y <   0){y =   0; dy = -dy;}
       if(x > 200){x = 200; dx = -dx;}
       if(y > 150){y = 150; dy = -dy;} 

       rect.x = x;
       rect.y = y;
   }// if(running) 
}// trigger on Catch.ticks



var rect = Catch {
    var : self
    dx  : 3
    dy  : 3

    rect: Rect {
        width : 50
        height: 50
        fill  : blue

        onMousePressed: operation(e: CanvasMouseEvent) {
            self.running = not self.running;
        }// onMousePressed
    }// Rect
}; // Catch



Frame {
    title  : 'Rectangle catch'
    width  : 300
    height : 300
    content: Canvas {
                 cursor : HAND
                 content: [Rect{width: 250 height: 200 stroke: black},
                           rect.rect]
             }// Canvas
       
    visible: true
}// Frame



// Start

rect.running = true;

Around Wikia's network

Random Wiki