flex4中基于固定点的线的旋转

Question

如图所示，我有三行，其中 line1 和 line2 已修复。 line3 是从 line1 基于某个角度（例如 70）派生的。我尝试旋转 line3，但它偏离了点 x1 和 x2。 我尝试这样的代码

我的疑问

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

提前致谢

Answer 1

我相信这就是您正在寻找的：

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

Answer 2

我认为当您指定绝对线位置时旋转不起作用。您是否尝试过这样做：

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

默认情况下，flex 应使用组件的左上角作为旋转点。如果上面的代码不起作用，请尝试将其包装在一个 Group 中：

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