Drawing arrows in JavaFX

Some time in the past, I was wondering what's the easiest solution for drawing arrow connections between shapes. The problem boils down to computing boundary point for given shape, which intersects with connecting line.
The solution is not so difficult when we consider polygon shapes. But it becomes more difficult considering curves and far more difficult for generic SVG shapes.
In this article, I show a simple way to find such boundary points for generic SVG shapes, utilizing JavaFX "contains" method and simple bisection algorithm.
Following application does the job: Launch JNLP, Browse on GitHub.
Application allows to drag shapes to track shape boundaries.

So, "contains" method in JavaFX allows us to poll any 2D point for intersection with SVG shape. Next, we need to assume, that we know a point inside a shape, from which every ray has exactly one intersection. This includes star-like shapes and ellipses. Next, we can use simple bisection algorithm to find such boundary point. We cut off once length between two points is too small. Following snippet does the job:

	public function findBoundaryPoint(a:Point2D,b:Point2D):Point2D {
	// a is outside, b is inside
	var m:Point2D = middle(a,b);
	if (pointsLenSqr(a, b) < 1.) {
	return m;
	} else {
	var n:Point2D = Point2D {
	x: m.x - position.x
	y: m.y - position.y
	}
	if (contains(n)) {
	return findBoundaryPoint(a,m);
	} else {
	return findBoundaryPoint(m,b);
	}
	}
	}

view raw bisect.fx hosted with ❤ by GitHub

Next, we need to draw arrows on the ends. In order to do that, we can use JavaFX Affine Transform, which is matrix transformation for SVG path. We need to compute transformation vectors for the matrix. This sounds scarry, but in fact is relatively easy. First vector in matrix is (targetPoint - sourcePoint) / length. Second one is perpendicular to it. Following code applies transformation:

	var u:Point2D = a.findBoundaryPoint(b.position, a.position);
	var v:Point2D = b.findBoundaryPoint(a.position, b.position);
	var l:Float = Math.sqrt(pointsLenSqr(u, v));
	content = [
	Path {
	transforms: [
	Affine {
	mxx: (v.x-u.x)/l
	mxy: (v.y-u.y)/l
	myx: (v.y-u.y)/l
	myy: -(v.x-u.x)/l
	tx: u.x
	ty: u.y
	}
	]
	elements: [
	MoveTo {
	x: 0
	y: 0
	}
	LineTo {
	x: l
	y: 0
	}
	LineTo {
	x: l-10
	y: 5
	}
	MoveTo {
	x: l
	y: 0
	}
	LineTo {
	x: l-10
	y: -5
	}
	...

view raw affine hosted with ❤ by GitHub