[英]How to rotate an ArcSegment around ellipse center
首先确保两个形状使用相同的坐标系。 您可以在公共的Canvas父级PathGeometry
两者绘制为Path
,一个绘制为EllipseGeometry
,另一个绘制为PathGeometry
。 画布的左上角定义坐标原点。
<Canvas Margin="100">
<Path Stroke="Black">
<Path.Data>
<EllipseGeometry RadiusX="50" RadiusY="50"/>
</Path.Data>
</Path>
<Path Stroke="LightBlue" StrokeThickness="5">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,-50">
<ArcSegment Point="42.5,-26.2" Size="50,50"
IsLargeArc="False" SweepDirection="Clockwise"/>
</PathFigure>
<PathGeometry.Transform>
<RotateTransform Angle="15"/>
</PathGeometry.Transform>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
现在,根据需要调整ArcSegment的Point
和RotateTransform的Angle
。
更新:您可以添加一个不断旋转弧段的动画,如下所示:
<Path Stroke="LightBlue" StrokeThickness="5">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,-50">
<ArcSegment Point="42.5,-26.2" Size="50,50"
IsLargeArc="False" SweepDirection="Clockwise"/>
</PathFigure>
<PathGeometry.Transform>
<RotateTransform x:Name="transform"/>
</PathGeometry.Transform>
</PathGeometry>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="transform"
Storyboard.TargetProperty="Angle"
To="360" Duration="0:0:2" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
或未明确命名RotateTransform:
<Path Stroke="LightBlue" StrokeThickness="5">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,-50">
<ArcSegment Point="42.5,-26.2" Size="50,50"
IsLargeArc="False" SweepDirection="Clockwise"/>
</PathFigure>
<PathGeometry.Transform>
<RotateTransform/>
</PathGeometry.Transform>
</PathGeometry>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Data.Transform.Angle"
To="360" Duration="0:0:2" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.