Centering Text

Summary

On the mailing list was a discussion of how to center text in nodes.

Code

import javafx.ui.*;
import javafx.ui.canvas.*;

var contentText = "Sardegna"; //very nice island, go there once ;-)
var myFont = Font {face: VERDANA, style: [BOLD], size: 50};

Frame {
    content:
    Canvas {
        var: canvas
        height: 70
        width: 450
        border: null
        content:
        Group {
            var w = bind canvas.width
            var h = bind canvas.height
            content:
            [Rect {
                width: bind w
                height: bind h
                fill: LinearGradient {
                    x1: 0
                    y1: 0
                    x2: 1
                    y2: 0
                    stops:
                    [Stop {offset: 0, color: green},
                    Stop {offset: .5, color: new Color(.5, 1, 0, 1)},
                    Stop {offset: 1, color: green}]
                }
                stroke: green
                strokeWidth: 1
            },
            Text {
                transform: bind translate(w/2, h/2)
                //verticalAlignment: BASELINE
                valign: MIDDLE
                halign: CENTER
                content: contentText
                font: myFont
                fill: darkgreen
            }]
        }
    }
}