PDA

View Full Version : Detecting the "edges" a container or really any object/component.


CDHBookingEdge
12-02-2006, 08:41 PM
I'm working on a program where at least at this time in it's development I need to be able to detect when the mouse is on the "edge" of the container.

So..trying to clarify (my apologies I'm tired) given an MXML of this sort:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" frameRate="120" width="100%" height="100%" >
<mx:Script>
<![CDATA[
import mx.controls.Alert;

private function handleMouseMove(event:MouseEvent) : void
{
if (OnEdge(event))
{
Alert.show("Man I am on the edge!")'
}
}
private function OnEdge(event:MouseEvent) : Boolean
{
<wondering what to put here as far as determining true or false>
}
]]>
</mx:Script>

<mx:Panel id="myPanel" mouseMove="handleMouseMove(event);">
</mx:Panel>
</mx:Application>


What do I need to put in OnEdge to return true if the mouse cursor is within N pixels of the edge of myPanel?

Again my apologies if that was unclear I'm tired and have looked at a lot of code today and written a good bit as well LOL and I'll be more than willing to clarify things as are deemed needed.

Christopher

senocular
12-03-2006, 04:52 AM
I dont think there's any internal means to determine that. However, I can see a way to do that by using a bitmap hittest with the object with a glow filter with knockout applied. That would then give you a test with the "edge"

CDHBookingEdge
12-03-2006, 09:10 PM
Hmmm maybe I misexplained something LOL which is quite possible. maybe Edge wasn't the best choice of words here. But I got it working doing something like this:

public function OnEdge(event:MouseEvent) : Boolean
{
if (event.target != this && event.target != this.controlBar
&& event.target != this.titleBar && event.target != this.titleTextField)
{
return false;
}
var right: Number = width -4;
var bottom: Number = height -4;
if (event.localX < 4 || event.localY < 4 || event.localX > right
|| event.localY > bottom)
{
return true;
}
return false;
}



Yes it's not the prettiest code in the world that's for sure! But it is letting me know so I can know to change the cursor to a resizing still of cursor. Now I just need to get the <expletive deleted> resizing working! LOL

Thanks seno,
Christopher

senocular
12-03-2006, 09:49 PM
If you're dealing with rectangular objects, then you wouldn't have to worry about what I said before. Then you can just used getBounds and detect for a location within those bounds and any distant within those bounds.

As for resizing, that can get complicated. I guess it depends on what you're after. I have this:
http://www.senocular.com/demo/TransformToolAS3/TransformTool.html
but that might be overkill. If you want to just do a normal scaler, that would be a lot easier (and would probably work better with components). Of course you'd probably have to write some new code.

CDHBookingEdge
12-04-2006, 04:58 AM
I took a look at and though it does seem a bit of overkill for this in one way it it hella cool! And I do see some things in it that are very noteworthy. Though I would like to get the outline feature going in it sometime, really for now I just want to be able to resize a floating panel. If you look here (http://geocities.com/minds2gether/creidhne.htm) that might give you a better idea of what I'm trying to do. This is the current project I'm working on that I need to resize panels in.

Thanks again for all the help,
Christopher

senocular
12-04-2006, 10:53 AM
Do you want just a corner resizer? If so, you really wouldn't need any edge detection. That is typically just a single corner widget attached to the corner of the panel that can be dragged. The change in position (accounting for limits) is then just applied to the panel size. Thats simple.

I don't even use Flex but applying that to a component wasn't hard:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"
creationComplete="initComponent()">
<mx:Script>
<![CDATA[
protected const MIN_WIDTH:Number = 85;
protected const MIN_HEIGHT:Number = 75;
protected var mouseOffset:Point = new Point(0, 0);

protected function initComponent():void {
resizer.addEventListener(MouseEvent.MOUSE_DOWN, scaleMouseDownHandler);
}
private function scaleMouseDownHandler(event:MouseEvent):void {
mouseOffset = new Point(width - mouseX, height - mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, scaleMoveHandler, true);
stage.addEventListener(MouseEvent.MOUSE_UP, scaleMouseUpHandler, true);
}
private function scaleMoveHandler(event:MouseEvent):void {
width = Math.max(MIN_WIDTH, mouseX + mouseOffset.x);
height = Math.max(MIN_HEIGHT, mouseY + mouseOffset.y);
}
private function scaleMouseUpHandler(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, scaleMoveHandler, true);
stage.removeEventListener(MouseEvent.MOUSE_UP, scaleMouseUpHandler, true);
}
]]>
</mx:Script>
<mx:Panel layout="absolute" top="0" bottom="0" left="0" right="0">
</mx:Panel>
<mx:Canvas id="resizer" width="20" height="20" backgroundColor="#c0c0c0" right="0" bottom="0">
</mx:Canvas>
</mx:Canvas>

CDHBookingEdge
12-04-2006, 02:06 PM
Right now I'm working on resizing from "all 4 sides and the corners" but since the pod will have to handle probably a few scenarios I'll probably have to put in some either or handling in it and do the corner gripper thing as well.

I've got it working as far as resizing now on the all 4 sides scenario with a few bugs and such, I'm gonna try to clean up the code and see what I can do about the bugs and all that. And hopefully I'll have the code up somewhere, warts and all for people to take a look at on Project Creidhne (http://www.geocities.com/minds2gether/creidhne.htm) (probably gonna use google code as my repository) in a few days if not sooner.

Thanks again, your input is helping a lot!

Christopher