Geek asks and answers

Improved rotated text display

I have the following code that is adapted from an online example to rotate text. The code works great because it rotates the text at the right angle, but I would like to know if there is a way to improve the accuracy and clarity of the rotated text. On my display, it seems that the rotated text is "stepped" rather than smooth.

PFont f;
String message = "abcdefghijklmnopqrstuvwxyz";
float theta, x;

void setup() {
  size(800, 200);
  f = createFont("Arial",20,true);
}

void draw() { 
 // background(255);
  fill(0);
  textFont(f);    // Set the font
  translate(x,height/2);  // Translate to the center
  rotate(theta);                // Rotate by theta
  textAlign(LEFT);            
  text(message,0,0);            
  theta += 0.1;                // Increase rotation
  x += textWidth(message);
  if (x>800){noLoop(); }
}

I changed the example to show the difference. In the new code, I change the text to an underline and draw a reference line in red. If it runs on your machine, you will see a stunning black line created by underscores.

String message = "________";
float theta, x;
PFont f;

void setup() {
  size(800, 200);
  f = loadFont("ArialMT-20.vlw");
  smooth();
}

void draw() { 
  fill(0);
  textFont(f);    // Set the font

  translate(x,height/2);  // Translate to the center
  rotate(theta);                // Rotate by theta

  text(message,0,0);

  stroke(255,0,0);
  strokeWeight(2);
  line(0,0,textWidth(message),0);

  theta += 0.1;                // Increase rotation
  x += textWidth(message);
  if (x>800){noLoop(); }
}

For me, it gives the following output, but I know that it will be different when run on Mac:

enter image description here

+5
source share
2 answers

RenderingHints:

+1

- ( ) BufferedImage, . - :

BufferedImage buff = getGraphicsConfiguration().createCompatibleImage(textWidth, textHeight); //create an image with the dimensions of the text
Graphics2D g2d = buff.createGraphics();
g2d.drawString(yourText); //draw the text without transformations
g2d.dispose();

//apply the rotation transform to g, the Graphics from your component
g.drawImage(buff, textPosX, textPosY, null); //there you go
0

More articles:


All Articles