Math Quickie: Centering
Someone was reading the circular text layout math installment and asked if I had "... any thoughts on how to draw the text so that it is centered?". I'm going to be blatantly honest. The math installments are mainly to bring math to professionals and draw tangible links between theory and implementation. I've seen far too many hacks end up in code where the math isn't understood, but the end result was good enough to get by. With that in mind, I don't have thoughts on how text is centered, I instead go back to the mathematical rules and equations to discover the answer. Hopefully given the small basis on math that I've been focusing on others are now able to do this as well.
Since the original article discussed linearly rotated text as well as circular text, let's center that first. Remember that the transformation pipeline allows us to offset, rotate, and then offset again. We'll use this to make the entire process much easier.
textLocationX = ??
textLocationY = ??
textSizeX = size(text).x
textSizeY = size(text).y
textOffsetX = textSizeX / 2
// Transformation pipeline in non GDI+ order
moveTo(-textOffsetX, -(textSizeY/2))
rotate(angle)
moveTo(textLocationX, textLocationY)
Easy enough. We simply offset or center the text with respect to the origin. Then rotate about the origin. Then move to the final destination. The center of the text will now be deposited on the point given to the equation.
Centered circular text isn't much more difficult. I tried to quickly explain the process in a comment, but it deserves a bit more. Our objective is to convert linear string distance into an angular offset. Our algorithm already takes an angular offset for rendering text, so our new centering code simply needs to exist at the front of the pipeline to modify this angle before we start rendering the characters out. If you recall that Carcd is the distance around the circumference per each degree we can find a degree offset by dividing the linear text length by the Carcd. This is how far the text will travel around the edge of the circle in degrees, cut this in half (aka center), and then add or subtract it from the initial angle and you have your angle centered circular text.
textSizeX = size(text).x // Upgrade to character wise because of GDI+ measurement crap
sweepAngle = textSizeX / Carcd
offsetAngle = sweepAngle / 2
angle = initial angle +/- offsetAngle // Depending on direction of rotation
I would hope that the understanding of these processes can flow from the previous articles. I've had a number of contacts based on the series where people are putting together additional concepts to create some cool things, but they needed the intial grounding. I've created some great new controls, a couple of which are powered by Whidbey so I'll hold onto them for a while, that really make use of all the math. I also want to discuss some three dimensional layout opportunities using the same math and GDI+. Stay tuned!