Search for addChild in the code. They are in the override of the load() method. You cannot move the z-order of the graphics layer. It is always in the back which is why I added children instead. Your shortest path may be to use Canvas instead of HBox and have a second child of the Canvas that overlays the Image.
________________________________ From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of cardinalflexjeremy Sent: Monday, April 02, 2007 11:49 AM To: flexcoders@yahoogroups.com Subject: [flexcoders] Re: Drawing a box over top of an image re-reading this it sounds more negative than I meant it to. Simply put, I dont see in the code, where you are adding a child to the image is all. If there is some code I need to implement below, so as to not have to re-work the image component I would be greatly appreciative for any help or advice. JS --- In flexcoders@yahoogroups.com <mailto:flexcoders%40yahoogroups.com> , "cardinalflexjeremy" <[EMAIL PROTECTED]> wrote: > > 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 <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 <mailto:flexcoders%40yahoogroups.com> , "Alex Harui" <aharui@> 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:flexcoders%40yahoogroups.com> [mailto:flexcoders@yahoogroups.com <mailto:flexcoders%40yahoogroups.com> ] On > > Behalf Of cardinalflexjeremy > > Sent: Monday, April 02, 2007 10:54 AM > > To: flexcoders@yahoogroups.com <mailto:flexcoders%40yahoogroups.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> <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. > > > > > >
