Rounding of text position after scaling

Programming Questions

Jo Wood

Rounding of text position after scaling

in Programming Questions • 2 years ago

Suppose you wished to display some small text inside a rectangle, as below:

The code to do this might be something like this:

String message = "This is a simple line of text";
float visualTextSize = 6;
void setup()
{
size(400,120);
smooth();
textAlign(CENTER,CENTER);
rectMode(CENTER);
textFont(createFont("Arial",6),6);
}
void draw()
{
background(255,220,230);
noFill();
textSize(visualTextSize);
rect(width/2,height/2,textWidth(message),visualTextSize);
fill(255,0,0);
text(message,width/2,height/2);
}

If in the sketch, you wished to enlarge the text/rectangle (for example in response to interactive zooming), applying a simple scaling results in blurred text as we might expect because a 6pt font is being displayed at a much larger size:

I would assume that the way to overcome the blurring would be to create a larger font before it is displayed:

String message = "This is a simple line of text";
float visualTextSize = 6;
void setup()
{
size(400,120);
smooth();
textAlign(CENTER,CENTER);
rectMode(CENTER);
textFont(createFont("Arial",30),30);
}
void draw()
{
background(255,220,230);
noFill();
textSize(visualTextSize);
translate(width/2,height/2);
scale(5);
translate(-width/2, -height/2);
rect(width/2,height/2,textWidth(message),visualTextSize);
fill(255,0,0);
text(message,width/2,height/2);
}

Unfortunately, when text is enlarged through scale(), even if it is stored at a high resolution, some rounding occurs in text placement (this is a known bug that I reported a couple of years ago):

This has been bugging me for a while now as I create lots of sketches with text that can be interactively zoomed.

Because I am not sufficiently familiar with the workings of the Processing source code to deal with the problem at source, I think I have a workaround. Whenever some scaled text needs to be displayed, temporarily reset the transformation matrix and display the text at a scale closer to its natural resolution. This is all done in the text2() method:

String message = "This is a simple line of text";
float visualTextSize = 6;
void setup()
{
size(400,120);
smooth();
textAlign(CENTER,CENTER);
rectMode(CENTER);
textFont(createFont("Arial",30),30);
}
void draw()
{
background(255,220,230);
noFill();
textSize(visualTextSize);
translate(width/2,height/2);
scale(5);
translate(-width/2, -height/2);
rect(width/2,height/2,textWidth(message),visualTextSize);
fill(255,0,0);
text2(message,width/2,height/2);
}
void text2(String textToDisplay, float xPos, float yPos)
{
pushMatrix();
float matrixScale = g.getMatrix().get(null)[0];
PVector newTextPos = new PVector(0,0);
g.getMatrix().mult(new PVector(xPos,yPos),newTextPos);
resetMatrix();
float origTextSize = g.textSize;
textSize(matrixScale*origTextSize);
text(textToDisplay,newTextPos.x,newTextPos.y);
textSize(origTextSize);
popMatrix();
}

It appears to give much better results and is about 3 times faster as a downscale-upscale transformation is avoided:

I don't like messing about with the 'g' object and this solution feels a bit hacky to me although it does appear to work. Are there any better ways of dealing with the text rounding problem?

Thanks,

Jo.

Statistics

0 Replies
704 Views
0 Followers

Actions

Permalink