FLEX{er}

How To Make an Image With Border
Continuing Image With Border

In the last article I explained how to create an image surrounded by border. That article is a start for fixing the issue: “image doesn’t have border style”.

Now I extended even more the new ImageBorder component to be able to center it horizontally and vertically and still be well displayed.

Modifications were made in updateDisplayList method these are:

added startX, startY, endX and endY - we set default value to them
x and y position reclaculated if there are set horizontalCenter and respectively verticalCenter
adjust startX and startY is horizontalAlign and verticalAlign are set to center the image

The code of updateDisplayList method is bellow:

// overriding the update function
override protected function updateDisplayList(
    w:Number,h:Number):void
    {
    super.updateDisplayList(w,h);
    // clear graphics
    // we want only one rectangle
    graphics.clear();
    // set line style with with 0 and alpha 0
    graphics.lineStyle(0,getStyle('borderColor'),0,false);
    // draw rectangle
    graphics.beginFill(getStyle('borderColor'),getStyle('borderAlpha'));
    var thickness:Number = getStyle('borderThickness');
    var startX:Number;
    var startY:Number;
    var endX:Number;
    var endY:Number;
    startX = -thickness;
    endX = contentWidth + thickness*2;
    startY = -thickness;
    endY = contentHeight + thickness*2;
    if (getStyle("horizontalCenter") == undefined)
    {
        // adjust the position 
        // calculation based on initial position
        x = _recalX + thickness;
    }
    if (getStyle("horizontalAlign") == "center")
    {
        // adjust the position 
        // calculation based on initial position
        startX = Math.floor((width - contentWidth)/2) - thickness;
    }
    if (getStyle("verticalCenter") == undefined)
    {
        // adjust the position 
        // calculation based on initial position
        y = _recalY + thickness;
    }
    if (getStyle("verticalAlign") == "middle")
    {
        // adjust the position 
        // calculation based on initial position
        startY = Math.floor((height - contentHeight)/2) - thickness;
    }
    graphics.drawRect(startX,startY,endX,endY);
    graphics.endFill();
}