Table of contents
- How To Make an Image With Border
- Continuing Image With Border
How to put border around an image? How to do that when you set only maxWidth and maxHeight? This is not an easy task. Googleing about my issue I found this, on Adobe’s LiveDocs (you must go at the end where comments are): a couple of helpful comments where Justin.Buser is, literally, drawing a rectangle to create a border around an image. He is creating a new component based on Image object.
His code is simple but doesn’t give me the result I want and because of that I created my own component based on his code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <?xml version="1.0" encoding="utf-8"?> <mx:Image xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()"> <mx:Metadata> [Style(name="borderColor", type="uint", format="Color", inherit="no")] [Style(name="borderThickness", type="Number", format="Length", inherit="no")] [Style(name="borderAlpha", type="Number", format="Length", inherit="no")] </mx:Metadata> <mx:Script> <![CDATA[ // initial position private var _recalX:Number; private var _recalY:Number; // initialization private function init():void { // we save the initial position _recalX = this.x; _recalY = this.y; } // overriding the update function override protected function updateDisplayList( w:Number,h:Number):void { super.updateDisplayList(w,h); // adjust the position // calculation based on initial position x = _recalX + (getStyle('borderThickness')); y = _recalY + (getStyle('borderThickness')); // 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')); graphics.drawRect(-getStyle('borderThickness'), -getStyle('borderThickness'), contentWidth+getStyle('borderThickness')*2, contentHeight+getStyle('borderThickness')*2); graphics.endFill(); } ]]> </mx:Script> </mx:Image> |
So the component now has three more style properties than Image object has: borderThickness, borderColor and borderAlpha.
In the following application you can see why I said that Justin’s component doesn’t give me the result I want. Try to play with the border thickness to see the result.
To be short:
- is adding a new rectangle with every updateDisplayList call
- is adding the border thickness to both x and y positions with every updateDisplayList call
To correct this behavior we clear graphics whenever updateDisplayList method is called and at initialization we save the start x and y positions based on which we recalculate the new position with border.
This is all and the code can be downloaded at the end as usual.
Popularity: 64%
| ||
|
Tags: ActionScript, component, image, MXML, style
This post was written by Andrei Ionescu
Views: 2250
Articles
[…] « How To Make an Image With Border […]
As with all my sample code that can be found on Adobe Livedocs I try to steer people in the right direction more than simply telling them how to do something. After all, the best way to learn something is to figure it out for yourself but with Flex sometimes it’s better if you get a little push in the right direction.
I was looking for a way to add a border to the Image component and got to your post. However, I didn’t want to write another component just to achieve this affect. In the end, I just placed my Image components inside a Box component with borders.
HTH.