Fandom

Planet JFX

Rectangle

118pages on
this wiki
Add New Page
Talk1 Share

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

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;

Also on Fandom

Random Wiki