WPF 用户控件结合椭圆和箭头

Question

我想创建一个自定义用户控件来表示 2D 地图中的玩家。我有一个椭圆来代表玩家，但我想在椭圆的边界上有一个箭头来指示玩家正在看的地方。

这是我试过的：

<Ellipse Width="17" Height="17" Stroke="Black" Fill="White" HorizontalAlignment="Center" />
    <Path Data="M5,0 0,5 5,10" Fill="White" Stroke="Black" VerticalAlignment="Center" >
        <Path.LayoutTransform>
            <RotateTransform Angle="10"/>
        </Path.LayoutTransform>
    </Path>

结果：

这看起来像我想要的（它没有正确对齐，但这不是重点）。

问题是：

我知道没有箭头的椭圆中心位置
当箭头在右边时，椭圆中心的相对位置会不同 --> 我可以使用正方形控件解决这个问题
我的圈子顶部有一个文本块（水平 + 垂直居中）显示它的id

如何根据看的位置移动箭头？我认为更容易的可能是计算一个角度并旋转整个控件。

我的第一个想法是使用任何矢量绘图软件（例如 illustrator）绘制路径，并获取路径的坐标，然后将它们粘贴到 WPF 中。

然后只需旋转用户控件即可。但是这也会旋转文本，我不希望文本旋转。

我卡在这个问题上了，我希望我的问题描述得足够清楚了。

编辑我的第一次尝试：

<ControlTemplate TargetType="ContentControl">
                        <Grid Width="34" Height="34">
                            <Path x:Name="contour_forme"
                              Stroke="{TemplateBinding BorderBrush}"
                              StrokeThickness="1"
                              Stretch="Uniform"
                              Width="28"
                              Height="22"
                              HorizontalAlignment="Left"
                              Fill="{TemplateBinding Background}"
                              Data="M28.857,53.500 C24.537,53.487 20.477,52.380 16.938,50.443 C16.938,50.443 16.938,50.500 16.938,50.500 C16.938,50.500 16.785,50.350 16.785,50.350 C12.845,48.157 9.579,44.924 7.317,41.032 C7.317,41.032 -6.176,27.755 -6.176,27.755 C-6.176,27.755 8.206,14.530 8.206,14.530 C10.380,11.316 13.289,8.649 16.681,6.736 C16.681,6.736 16.938,6.500 16.938,6.500 C16.938,6.500 16.938,6.581 16.938,6.581 C20.525,4.615 24.641,3.496 29.021,3.509 C42.835,3.551 53.996,14.775 53.951,28.580 C53.906,42.385 42.670,53.542 28.857,53.500 ZM29.004,8.507 C17.953,8.474 8.965,17.400 8.929,28.443 C8.893,39.487 17.822,48.467 28.873,48.500 C39.924,48.533 48.912,39.608 48.948,28.564 C48.985,17.520 40.056,8.540 29.004,8.507 Z"
                              >
                                <Path.LayoutTransform>
                                    <RotateTransform Angle="0" />
                                </Path.LayoutTransform>
                            </Path>
                            <TextBlock Style="{DynamicResource StyleTextes}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"
                                       Text="5"
                                       />
                        </Grid>
                    </ControlTemplate>

结果：如您所见，我没有设法将文本居中放置在 22px 的圆圈内。我的箭头高度约为 6 px，因此我创建了一个 22（预期圆圈大小）+ 2 * 6px 的控件，具体取决于箭头位置。

但是当我尝试旋转路径时：

<Path.LayoutTransform>         <RotateTransform Angle="90" />
                            </Path.LayoutTransform>

我得到以下结果：

我不确定在旋转路径时如何将路径的圆圈保持在控件的中心。

Answer 1

只需将 RotateTransform 应用于 "image" 而不是文本。
此外，我会使用渲染变换而不是布局变换。

    <Canvas Canvas.Left="206.333" Canvas.Top="119" Height="80" Width="80">
    <Path Data="M244,99.333333 L210.16667,109.50034 244.83334,125.50034" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black"  RenderTransformOrigin="0.5,0.5" Height="60" Canvas.Left="3" Canvas.Top="5" Width="60">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="70"/>
                <TranslateTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" Height="20" Width="80" Canvas.Top="30" TextAlignment="Center"/>
    </Canvas>

WPF 用户控件结合椭圆和箭头

WPF usercontrol combine ellipse and arrow

wpf

rotatetransform

custom-controls