rotation and constraints, any progress

148 views
Skip to first unread message

stevenshand

unread,
Feb 13, 2011, 4:45:42 PM2/13/11
to Flex ObjectHandles
Hi,

firstly I wanted to say I'm impressed with this library and how it's
put together. I'm wondering if any progress has been made on the
enforcing of constraints with rotated objects?

I've had a look at the code and before I dive in to try and implement
something myself, I thought I'd check if there had been any progress
recently. (I'm using the ObjectHandles-2.0.0008_FLEX4.swc build).

If there's no progress but someone has a clear idea of how it should
be done, please let me know and I'll happily contribute time to
implementing a solution.

Cheers

Steven

Ruy Diaz

unread,
Apr 6, 2011, 6:19:29 PM4/6/11
to Flex ObjectHandles
I just implemented a solution for this. I haven't really tested it
with multiple selections, but I think it should work. Also, I tested
it on Flex 4 only. If anyone is interested, I created a fork at:

https://github.com/diazruy/ObjectHandles

HTH
Ruy

bazjapan

unread,
May 24, 2011, 5:00:53 AM5/24/11
to Flex ObjectHandles
Thanks a lot for this Ruy.

Andriy Sokolov

unread,
Aug 10, 2011, 9:39:35 AM8/10/11
to object...@googlegroups.com
I've implemented my MovementConstraint, based on the native one, which allows works for rotation, also for multiple selections. The only problem: The visible handles are not updated till the mouse released. Here is it:

    public class MyMovementConstraint implements IConstraint
    {
        public var minX:Number;
        public var minY:Number;
        public var maxX:Number;
        public var maxY:Number;

        private function getRealWidth(geometry:DragGeometry, rNorm:Number):Number {
            return geometry.height * Math.sin(Math.min(rNorm, Math.PI))
                    - geometry.width * Math.cos(Math.max(Math.PI / 2, Math.min(rNorm, 3 * Math.PI / 2)));
        }
       
        private function getRealHeight(geometry:DragGeometry, rNorm:Number):Number {
            return geometry.height * Math.cos(Math.max(Math.PI / 2, Math.min(rNorm, 3 * Math.PI / 2)))
                    + geometry.width * Math.sin(Math.max(Math.PI, Math.min(rNorm,  2 * Math.PI)));
        }
       
        public function applyConstraint( original:DragGeometry, translation:DragGeometry, resizeHandleRole:uint ) : void
        {
            //[-PI;PI]
            var r:Number = (original.rotation) * Math.PI / 180;
            
            //[0;2PI]. Used for minimum-calculations
            var rNorm:Number = (r + 2 * Math.PI) % (2 * Math.PI);
            
            //rotation increased by 180 degrees and normalized. Used for maximum-calculations
            var r180Norm:Number = (rNorm + Math.PI) % (2 * Math.PI);
            
            if(!isNaN(maxX))
            {
                var rOW:Number = getRealWidth(original, r180Norm);
                var rTW:Number = getRealWidth(translation, r180Norm);

                if((original.x + translation.x + (rOW + rTW)) > maxX){
                    if(HandleRoles.isMove(resizeHandleRole)){
                        translation.x = maxX - (original.x + (rOW + rTW));
                    }
                    else if(HandleRoles.isResizeRight(resizeHandleRole))
                    {
                        translation.width = maxX - (original.x + translation.x +
                            original.width);                
                    }
                }
            }
           
            if(!isNaN(maxY))
            {
                var rOH:Number = -getRealHeight(original,r180Norm);
                var rTH:Number = -getRealHeight(translation,r180Norm);

                if((original.y + translation.y + (rOH + rTH)) > maxY)
                {
                    if(HandleRoles.isMove(resizeHandleRole))
                    {
                        translation.y = maxY - (original.y + (rOH + rTH));
                    }
                    else if(HandleRoles.isResizeDown(resizeHandleRole))
                    {
                        translation.height = maxY - (original.y + translation.y +
                            original.height);
                       
                    }
                }
            }
           
            if(!isNaN(minX))
            {
                rOW = getRealWidth(original,rNorm);
                rTW = getRealWidth(translation,rNorm);
                   
                if((original.x + translation.x - (rOW + rTW)) < minX){
                    translation.x = minX - original.x + (rOW + rTW);
                }
                if(HandleRoles.isResizeLeft(resizeHandleRole) && original.x -
                    translation.width < minX)
                {
                    translation.width = - minX + original.x;
                }
            }
           
            if(!isNaN(minY))
            {
                rOH = -getRealHeight(original,rNorm);
                rTH = -getRealHeight(translation,rNorm);
                                       
                if((original.y + translation.y - (rOH + rTH)) < minY)
                {
                    translation.y = minY - original.y + (rOH + rTH);
                }
                if(HandleRoles.isResizeUp(resizeHandleRole) && original.y -
                    translation.height < minY)
                {
                    translation.height = - minY + original.y;
                }
               
            }
        }

    }

Jacob Schatz

unread,
Aug 10, 2011, 1:20:07 PM8/10/11
to object...@googlegroups.com
My eyes are filled with tears of joy.  
This means that the life is complete.
We need to rerelease OH with all of these great contributions.


--
You received this message because you are subscribed to the Google Groups "Flex ObjectHandles" group.
To view this discussion on the web visit https://groups.google.com/d/msg/objecthandles/-/eABxizWOm7MJ.
To post to this group, send email to object...@googlegroups.com.
To unsubscribe from this group, send email to objecthandle...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/objecthandles?hl=en.

Andriy Sokolov

unread,
Aug 10, 2011, 8:12:51 PM8/10/11
to object...@googlegroups.com
The life is only complete, when there are also ResizeConstraint and RotateConstraint, which support a Rotation ;-)

Rodislav Moldovan

unread,
Aug 11, 2011, 3:40:04 AM8/11/11
to object...@googlegroups.com
resize is already present

rotation is not a problem, you can add piece of code which I've provided earlier
which returns rotation angle.

I guess there are all things needed for a full featured "bounding box". Who can make this ? 

.. Marc.. !? 
------------------------------------------------------------------------------------------------
"Love is all around! Enjoy!"
 P Please don't print this e-mail unless you really need to



On Thu, Aug 11, 2011 at 03:12, Andriy Sokolov <sokol...@hotmail.com> wrote:
The life is only complete, when there are also ResizeConstraint and RotateConstraint, which support a Rotation ;-)
--
You received this message because you are subscribed to the Google Groups "Flex ObjectHandles" group.
To view this discussion on the web visit https://groups.google.com/d/msg/objecthandles/-/SJn6q5XolKoJ.
364.gif

Jacob Schatz

unread,
Aug 11, 2011, 5:38:15 AM8/11/11
to object...@googlegroups.com
The problem I have been having with the bounding box is when I try and do a bitmap hittest on two rotated shapes. 
In this screen shot I had as3 draw the bounding box every time I moved the shape with the red bounding box. 
Shouldn't a bounding box always be straight up an down?
These bounding boxes seem to be rotated and not right at all. 
Here is my code that I wrote to draw the bounding boxes and to see if the two boxes bitmapHitTest.  
This code works in Flash without OH, using Sprites instead of UIComponents. 

private function isOverlapping(ui1:UIComponent,ui2:UIComponent):void

{

var ui2Rect:Rectangle = ui2.getBounds(view);

var ui2Offset:Matrix = ui2.transform.matrix;

ui2Offset.tx = ui2.x - ui2Rect.x;

ui2Offset.ty = ui2.y - ui2Rect.y;

var ui2BitmapData:BitmapData = new BitmapData(ui2Rect.width, ui2Rect.height, true, 0);

ui2BitmapData.draw(ui2, ui2Offset);

var ui1Rect:Rectangle = ui1.getBounds(view);

var ui1BitmapData:BitmapData = new BitmapData(ui1Rect.width, ui1Rect.height, true, 0);

ui1.graphics.lineStyle(1,0x00FF00);

ui1.graphics.drawRect(0,0,ui1Rect.width,ui1Rect.height);

ui2.graphics.lineStyle(1,0xFF0000);

ui2.graphics.drawRect(0,0,ui2Rect.width,ui2Rect.height);

var ui1Offset:Matrix = ui1.transform.matrix;

ui1Offset.tx = ui1.x - ui1Rect.x;

ui1Offset.ty = ui1.y - ui1Rect.y;

ui1BitmapData.draw(ui1, ui1Offset);

var ui1Loc:Point = new Point(ui1Rect.x, ui1Rect.y);

var ui2Loc:Point = new Point(ui2Rect.x, ui2Rect.y);

if(ui1BitmapData.hitTest(ui1Loc,255,ui2BitmapData,ui2Loc,255))

{

trace("hit");

ui1.filters = [new GlowFilter()];

}

else

{

ui1.filters = [];

}

ui2BitmapData.dispose();

ui1BitmapData.dispose();

}

364.gif

Jacob Schatz

unread,
Aug 11, 2011, 6:09:21 AM8/11/11
to object...@googlegroups.com
Ok forget what I just said. about drawing the bounding box. But I still can't figure out why bitmapHitTest doesn't work in Flex using OH.  
Here is an example of what I am talking about in Flash without OH. 
Has anyone ever done a bitmaphittest using OH?

import flash.display.Sprite;
import flash.events.Event;

var s:Sprite = new Sprite();
var s2:Sprite = new Sprite();
addChild(s);
s.graphics.lineStyle(1);
s.graphics.beginFill(0xFF0000);
s.graphics.drawCircle(10,10,20);
s.graphics.endFill();
s2.graphics.lineStyle(1);
s2.graphics.beginFill(0x00FF00);
s2.graphics.drawRect(10,10,20,40);
s2.graphics.endFill();
addChild(s2);
s2.x = 200;
s2.y = 200;
addEventListener(Event.ENTER_FRAME,ef);

function ef(e:Event):void
{
s.x = mouseX;
s.y = mouseY;
s2.rotation++;
isOverlapping(s,s2)
}

function isOverlapping(ui1:Sprite,ui2:Sprite):void
{
graphics.clear();
var ui2Rect:Rectangle = ui2.getBounds(this);
var ui2Offset:Matrix = ui2.transform.matrix;

ui2Offset.tx = ui2.x - ui2Rect.x;
ui2Offset.ty = ui2.y - ui2Rect.y;

var ui2BitmapData:BitmapData = new BitmapData(ui2Rect.width,ui2Rect.height,true,0);
ui2BitmapData.draw(ui2, ui2Offset);

var ui1Rect:Rectangle = ui1.getBounds(this);
var ui1BitmapData:BitmapData = new BitmapData(ui1Rect.width,ui1Rect.height,true,0);

graphics.lineStyle(1,0x00FF00);
graphics.drawRect(ui1Rect.x,ui1Rect.y,ui1Rect.width,ui1Rect.height);

graphics.lineStyle(1,0xFF0000);
graphics.drawRect(ui2Rect.x,ui2Rect.y,ui2Rect.width,ui2Rect.height);


var ui1Offset:Matrix = ui1.transform.matrix;
ui1Offset.tx = ui1.x - ui1Rect.x;
ui1Offset.ty = ui1.y - ui1Rect.y;

ui1BitmapData.draw(ui1, ui1Offset);

var ui1Loc:Point = new Point(ui1Rect.x,ui1Rect.y);
var ui2Loc:Point = new Point(ui2Rect.x,ui2Rect.y);

if (ui1BitmapData.hitTest(ui1Loc,255,ui2BitmapData,ui2Loc,255))
{
trace("hit");
ui1.filters = [new GlowFilter()];
}
else
{
ui1.filters = [];
}

ui2BitmapData.dispose();
ui1BitmapData.dispose();
}

364.gif

Andriy Sokolov

unread,
Aug 11, 2011, 8:07:13 AM8/11/11
to object...@googlegroups.com
Are you talking about shapes that are of any form, not rectangular?

Jacob Schatz

unread,
Aug 11, 2011, 8:23:00 AM8/11/11
to object...@googlegroups.com
Correct. I am referring to the bounding box of the UIComponent that holds whatever shape I have.  
The shape itself may not be rectangular but the UIComponent (or Sprite) that contains that shape has a bounding box.  
That bounding box does not seem to be correct when using OH.  I will see if I can put together a sample online to show you guys what I mean. 

On Thu, Aug 11, 2011 at 8:07 AM, Andriy Sokolov <sokol...@hotmail.com> wrote:
Are you talking about shapes that are of any form, not rectangular?

--
You received this message because you are subscribed to the Google Groups "Flex ObjectHandles" group.
To view this discussion on the web visit https://groups.google.com/d/msg/objecthandles/-/3j-YimVx1CsJ.

Andriy Sokolov

unread,
Aug 11, 2011, 8:30:53 AM8/11/11
to object...@googlegroups.com
Rodislav,
unfortunately, resizing of multiple objects is not functioning with the OH, provided by Ruy Diaz. And the Resizing in OH_2.0.0008 of multiple objects does function only for unrotated objects.

So, there is still a lot of work..
The implementation of ResizeConstraints should be implemented similar to the implementation of MovementConstraints provided by me, where the corrections of the x and y of translation must be calculated accordind to the actual rotation angle.

Andriy

Rodislav Moldovan

unread,
Aug 11, 2011, 12:34:58 PM8/11/11
to object...@googlegroups.com
@Andriy, mm.. i'll think about this

------------------------------------------------------------------------------------------------
"Love is all around! Enjoy!"
 P Please don't print this e-mail unless you really need to



--
You received this message because you are subscribed to the Google Groups "Flex ObjectHandles" group.
To view this discussion on the web visit https://groups.google.com/d/msg/objecthandles/-/bq5DVDwTzwUJ.

thuo...@gmail.com

unread,
Aug 22, 2013, 9:12:36 AM8/22/13
to object...@googlegroups.com, rodi...@gmail.com
Rodislav, where to find SizeConstraint with rotation as you said.
Reply all
Reply to author
Forward
0 new messages