Posted in ColdFusion | Posted on 01-16-2008 | 4,157 views
One of the things that I've been curious about for a while now is if there was a way to determine the graphical size of text when drawing in ColdFusion 8. Why would you need to care about that? While ColdFusion 8 lets you easily draw text on an image, there is no easy way to center it. In order to center it, you need to know the size of the text. Today in CF-TALK this issue came up in a thread.
A user named C S (not sure of his real name) provided the following code which works just dandy:
2 buffered = ImageGetBufferedImage(theColdFusionImage);
3 context = buffered.getGraphics().getFontRenderContext();
4 Font = createObject("java", "java.awt.Font");
5 // font name, style and size
6 textFont = Font.init( "Arial", Font.ITALIC, javacast("int", 15));
7 textLayout = createObject("java", "java.awt.font.TextLayout").init( text, textFont, context);
8 textBounds = textLayout.getBounds();
9 dimen.width = textBounds.getWidth();
10 dimen.height = textBounds.getHeight();
11</cfscript>
12
13<cfdump var="#dimen#">
Ben Nadel then chimed in and pointed out a cool blog entry where he describes how you can take a text string, provide a bounding box, and his UDF will wrap the text correctly within the box. His work was inspired by yet another blog post by Barney Boisvert.
With me so far? ;) So the issue of centering text now becomes simple. When you draw text, the X and Y represent the bottom left corner of the text block. So to center, you simply place the X at: Canvas Width/2 - Text Width/2. Height is the reverse: Canvas Height/2 + Text Height/2.
Here is a complete example. If you change the text, it should re-center accordingly.
2<cfset text = "Paris Hilton kicks butt!">
3
4<cfscript>
5 buffered = ImageGetBufferedImage(canvas);
6 context = buffered.getGraphics().getFontRenderContext();
7 Font = createObject("java", "java.awt.Font");
8 // font name, style and size
9 textFont = Font.init( "Arial-Black", Font.ITALIC, javacast("int", 15));
10 textLayout = createObject("java", "java.awt.font.TextLayout").init( text, textFont, context);
11 textBounds = textLayout.getBounds();
12 dimen.width = textBounds.getWidth();
13 dimen.height = textBounds.getHeight();
14</cfscript>
15
16<cfdump var="#dimen#">
17
18<!---
19when drawing text, you specify X, Y as the bottom left corner.
20So we need to position ourselves at Total Height / 2 + Height of Text / 2
21--->
22<cfset attr = { font="Arial-Black", size="15", style="italic"}>
23<cfset newx = (canvas.width/2 - dimen.width/2)>
24<cfset newy = (canvas.height/2 + dimen.height/2)>
25<cfset imageSetDrawingColor(canvas,"black")>
26<cfset imageDrawText(canvas,text, newx, newy, attr)>
27
28<cfimage action="writeToBrowser" source="#canvas#">
There is a reason for all of this that I'll explain later in the week (for my Friday contest probably).
http://cfsearching.blogspot.com/2008/01/text-wrapp...
See badge at: http://www.last.fm/user/djbyron/
Are you using the ImageSetAntialiasing function?
http://livedocs.adobe.com/coldfusion/8/htmldocs/fu...
Just to bring nto your notice
Cheers
http://cfsearching.blogspot.com/2008/07/what-fonts...
if i want to place the image just in the bottom middle what constraints i need to change
here is a fubction to list fonts installed
<cffunction name="getFontNames" access="public" returntype="array">
<cfset var allFonts = CreateObject("java", "java.awt.GraphicsEnvironment").getLocalGraphicsEnvironment().getAllFonts() />
<cfset var fontArray = ArrayNew(1) />
<cfset var i = "" />
<cfloop from="1" to="#ArrayLen(allFonts)#" index="i">
<cfset ArrayAppend(fontArray, allFonts[i].getName()) />
</cfloop>
<cfreturn fontArray />
</cffunction>
[Add Comment] [Subscribe to Comments]