Rotation of a line based on fixed point in flex4

As in the figure i have three lin开发者_StackOverflow中文版es out of which line1 and line2 are fixed. line3 is derived from line1 based on some angle say 70.I try to rotate the line3 but it deviate from the point x1 and x2. I try the code like this

<s:Line xFrom="200" xTo="600" yFrom="310" yTo="310"/>

<s:Line xFrom="200" xTo="600" yFrom="310" yTo="310" rotation="70"/>

My doubts are

 - how to rotate line3 based on the point x1 and x2.  
 - how to find out the intersection point(x2,y2) of line2 and line3.

thanks in advance

I believe this is what you're looking for:

<s:Group x="200" y="310">
    <s:Line width="300">
        <s:stroke><s:SolidColorStroke color="red"/></s:stroke>
    </s:Line>

    <s:Line width="300" rotation="-70">
        <s:stroke><s:SolidColorStroke color="blue"/></s:stroke>
    </s:Line>
</s:Group>

The important you have to remember when rotating is the center of rotation, and that's top-left in this case (as J_A_X pointed out). So we just wrapped it in a Group at your x1,y1 position.

Now, I don't believe using it this way is exactly what you need, as you also asked for the intersection between line2 and line3. This calls for some math, and we can use math too to actually rotate the lines accordingly.

I will assume that line1 and line2 are horizontal, like in your drawing.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"

               initialize="computeStuff(70)">


    <s:Line id="line1" xFrom="200" yFrom="310" xTo="400" yTo="310"><s:stroke><s:SolidColorStroke color="red"/></s:stroke></s:Line>
    <s:Line id="line2" xFrom="200" yFrom="210" xTo="400" yTo="210"><s:stroke><s:SolidColorStroke color="green"/></s:stroke></s:Line>
    <s:Line id="line3" xFrom="200" yFrom="310"><s:stroke><s:SolidColorStroke color="blue"/></s:stroke></s:Line>
    <s:Rect id="intersection" width="5" height="5"><s:fill><s:SolidColor color="red"/></s:fill></s:Rect>
    <s:HSlider id="slider" minimum="-90" maximum="90" value="70" change="computeStuff(slider.value)"/>

    <fx:Script>
        <![CDATA[
            private function computeStuff(angle:Number):void {
                var u:Number = angle/180 * Math.PI;

                var len:Number = 300;
                line3.xTo = line3.xFrom + len * Math.cos(u);
                line3.yTo = line3.yFrom - len * Math.sin(u);

                // intersection:
                var d:Number = -(line3.yTo - line3.yFrom) / (line3.xTo - line3.xFrom);
                intersection.x = line2.xFrom + (line3.yFrom - line2.yFrom) / d; 
                intersection.y = line2.yFrom;
            }
        ]]>
    </fx:Script>

</s:Application>

I don't think rotation will work when you specify absolute line position. Have you tried doing something like this:

<s:Line x="200" y="310" width="400"/> 
<s:Line x="200" y="310" width="400" rotation="70"/> 

By default, flex should use the top-left of the component as a rotation point. If the code above doesn't work, try to wrap it in a Group:

<s:Group rotation="70">
    <s:Line x="200" y="310" width="400"/> 
</s:Group>