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

2023年11月1日 242次阅读

目前我正在开发一个生成漫画页面的项目.我遇到的一个问题是我找不到生成单词/语音气球的好方法(参见下面的一个例子).如何在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>

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

关键是找到正确的三角形,这是例程(假设P是说话者头部的中心)：

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

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

点赞