如何设计自定义单词/语音气球？

Question

目前我正在开发一个生成漫画页面的项目。我遇到的一个问题是我找不到生成单词/语音气球的好方法（参见下面的一个例子）。如何在C＃-XAML中设计这样的单词/语音气球（例如椭圆形）？特别是，我想在UI上设计它，以便我可以控制箭头指向的位置和指向的位置（可能只需在UI上拖动）。

我知道如何通过手动设置形状路径来生成一个静态/固定版本，如建议here。例如，我们可以使用以下代码生成类似下图的内容。但是，当通过手动设置路径生成箭头所指向的不同位置时，生成多个这些位置将会变得乏味。

<Grid HorizontalAlignment="Center" VerticalAlignment="center">
   <Path
      Width="100"
      Data="M 100,119 C 102,109 107,101 120,100 L 220,100 
            C 231,101 241,110 240,120 L 241,159 C 241,170 230,180 220,180 
            L 120,180 C 111,180 100,171 100,160 L 100.5,139.5 L 70,120 Z"
      Fill="#4F81BD"
      Stretch="uniform"
      Stroke="#385D8A"
      StrokeThickness="3"/>
   <TextBlock
      MaxWidth="280"
      Margin="30,15,10,10"
      Text="bla bla bla..."
      TextWrapping="Wrap"/>
</Grid>

Answer 1

通过组合绘制椭圆和三角形，我找到了一种解决方法，如下图中的红色部分所示。进一步用相同的背景填充它们，它应该在视觉上与问题中的单词气球具有相同的效果。

关键是要找到正确的三角形，这里是常规（假设P是说话者头部的中心）：

1. 将椭圆的中心（O）移动两端，得到两个点Q1, Q2。
2. 获取线PQ1, PO, PQ2与椭圆的交点，将其表示为P1, P2, P3。这是主要步骤，可以根据发布的解决方案here来解决。
3. 获取线段PP3的中心点，将其表示为Q。
4. 获取三角形QP1P2。

为了进一步使其在UI上可编辑，我们可以将所有这些所需的点数据绑定到可以实时计算的值。