楕円の端に線をバインドする

Question

キャンバス上で、アニメーションを通じてRotateTransformによって楕円が回転しました。一端を楕円上の点に接続した線を追加します。どういうわけか楕円上の点にバインドできますか？

Answer 1

次のように、楕円と線の両方をアニメーション化できます：

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas.Resources>
        <PathGeometry x:Key="lineEndPath">
            <PathFigure StartPoint="25,50">
                <ArcSegment IsLargeArc="True" Point="100,50" Size="25,25" SweepDirection="Clockwise"/>
                <ArcSegment IsLargeArc="True" Point="25,50" Size="25,25" SweepDirection="Clockwise"/>
            </PathFigure>
        </PathGeometry>
    </Canvas.Resources>
    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Duration="0:0:5" From="0" RepeatBehavior="Forever" Storyboard.TargetName="rotTF" Storyboard.TargetProperty="Angle" To="360"/>
                    <PointAnimationUsingPath Duration="0:0:5" PathGeometry="{StaticResource lineEndPath}" RepeatBehavior="Forever" Storyboard.TargetName="lineEndPoint" Storyboard.TargetProperty="Point"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>
    <Ellipse Width="75" Height="50" Canvas.Left="25" Canvas.Top="25" Stroke="Black">
        <Ellipse.RenderTransform>
            <RotateTransform x:Name="rotTF" CenterX="37.5" CenterY="25"/>
        </Ellipse.RenderTransform>
    </Ellipse>
    <Path Stroke="Black" StrokeThickness="1.0">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="0,0">
                    <LineSegment x:Name="lineEndPoint"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
    <Path Data="{StaticResource lineEndPath}" Stroke="Black" StrokeDashArray="2,0,0" StrokeThickness="1.0"/>
</Canvas>

LineSegment PointAnimationUsingPath を使用して、パスを円（点線で表示）に設定します。

Answer 2

問題が何なのかわかりません。正しく整列する別の要素をキャンバスに追加し、両方の要素を回転させる変換をキャンバスに適用できますか？

「これと並んで」と言う方法があるかどうか尋ねている場合は、行では、いいえ、あなたは今のところそれを行うことができません。このような複雑なレイアウトの場合、KaXaml / Blandで試行錯誤するか、Illustratorを使用してレイアウトしてからXAMLにエクスポートできます。

Answer 3

私が正しく理解していると仮定すると、線の終点を変更するには数学を理解する必要があります。申し訳ありませんが、式を知らないのですが、基本的に楕円上の点を見つけて、回転の角度が与えられた位置を見つけ、その情報を使用して線の終点を変更します。

Answer 4

線で2つの要素の端を接続するために、アンカーを使用せずに2つのWPFキャンバス要素を線で接続しますか？。