Posted by: Yogesh Puri on: December 20, 2008
I have faced a problem when i tried to have a canvas with rounded corner and having an image. I doesn’t want to make the rounded corners in image as the content is going to be scaled. After doing some research on Net i found a good solution to the problem. it is a kind of trick where you put the rounded corner canvas as a mask on your image and it works perfectly
. Following is the code for the same
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Image source="../bin-debug/assets/bg.jpg" x="10" y="10" mask="{maskCanvas}" height="80%" width="80%" maintainAspectRatio="false" />
<mx:Canvas id="maskCanvas" x="10" y="10" width="80%" height="80%" cornerRadius="10" borderStyle="solid">
</mx:Canvas>
</mx:Application>
Do remember to create an asset folder having a “bg.jpg” image when trying this solution.
[...] See the rest here: Solution for Canvas having rounded corner and a background [...]
March 13, 2009 at 9:19 pm
perfect, just perfect! No actionscript needed! Great solution