Sorry its been a long day. Is there any simple explanation of how to bring the graphics layer to the front? Here is my code:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" width="100%" height="100%" backgroundColor="#FFFFFF"> <mx:Script> <![CDATA[ import flash.events.MouseEvent; import mx.controls.Alert; import mx.utils.GraphicsUtil; private var _xStart:Number; private var _yStart:Number; public function drawBox(event:MouseEvent):void{ _xStart = event.localX; _yStart = event.localY; addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove); addEventListener(MouseEvent.MOUSE_UP, endDraw); } public function endDraw(event:MouseEvent):void{ removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove); } public function onMouseMove(event:MouseEvent):void{ drawRectangle(event); } public function drawRectangle(event:MouseEvent):void{ var width:Number = event.localX - _xStart; var height:Number = event.localY - _yStart; var g:Graphics = myImage.graphics; g.clear(); g.lineStyle(2, 0xFF0000, 1); g.beginFill(0x000000, 0); myImage.setFocus(); GraphicsUtil.drawRoundRectComplex(g, _xStart, _yStart, width, height, 0, 0, 0, 0); g.endFill(); } ]]> </mx:Script> <mx:HBox width="100%" height="100%" mouseDown="drawBox(event)" id="myImage" > <mx:Image x="0" y="0" source="@Embed('../resources/spring-reference6.jpeg')" /> </mx:HBox> </mx:Application> --- In flexcoders@yahoogroups.com, "Alex Harui" <[EMAIL PROTECTED]> wrote: > > The graphics layer is below all children, so you need to add other > visuals as children over the image. > > Below is the code I prototyped for an Image with a close button and > resize handle. > > public class CloseResizeImage extends Image > { > > public function CloseResizeImage() > { > super(); > } > > private var closeButton:Button; > private var resizer:Image; > > [Embed(source="ATOC_F8_v3r9_8.swf",symbol="Button_Up")] > private var upSkin:Class; > [Embed(source="ATOC_F8_v3r9_8.swf",symbol="Button_Over")] > private var overSkin:Class; > [Embed(source="ATOC_F8_v3r9_8.swf",symbol="Button_Down")] > private var downSkin:Class; > [Embed(source="ATOC_F8_v3r9_8.swf",symbol="WindowResizer")] > private var resizerSkin:Class; > > override public function load(url:Object = null):void > { > super.load(url); > > if (!closeButton) > { > closeButton = new Button; > closeButton.setStyle("upSkin", upSkin); > closeButton.setStyle("overSkin", overSkin); > closeButton.setStyle("downSkin", downSkin); > addChildAt(closeButton, 1); > closeButton.addEventListener("click", clickHandler); > > resizer = new Image; > resizer.source = resizerSkin; > addChildAt(resizer, 2); > resizer.addEventListener("mouseDown", mouseDownHandler); > } > > setChildIndex(closeButton, 1); > setChildIndex(resizer, 2); > > } > > override protected function updateDisplayList(uw:Number, > uh:Number):void > { > super.updateDisplayList(uw, uh); > > closeButton.move(uw - closeButton.getExplicitOrMeasuredWidth(), 0); > closeButton.setActualSize(closeButton.getExplicitOrMeasuredWidth(), > closeButton.getExplicitOrMeasuredHeight()); > > var rw:Number = resizer.getExplicitOrMeasuredWidth(); > var rh:Number = resizer.getExplicitOrMeasuredHeight(); > resizer.move(uw - rw, uh - rh); > resizer.setActualSize(rw, rh); > > // graphic is porous so make a hit area for it. > resizer.graphics.clear(); > resizer.graphics.beginFill(0, 0); > resizer.graphics.moveTo(rw, 0); > resizer.graphics.lineTo(0, rh); > resizer.graphics.lineTo(rw, rh); > resizer.graphics.lineTo(rw, 0); > resizer.graphics.endFill(); > > } > > private function clickHandler(event:Event):void > { > visible = false; > } > > private function mouseDownHandler(event:Event):void > { > stage.addEventListener("mouseUp", mouseUpHandler); > stage.addEventListener("mouseLeave", mouseUpHandler); > stage.addEventListener("mouseMove", mouseMoveHandler); > } > > private function mouseUpHandler(event:Event):void > { > stage.removeEventListener("mouseUp", mouseUpHandler); > stage.removeEventListener("mouseLeave", mouseUpHandler); > stage.removeEventListener("mouseMove", mouseMoveHandler); > } > > private function mouseMoveHandler(event:MouseEvent):void > { > var stagePt:Point = new Point(event.stageX, event.stageY); > var localPt:Point = parent.globalToLocal(stagePt); > if (localPt.x >= x) > explicitWidth = localPt.x - x; > if (localPt.y >= y) > explicitHeight = localPt.y - y; > } > > > > ________________________________ > > From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On > Behalf Of cardinalflexjeremy > Sent: Monday, April 02, 2007 10:54 AM > To: flexcoders@yahoogroups.com > Subject: [flexcoders] Re: Drawing a box over top of an image > > > > Using an image tag, I can get it to work, but when I draw the box it > shows up 'behind' the image, so that doesnt do what I want. > > When using an HBox and setting the background image param, the pic is > getting clipped. When I set the backgroundScale attribute, to 100% it > squishes the image to fit the HBox, which wont expand to encapsulate > the entire image. > > Help! > > --- In flexcoders@yahoogroups.com <mailto:flexcoders%40yahoogroups.com> > , "cardinalflexjeremy" > <sandersjs@> wrote: > > > > OK here is the deal. > > > > I need to take a jpg image, and display it to the user. I need the > > entire image displayed. > > > > From there I need to give the user the ability to click and hold with > > thier mouse, and draw a box over the top of the image. > > > > I can kinda get it to work. I am using the image as the background of > > a HBox, but it does not display the entire image, it clips the top and > > bottom. > > > > Anyone done anything similar to this? > > > > The end result is that I am trying to catpure coordinates on the image > > to pass to a java backend to display a digital signature section on > > the image. > > > > Any help would be greatly appreciated. > > >
