Monday, February 13, 2012

Transform Tool - graphic shapes

Hello! 
See simple example how to add graphic elements as target of transformation for tool.
Press view source context menu to get source code. 

SWC: Transform Tool 2 version 2.5.0.
Source code: Project home page.
ASDoc:  API ASDoc.
Required Flex SDK version: SDK 4.5
Опубліковано о

20 comments:

  1. Farhan AhmedFebruary 14, 2012 at 4:51 AM

    Hi Volodymyr, you have developed excellent transformation tool.
    What I need to know that is there any way to apply transform constraints? I mean is it possible to restrict the transformation only to position, or scale or rotation?

    Thanks & Regards,
    Farhan.

    ReplyDelete
    Replies
    1. UnknownFebruary 14, 2012 at 6:39 AM

      you need tool that will for example only move objects but not resize and rotate, correct?

      Delete
    2. Farhan AhmedFebruary 14, 2012 at 6:41 AM

      correct!!!

      Delete
    3. UnknownFebruary 14, 2012 at 6:47 AM

      You need to create your custom skin. Best way would be to copy existing one from tool source code http://transform-tool.googlecode.com/svn/trunk/TransformTool/src/com/vstyran/transform/skins/TransformToolSkin.mxml and remove controls that you don't wont to see.

      Delete
    4. Farhan AhmedFebruary 14, 2012 at 6:53 AM

      Thanks a lot. I really appreciate your quick response :)

      Delete
    5. UnknownMay 7, 2013 at 1:23 AM

      Sir please tell me how you have implemented custom skin?

      Delete
  2. SjFebruary 14, 2012 at 4:55 AM

    Hi Volodymyr,
    Please help me with this. thing is i am adding these shapes like in whiteboard using

    mc = new UIComponent();
    mc.graphics.lineStyle(2*5, 0x000000);
    mc.x = top_x;
    mc.y = top_y;
    designCanvas.addChild(mc);
    mc.graphics.beginFill(0xdcdcd7)
    mc.graphics.drawEllipse(0,0,mc.mouseX,mc.mouseY;
    mc.graphics.endFill();

    and then adding tranform tool to resize and rotate them. it works fine when draw the shape on canvas starting top left to down right. tranform tool wraps it up but donot wraps other way. below in complete code. just give me any hint or some thing how to over come it. thanks, how can i post the code?

    ReplyDelete
    Replies
    1. UnknownFebruary 14, 2012 at 6:38 AM

      I'm not sure that I understand the problem, please send me details on email vstyran@gmail.com

      Delete
  3. SjFebruary 14, 2012 at 6:38 AM

    Thanks Volodymyr, i figure that out myself..

    ReplyDelete
    Replies
    1. UnknownFebruary 14, 2012 at 6:44 AM

      make sure that you draw in positive coordinates, tool takes care only about x,y,width... of traget.

      Delete
    2. Malik Zeshan AshrafFebruary 23, 2012 at 12:33 AM

      This comment has been removed by the author.

      Delete
  4. Malik Zeshan AshrafFebruary 23, 2012 at 12:35 AM

    This comment has been removed by the author.

    ReplyDelete
  5. Malik Zeshan AshrafFebruary 23, 2012 at 12:37 AM

    First of all, Thank you for providing such a wonderful library for transformation and rotation issues.
    I am bothering you for a problem I am facing; please help.

    I am drawing graphics (ellipse, rectangle, line). I am using Flex sdk 4.5
    I used the following code to draw ellipse/rect/line

    var circleHolder:UIComponent = new UIComponent ();
    circleHolder.graphics.lineStyle(1, 0x000000);
    circleHolder.graphics.beginFill(0xffffff);
    circleHolder.graphics.drawEllipse(0,0, objectHeight, objectHeight);

    Similar for line and rectangle.

    Now I am trying to add UITransformTool to this component. For that I did:

    var transform:UITransformTool = new UITransformTool();
    addElement(transform);
    transform.target = circleHolder;

    Successfully added the transformation tool to the graphic. Rotation is working perfect. But scaling is not working.
    When I try increase or decrease the size of graphic, transformationTool grows bigger or shrinks smaller but no effect on the graphics.

    ReplyDelete
    Replies
    1. UnknownFebruary 23, 2012 at 9:54 AM

      There are two types of resizing: scaling (using UIScaleConnector) or changing width and height properties (your case, using UIConnector). You need to create custom component extending UIComponent and draw grapchics in function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number)
      that will update grapchics when size is changed.

      Delete
  6. Malik Zeshan AshrafFebruary 24, 2012 at 7:06 AM

    thnx buddy
    you did great work...
    can you pls tell me did you handle shift and ctrl keys working?

    ReplyDelete
    Replies
    1. UnknownFebruary 24, 2012 at 8:06 AM

      Yep, in tool skin you have corresponding states and you can specify special action when shift or ctrl is pressed, see my post about skinning at http://vstyran-flex.blogspot.com/2012/02/transform-tool-skinning.html

      Delete
    2. UnknownMay 7, 2013 at 1:27 AM

      Sir I have made a dynamic ellipse by clicking on a button.Now I want to use UITransform tool for resizing of ellipse.How should I do it?Tell me with proper code.

      Delete
  7. UnknownJuly 9, 2012 at 2:04 AM

    how to use transform tool on dynamically adding shapes

    ReplyDelete
  8. UnknownJuly 9, 2012 at 2:06 AM

    am using
    var transform:UITransformTool = new UITransformTool();
    addElement(transform);
    transform.target = circleHolder;
    but tranfor m tool coordinates not in match with grahics coordinate

    ReplyDelete
  9. bachkhoaMarch 4, 2013 at 2:58 AM

    Hi Volodymyr, i use your's transform component. i place UITransformTool into BorderContainer spark have width,height small (20px,20px) then i zoom BorderContainer multi 30 times. after i add smaill Image to BorderContainer. but when i select image to transform but icon very large, You can help me to solve this problem?

    ReplyDelete

Subscribe to: Post Comments (Atom)