I'm trying to make some ScriptUI title, made of a short line (stroked path), followed by a text using drawString(), and then another stroked path.
The whole thing should look like, roughly, the bright screenshot (ESTK CC2014), where it works fine.
However in the main app (for me, After Effects, CC 2014), the alignment is wrong.
I'm afraid this is on of the many CC new features that can't be fixed, but if someone has a workaround, or can spot my mistake, please let me know.
Xavier
function drawTitle(drawState){ // 'this' is expected to be an empty group, with a property called "_text" : a string // the function is the onDraw callback for that group // it will draw on the same line, centered vertically: // (1) a 8px long horizontal line, // (2) followed by this._text, in fontsize = 10, // (3) and finally another horizontal line (with "fill alignment") var gfx = this.graphics; if (gfx.font.size!==10) gfx.font = ScriptUI.newFont(gfx.font.name, gfx.font.style, 10); var pen = gfx.newPen(gfx.PenType.SOLID_COLOR, [0.25,0.8,0.9], 1); var textSize = this.graphics.measureString(this._text, gfx.font); var y0 = this.size[1]>>1; // vertical center of "this" var y1 = y0 - (textSize[1]>>1); // ordinate at which the text should be drawn var x, y; x=0; y= y0; // draw first path gfx.newPath(); gfx.moveTo(x,y); x+= 8; gfx.lineTo(x,y); gfx.strokePath(pen); // draw text x+=2; y= y1; gfx.moveTo(x, y); gfx.drawString(this._text, pen, x, y); // draw second path x += textSize[0]+2; y= y0; gfx.newPath(); gfx.moveTo(x,y); x = this.size[0]; gfx.lineTo(x,y); gfx.strokePath(pen); return; }; //
var ooo = new Window("dialog", "drawString()");
var WIDTH = 100;
var HEIGHT = 18+4;
var MARGINS = 10;
var decoration = "group{size : "+[WIDTH, HEIGHT].toSource()+", st : StaticText{text : 'value: ', location : [0,2], size: [50, 18]}, et : EditText{text : '100 ', location : [55,2], size: [45, 18]}}";
var row1 = ooo.add(decoration);
row1.location = [MARGINS, MARGINS];
var title = ooo.add("group");
title._text = "Some title";
title.onDraw = drawTitle;
title.size = [WIDTH, 20];
title.location = [MARGINS, row1.bounds[3]];
var row2 = ooo.add(decoration);
row2.location = [MARGINS, title.bounds[3]];
ooo.show();