The following code to generate some rectangles with text items (see attached). What do I need to do to center each text item in its rectangle? I see there's a Layout, but I'm not sure how to combine rectangles, paths and groups into on of those.
var vLines = [5, 90, 175, 260, 345, 430, 515, 600];
var vLines = [5, 90, 175, 260, 345, 430, 515, 600];
...
$.each(vLines, function (index, value) {
var group = getBox("line " + count++, "line " + count++, "line " + count++);
group.transform(geom.transform().translate(10, value));
surface.draw(group);
});
....
function getBox(text1, text2, text3) {
var lineColor = "#9999b6";
var lineWidth = 2;
var fontNormal = "12px Arial";
var group = new draw.Group();
var rect = new geom.Rect([0, 0], [160, 75]);
var path = draw.Path.fromRect(rect, { stroke: { color: lineColor, width: lineWidth } });
group.append(path);
if (text1) {
group.append(new draw.Text(text1, new geom.Point(10, 10), { font: fontNormal }));
}
if (text2) {
group.append(new draw.Text(text2, new geom.Point(10, 30), { font: fontNormal }));
}
if (text3) {
group.append(new draw.Text(text3, new geom.Point(10, 50), { font: fontNormal }));
}
return group;
}