imageDrawText center text watermark (break lines) - coldfusion

Question

I've been trying to add text watermark on images using imageDrawText tag in CF10.
here is some testing code
<cfset img = imageNew("",500,500,"rgb","blue")>
<cfset text = "This is just another test! See if text fits the imgage...">
<cfset buffered = ImageGetBufferedImage(img)>
<cfset context = buffered.getGraphics().getFontRenderContext()>
<cfset Font = createObject("java", "java.awt.Font")>
<cfset textFont = Font.init( "Arial", Font.BOLD, javacast("int", 40))>
<cfset textLayout = createObject("java", "java.awt.font.TextLayout").init( text, textFont, context)>
<cfset textBounds = textLayout.getBounds()>
<cfset textWidth = textBounds.getWidth()>
<cfset textHeight = textBounds.getHeight()>
<cfset attr = { font="Arial", size="40", style="bold" }>
<cfset x = (ImageGetWidth(img) / 2 - textWidth / 2)>
<cfset y = (ImageGetHeight(img) / 2 + textHeight / 2)>
<cfset imageSetDrawingColor(img,"black")>
<cfset imageDrawText(img,text, x, y, attr)>
<cfimage action="writeToBrowser" source="#img#">
the problem is that I do not know how to break lines and center the text...
on the left is what the code produces and on the right is what I would like to get
It is important to note that the font size and the number of characters will vary from one image to another and that's the main reason I do not know how to count it correctly.
My initial idea was to count characters and see how many will fit in image width though that is not possible due to the above reasons. So is there a one-liner for this or some sort of mathematical function is needed to manually split text width and break lines? also maybe I should use additional or x imageDrawText tags to display each line separately, though still need to split it somehow!

Answer 1

Wrapping text is definitely not a one-liner ;-) Unfortunately, you cannot simply count characters, because the sizes of the individual glyphs can vary, unless maybe you are using a mono-spaced font.
Essentially, the only way to accurately wrap text is to iterate through the string, measure the size of each word (in the current font) and see if it fits on the current line. If not, start a new line. There is a little more to it, but bottom line it involves two steps: 1) measure and split the text into lines 2) then draw the lines of text onto the image
There are different ways you could handle measuring and splitting the text into lines. My preference is using a LineBreakMeasurer because it does most of the hard work. You just give it the width of the wrapping area and it auto-magically calculates how much of the text can fit on the current line.
Many moons ago, I put together a small library for wrapping and scaling image text (old blog, not maintained). Give it a whirl. It is a little old, but I think it should do the trick.
UPDATE:
I just remembered the library does not center the text vertically, only horizontally. However, since it returns the dimensions of the wrapped text, you could easily calculate it. Here is a very quick and dirty example:
Code:
<cfset text = "If you're going through hell, keep going" />
<!--- overall image dimensions --->
<cfset imageWidth = 500 />
<cfset imageHeight = 500 />
<!--- desired wrapping area --->
<cfset textMargin = 25 />
<cfset wrapWidth = imageWidth - (textMargin*2) />
<cfset wrapHeight = 100 />
<!--- create a blank image with background --->
<cfset img = ImageNew("", imageWidth, imageHeight, "rgb") />
<cfset imageSetDrawingColor( img, "d9d9ff" ) />
<cfset imageDrawRect(img, 0, 0, imageWidth, imageHeight, true) />
<!--- measure dimensions of wrapped text --->
<cfset util = createObject("java", "org.cfsearching.image.WrapImageText") />
<cfset util.init( text, wrapWidth, wrapHeight ) />
<cfset util.setAlignment( util.CENTER_ALIGN ) />
<cfset util.setColor( "0000ff" ) />
<cfset util.setDrawText( false ) />
<cfset util.setX( textMargin ) />
<cfset util.setFont( "Arial", util.BOLD, 40) />
<!--- note: when disabled, text may overflow established wrap height
<cfset util.setAutoScale( false ) />
--->
<!--- use dimensions to center text VERTICALLY --->
<cfset dimen = util.wrapText( ImageGetBufferedImage(img) ) />
<cfset y = (imageHeight - dimen.height) / 2 />
<cfset util.setY( y ) />
<!--- draw the wrapped text --->
<cfset util.setDrawText( true ) />
<cfset dimen = util.wrapText( ImageGetBufferedImage(img) ) />
<!--- display results --->
<cfimage action="writeToBrowser" source="#img#" /> <br />
Result: (Using default font/auto scaling)