Fandom

Planet JFX

RolloverGrid

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.

Summary Edit

See this thread in the mailing lists.

RolloverGrid is a grid of black squares that glow red when you move the cursor over them. As you scrub the cursor they will slowly fade back to black, creating an interesting effect.

RolloverGrid

Code (Preview SDK) Edit

package javafxapplication1;

import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;
import java.lang.System;
import javafx.animation.Interpolator;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;


class CellModel
{
    attribute opacity:Number = 0.0;
    attribute color:Color;
    attribute anim =
        
        Timeline {
            repeatCount: 1
    
              // Key Frames
              var begin = at (0s) {
                   opacity => 1.0 tween Interpolator.LINEAR;
                   color => Color{red: 1.0 , green:0, blue:0, opacity: bind opacity}; 
              }

              var mid = at (0.5s) {
                    opacity => 0.5 tween Interpolator.LINEAR;
                    color => Color{red: 1.0 , green:0, blue:0, opacity: bind opacity};
              }

              var end = at (1s) {
                 opacity => 0.0 tween Interpolator.LINEAR;
                 color => Color{red: 1.0 , green:0, blue:0, opacity: bind opacity}; 
              }

              keyFrames: [begin,mid,end]
        }//Timeline;*/
}


class Cell extends Rect {
    
  attribute cellModel:CellModel;

   override attribute fill = bind cellModel.color;
  
   override attribute onMouseEntered =  function (e: CanvasMouseEvent){
       cellModel.anim.start();
       System.out.println("Test {cellModel.opacity}");
       
     }
}


class RolloverGrid extends CompositeNode { 
    function composeNode() {
        var cells: Cell[];

        for(j in [0..10]) {
            for(i in [0..30]) {
                var cellModel = CellModel {}
                insert Cell { x: i * 21, y: j * 21, width:20, height:20,  cellModel: bind cellModel} into cells;
            }
        }
        return Group{ content: [Rect { x: 0, y: 0, width: 31 * 21, height: 11 * 21, fill: Color.BLACK},cells] };
    }
}

Frame {
    content:
        Canvas { content: RolloverGrid { } }
    visible: true
}

==

Headline text Edit

==

Also on Fandom

Random Wiki