Friday, October 22, 2010

javaFx custom component– Line segment with arrowhead

I have been working with javaFx for some time now for projects in School during my M.S tenure. I love the ease with which I can create new components. The only complain I have had till now is that it is not fast enough to handle really fast animations. It was very patchy when I worked with it in a project with multiple images/lines/rectangles on stage changing at rate of 200ms. It simply could not handle it. The Timeline class itself takes a moment in time hindering animations. Just a claim about Timeline with no proofs. Coming back to the problem, a line segment with arrowhead. A very trivial feature missing in javaFx and many people searching for a solution. Here is a custom component which does that exactly the same using CustomNode, Line and a Polygon.

import javafx.scene.shape.Line;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.Group;
import javafx.scene.shape.Polygon;
import javafx.scene.paint.Paint;
import javafx.scene.transform.Transform;
import java.lang.Math;

* @author Shreyas Purohit

public class ArrowHeadLine extends CustomNode{
var group:Group;
public var x:Number;
public var y:Number;

public var startX:Number on replace{
public var startY:Number on replace{
public var endX:Number on replace{
public var endY:Number on replace{
public var fill:Paint;
public var stroke:Paint;

var arrowhead:Polygon;
var segment:Line;

override protected function create () : Node {
group = Group{
translateX: bind x;
translateY: bind y;
segment = Line{
startX: bind startX
startY: bind startY
endX: bind endX
endY: bind endY
stroke: bind stroke;
arrowhead = Polygon{
points :[-6,-6,
fill: bind fill;


function handleChange():Void{
var angle:Number = Math.toDegrees(Math.atan2(endY-startY, endX-startX));
arrowhead.translateX = endX;
arrowhead.translateY = endY;
arrowhead.transforms = [Transform.rotate(angle,0,0)]


No comments:

Post a Comment