I have 2 shapes: one ellipse and one circle.I want to rotate circle around ellipse's center.
<Path Stroke="Indigo" StrokeThickness="3" RenderTransformOrigin="0.5,0.5"
Data="M 50 50 A 50 50 0 0 0 42.5 26.2">
<Path.RenderTransform>
<RotateTransform Angle="270"/>
</Path.RenderTransform>
</Path>
<Ellipse Stroke="Black" Width="50" Height="50"/>
Here is what I want
First make sure that both shapes use the same coordinate system. You could draw both as a Path
, one with an EllipseGeometry
, the other with a PathGeometry
, in a common Canvas parent. The upper left corner of the Canvas defines the coordinate origin.
<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>
Now adjust the ArcSegment's Point
and the RotateTransform's Angle
according to your needs.
Update: you could add an animation that constantly rotates the arc segment like this:
<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>
Or without explictly naming the 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.