FX Experience Has Gone Read-Only

I've been maintaining FX Experience for a really long time now, and I love hearing from people who enjoy my weekly links roundup. One thing I've noticed recently is that maintaining two sites (FX Experience and JonathanGiles.net) takes more time than ideal, and splits the audience up. Therefore, FX Experience will become read-only for new blog posts, but weekly posts will continue to be published on JonathanGiles.net. If you follow @FXExperience on Twitter, I suggest you also follow @JonathanGiles. This is not the end - just a consolidation of my online presence to make my life a little easier!

tl;dr: Follow me on Twitter and check for the latest news on JonathanGiles.net.

After seeing a twitter message today asking whether it was possible to create a rectangle in JavaFX which was a mixed rounded and normal rectangle, I thought I’d post how I did this a few months back.

The code below will draw a rounded rectangle in the top-right, bottom-right, and bottom-left corners. The top-left corner is a square point. You can change this by editing the four parameters, and of course trivially modify this code to be a function taking four arguments.

The reason why I have the test for if (topRightCurve > 0) is because when I was writing this code there was a known issue with drawing arcs with a zero radius. I know this has been fixed, but I’m not sure when it was fixed (it may be in 1.2, but most certainly it’s fixed in 1.3).

public var topLeftCurve:Number = 0;
public var topRightCurve:Number = 0;
public var bottomLeftCurve:Number = 0;
public var bottomRightCurve:Number = 0;

Path {
fill: color
stroke: stroke
strokeWidth: 1
elements: bind [
// starting just past the top-left curve
MoveTo { x:topLeftCurve, y:0 },

// draw line to where top-right curve should start
HLineTo { x:menuWidth – topRightCurve },

// arc around to just below the top-right curve
if (topRightCurve > 0) {
ArcTo {
x:menuWidth, y:topRightCurve,
radiusX:topRightCurve, radiusY:topRightCurve,
} else null,

// go to just above the bottom-right curve
VLineTo { y: menuHeight – bottomRightCurve }

// arc around to just to the left of the bottom-right curve
if (bottomRightCurve > 0) {
ArcTo {
x:menuWidth-bottomRightCurve, y:menuHeight,
radiusX:bottomRightCurve, radiusY:bottomRightCurve,
} else null,

// draw line to where bottom-left curve should start
HLineTo { x:bottomLeftCurve },

// arc around to just above the bottom-left curve
if (bottomLeftCurve > 0) {
ArcTo {
x:0, y:menuHeight-bottomLeftCurve,
radiusX:bottomLeftCurve, radiusY:bottomLeftCurve,
} else null,

// go to just below the top-left curve
VLineTo { y: topLeftCurve }

// arc around to just above the bottom-left curve
if (topLeftCurve > 0) {
ArcTo {
x:topLeftCurve, y:0,
radiusX:topLeftCurve, radiusY:topLeftCurve,
} else null

Also, if you’re using the JFXtras project, there is a shape in there, called the MultiRoundRectangle that does precisely this as well.