I wanted to learn how to apply a mask so I thought I would try and tackle your problem.
This is what I have come up with so far. For some reason that I cannot fathom the bottom right hand corner does not want to honor the curveTo so still breaks out. I have checked my calculations over and over but it still does not want to come out and play. If any one can tell me why I would be most appreciative. <?xml version="1.0" encoding="utf-8"?> <mx:Application name="Image mask test" xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" backgroundColor="white" initialize="init();" creationComplete="onCreationComplete()"> <mx:Script> <![CDATA[ private var roundedMask:Sprite; private function init():void { roundedMask = new Sprite(); innerCanvas.rawChildren.addChild(roundedMask); } private function onCreationComplete():void { roundedMask.graphics.clear(); roundedMask.graphics.beginFill(0x00FF00); roundedMask.graphics.moveTo(0, 0); roundedMask.graphics.lineTo(22, 0); roundedMask.graphics.curveTo(30, 0, 30, 8); roundedMask.graphics.lineTo(30, 92); roundedMask.graphics.curveTo(30, 100, 22, 100); roundedMask.graphics.lineTo(0, 100); roundedMask.graphics.lineTo(0, 0); roundedMask.graphics.endFill(); innerCanvas.mask = roundedMask; } ]]> </mx:Script> <mx:Canvas id="outerCanvas" x="0" y="0" width="225" height="100" cornerRadius="8" borderStyle="solid" borderColor="#c0c0c0" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Canvas width="30" height="100%" x="195" y="0" backgroundColor="#ff8000" backgroundAlpha=".5" id="innerCanvas"> <mx:Button right="4" top="3" fillColors="[#0080ff, #0080ff]" fillAlphas="[0.5, 0.5]" id="but_Select"/> </mx:Canvas> <mx:Label text="Target" fontSize="12" left="4" top="3" right="34" color="#808080" id="lbl_Title"/> <mx:Text text="Text" left="4" bottom="4" right="34" top="20" id="txt_Message"/> </mx:Canvas> </mx:Application> Steve --- In flexcoders@yahoogroups.com, "simonjpalmer" <[EMAIL PROTECTED]> wrote: > > I have a canvas within a canvas and the outer canvas has rounded > corners. The inner one is basically a strip along the right hand side > of the outer canvas which I fill with a colour depending on the state > of some internal variable. There are a couple of text fields in the > outer canvas too, but they are irrelevant to the problem at hand. > > I want the inner one to have square corners but for its right hand > edge to be trimmed or masked so that it doesn't appear outside the > outer canvas's rounded corners. > > It's harder to describe than it is to see in reality. > > Here is my code which when displayed shows the little corners of the > inner canvas poking out of the nicely rounded edges of its parent. > > <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; > width="225" height="100" > cornerRadius="8" > borderStyle="solid" borderColor="#c0c0c0" > xmlns:ns1="src.com.dsl.controls.*"> > > <mx:Canvas width="30" height="100%" right="0" top="0" > backgroundColor="#ff8000" backgroundAlpha=".5" id="cvs_StatusColour"> > <ns1:ctrl_FancyButton right="4" top="3" fillColors="[#0080ff, > #0080ff]" fillAlphas="[0.5, 0.5]" id="but_Select"/> > </mx:Canvas> > <mx:Label text="Target" fontSize="12" left="4" top="3" right="34" > color="#808080" id="lbl_Title"/> > <mx:Text text="Text" left="4" bottom="4" right="34" top="20" > id="txt_Message"/> > > </mx:Canvas> >
