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: [email protected] [mailto:[EMAIL PROTECTED] On
Behalf Of cardinalflexjeremy
Sent: Monday, April 02, 2007 10:54 AM
To: [email protected]
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 [email protected] <mailto:flexcoders%40yahoogroups.com>
, "cardinalflexjeremy"
<[EMAIL PROTECTED]> 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.
>
