Image Border?

[loproman]

Hi, I just want to add a border around an Image control. For whatever reason, this seems to be insanely confusing and complicated... which usually means I am doing something wrong.

The following code kinda, sorta works... but the border acts funny when I don't explicitly set the width and height of an image. Any suggestions?


package ui
{
import flash.display.Bitmap;
import flash.display.Shape;
import mx.controls.Image;
import mx.events.*;
import mx.graphics.RectangularDropShadow;

public class Photo extends Image
{

private var _shadow: RectangularDropShadow;
private var _border: Shape;

public function Photo()
{
super();
this.autoLoad = true;
}

override protected function createChildren():void {


if(!_border){
_border = new Shape();
addChild(_border);
}

if(!_shadow){
_shadow = new RectangularDropShadow();
}
}

override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number) : void
{
super.updateDisplayList(unscaledWidth,unscaledHeig ht);

//draw the drop shadow
var shadowOffset:Number = 6/2;
_shadow.drawShadow(graphics, shadowOffset, shadowOffset, unscaledWidth, unscaledHeight);

//draw the image border
_border.graphics.lineStyle(6, 0xFFFFFF, 1, false, "normal", null, JointStyle.MITER, 3 );
_border.graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
}
}
}

[glenpike]

There is a comment at the bottom of the language reference about how to add borders to images.

I used this, but commented out the lines:
//x+=(getStyle('borderThickness')/2);
//y+=(getStyle('borderThickness')/2);

because I was doing rollovers and it moves the image each time you update the display...

http://livedocs.adobe.com/flex/201/langref/mx/controls/Image.html

[loproman]

Thanks! That got me most of the way there. However, when I change the "borderThickness" value from an MXML tag, it doesn't seem to redraw using the correct linestyle. Any idea why that might be?