Поворот линии на основе фиксированной точки в flex4 - PullRequest
Новая
       0

Поворот линии на основе фиксированной точки в flex4

3 голосов
/ 27 сентября 2011

enter image description here

Как на рисунке, у меня есть три строки, из которых line1 и line2 фиксированы. line3 получено из line1 на основе некоторого угла, скажем, 70. Я пытаюсь повернуть линию3, но она отклоняется от точки x1 и x2. Я пытаюсь код, как это
<s:Line xFrom="200" xTo="600" yFrom="310" yTo="310"/>
<s:Line xFrom="200" xTo="600" yFrom="310" yTo="310" rotation="70"/>

Мои сомнения 

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

заранее спасибо

Ответы [ 2 ]

2 голосов
/ 10 октября 2011

Я считаю, что это то, что вы ищете: 

<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>

Важным, что вы должны помнить при вращении, является центр вращения, и в данном случае это верхний левый угол (как указал J_A_X). Поэтому мы просто обернули его в группу в вашей позиции x1, y1.

Теперь я не верю, что использовать его таким способом - именно то, что вам нужно, так как вы также просили пересечение между line2 и line3. Это требует некоторой математики, и мы также можем использовать математику, чтобы действительно вращать линии соответственно.

Я предполагаю, что line1 и line2 горизонтальны, как на вашем рисунке. 

<?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>
0 голосов
/ 27 сентября 2011

Я не думаю, что вращение сработает, если вы укажете абсолютную позицию линии.Вы пытались сделать что-то вроде этого: 

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

По умолчанию flex должен использовать верхний левый угол компонента в качестве точки вращения.Если приведенный выше код не работает, попробуйте объединить его в группу: 

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