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.