DashCapper – Fred Anderson

After reading Ben Nadel's recent post ColdFusion Image Coordinates Are Zero-Base I thought it would be a good opportunity to fire up the blog and get things going. I have been working on a Microchart/Sparkline cfc recently and I have come across a couple oddities. Let's start with an example of what Ben was talking about, the zero based system as it applies to an oval.

Example 1

<cfset myimage="ImageNew("",30,30,"rgb","eeeeee")">
<cfset>
<cfset>
<cfimage action="writeTobrowser" source="#myImage#"></cfimage></cfset></cfset></cfset>

As you can see, end up with a circle that is offset by a pixel each way. So let's push it back a bit.

Example 2

<cfset myimage="ImageNew("",30,30,"rgb","eeeeee")">
<cfset>
<cfset>
<cfimage action="writeTobrowser" source="#myImage#"></cfimage></cfset></cfset></cfset>

That's More like it. I am leaving out the antialiasing for the sake of seeing the edges clearly. You will see the same results with antialiasing set to "on".

 
<cfset myimage="ImageNew("",30,30,"rgb","eeeeee")">
<cfset>
<cfset>
<cfset>
<cfimage action="writeTobrowser" source="#myImage#">
</cfimage></cfset></cfset></cfset></cfset>

Now is the point when things become a little odd. If we want a filled circle we are going to have to adjust some numbers a bit. Yeah, I know it's odd, you would think that my 30x30 circle drawn from 0,0 to 29x29 and the fill set to "yes" would do the trick. Here is the result.

Example 3

<cfset myimage="ImageNew("",30,30,"rgb","eeeeee")">
<cfset>
<cfset>
<cfimage action="writeTobrowser" source="#myImage#"></cfimage></cfset></cfset></cfset>

As you can see, this didnt exactly work. The circle is centered alright, it is just drawn as though there was not a border (fyi, just applying a stroke in this case will not add a border).

Example 3b

<cfset myimage="ImageNew("",30,30,"rgb","eeeeee")">
<cfset>
<cfset>
<cfimage action="writeTobrowser" source="#myImage#"></cfimage></cfset></cfset></cfset>

It looks like if just extend the oval a pixel in all directions it works fine. Unless we turn on anti-aliasing. Take a look at what happens when we apply anti-aliasing.

Example 3c

<cfset myimage="ImageNew("",30,30,"rgb","eeeeee")">
<cfset>
<cfset>
<cfset>
<cfimage action="writeTobrowser" source="#myImage#"></cfimage></cfset></cfset></cfset></cfset>

The Anti-aliasing has caused the oval to shift up and to the left. so one last pass at this should give us what we need.

Example 3d

<cfset myimage="ImageNew("",30,30,"rgb","eeeeee")">
<cfset>
<cfset>
<cfset>
<cfimage action="writeTobrowser" source="#myImage#"></cfimage></cfset></cfset></cfset></cfset>

So to wrap things up, you may have to tweak the way you draw things using cfImage. In my case, I am using rather small graphic 30x30 and 50x50 would be the max, I have tested these same examples at larger scale and have found similar results. Since my cfc's are excepting values for width, height and anti-aliasing rather than allowing the user to directly set those things, I have added a modifier to those variables based on their parameter for anti-aliasing.

This entry was posted on Thursday, March 6th, 2008 at 7:29 am and is filed under CFImage, ColdFusion, Microchart, Sparkline. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.