web notes - a blog

There are many ways to create rounded rectangles with ImageMagick and PHP. After much thought, trial, and error, this is the solution I like best.

The basic approach is to define an image, then use the ratio of height to width, with some tweaking, to determine the rounding coordinates. Rounding is achieved using four arcs, with a strokewidth that is wide enough to cover the corner. Each arc is 90 degrees. After the arcs are drawn, the image is flattened and the stroke color is defined as transparent.

Command

convert -size ‘250x250′ xc:"#5f7172″ \
-stroke “#ffffff” -strokewidth 25 \
-fill none -draw ‘arc -13,51 51,-13 180,270′ \
-fill none -draw ‘arc -13,199 51,263 90,180′ \
-fill none -draw ‘arc 199,199 263,263 0,90′ \
-fill none -draw ‘arc 199,51 263,-13 270,360′ \
-flatten -transparent “#ffffff” -blur 0x0.1 -quality 100 \
tmp/r1.png

Image

The rounded rectangle generator (above link), has been updated to use this approach.

Notes on rounded rectangles

• Masking tended to remove the anti-aliasing, leaving the ‘corners’ a little rough or stepped.
• Adding a background color to the tool allows ImageMagick to do a nicer job with the anti-aliasing.
• Drawing arcs, instead of rounded rectangles seemed to work better. It was difficult to use the rounded rectangle to remove the corners.

The Stepped Opacity Demo is a nice image processing technique I saw used on eZ publish’s (http://ez.no) web interface. The image has a few white rectangles of increasing opacity at the bottom.

This demo has a really nice image from flickr.com (credit on the page), with the rectangles on it. It also allows you to click on the image and have it return the color of the pixel.

Lessons learned:

• This took four hours. That’s about three more than I was expecting. The image part was easy, it was the pixel color that took the time. Even then, it only works in FireFox. Good enough.
• Getting an accurate pixel location was affected by padding and margins. I zeroed them.
• A crosshair cursor on the image made it easier to see the click point.
• The next version will probably allow the image to be uploaded so the pixel tool will be more useful.
• An RGB to HSV converter would be nice as well.

Link is a demo of the dojox Gallery / SlideShow widget.

Implementation considerations:

• Table of contents (left column) provides links for SEO, as well as navigation by site visitor/organization of content.

• A detail page could be developed for each page that would include additional text, both for SEO and to provide more information for site visitors.

• Images are just color gradients - easy to see them change.

Free utility that allows you to select a color, the dimensions of the rectangle and whether you want a gradient or not.

Generates nice .PNGs.

No restrictions on use.

# Create an image mask with rounded corners
convert -size 100x75 xc:white -fill black -draw “roundrectangle 0,0, 100,75 15,15″ +negate mask.png
# Create a gradient (you may skip this step if you’re using an existing image)
convert -size 100x75 -fill orange gradient:black-none -sigmoidal-contrast 6,50% -colorize 100% 3.png
# Remove the rounded corners, using the mask
convert -size 100x75 mask.png -transparent white 3.png -compose minus -composite out3.png

This approach works, but the corners are a bit rough. There are more posts in this category with better solutions.