Rounded Corners Code

A while back I mentioned that I had come up with some code to do rounded borders, but that I was holding it back as part of a larger release. Since then, I've not gotten as far with some of my other code ideas, and since I was asked nicely, I figured I'd release the code for rounded corners.

It requires a utility function I created for working with images, which in turn requires another utility function... here they are:


<cffunction name="CleanCopy" returntype="any" output="false">
    <cfargument name="image" type="any" required="true" />

    <cfset var myImage = ImageBlank(arguments.image) />
    <cfset ImagePaste(myImage, arguments.image, 0, 0)/>
        
    <cfreturn myImage/>
</cffunction>

<cffunction name="ImageBlank" returntype="Any" output="false" hint="">
    <cfargument name="image" type="any" required="true" />
<cfargument name="backgroundColor" type="string" required="false" default="white" />

<cfset var strInfo = ImageInfo(arguments.image)>
    
    <cfreturn ImageNew("", strInfo.width, strInfo.height, "argb", arguments.backgroundColor) />
</cffunction>

And the meat and bones:


<cffunction name="RoundCorners" returntype="any" output="false" hint="Adds rounded corners to an image.">
    <cfargument name="image" type="any" required="true" />
<cfargument name="cornerSize" type="numeric" required="true" />
<cfargument name="backgroundColor" type="string" required="false" default="white" />
<cfargument name="antialiasingOn" type="boolean" required="false" default="true" />

    <cfset var myImage = CleanCopy(arguments.image) />
    <cfset var strInfo = ImageInfo(myImage) />
    <cfset var strStroke = StructNew() />
    <cfset var xyOffset = (arguments.cornerSize/4)+2 />
    <cfset var arcSize = (1.5*arguments.cornerSize) />
    
    <cfset strStroke.width = JavaCast("String", arguments.cornerSize/2) />
    <cfset ImageSetDrawingStroke(myImage, strStroke) />
    <cfset ImageSetDrawingColor(myImage, arguments.backgroundColor) />
    
    <cfif arguments.antialiasingOn>
        <cfset ImageSetAntialiasing(myImage, "on")/>
    </cfif>
    
    <cfset ImageDrawRoundRect(myImage, -xyOffset, -xyOffset, (strInfo.width+strStroke.width+1.5), (strInfo.height+strStroke.width+1.5), arcSize, arcSize, "no")/>

    <cfreturn myImage />        
</cffunction>

If you don't need a version that breaks the pass-by-reference nature of images, then delete CleanCopy and ImageBlank and set the first line of RoundCorners to:


<cfset var myImage = arguments.image />

Or change all references of myImage to arguments.image and remove that line of code completely.

Enjoy

 

Related Blog Entries

Comments

Matt Gifford's Gravatar Jon..

this is fantastic. Thank you so much for posting this and sharing ti with us!
Great work, and a Happy New Year to you! :D

Matt
Jon Hartmann, July 2011

I'm Jon Hartmann and I'm a Javascript fanatic, UX/UI evangelist and former ColdFusion master. I blog about mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web.

Learn more about me.

Post a job. Find one. authenticjobs.com

Interested in becoming a sponsor? Contact me.