How can I implement running highlighting (selection) of multiline text?

Question

There was already a question about filling the text and it was answered.

In short, the essence of the solution is to create a FormattedText from the contents of a hidden TextBlock , and then create a geometry from FormattedText , which is displayed using the Path , which in turn is filled with animation on it.

And everything works fine as long as the text takes one line, but when there are several lines, it turns out not what we would like.

XAML I will not repeat, because it fully coincides with that in the above answer. My code is also not much different, but I will give it for clarity.

 private List<Rect> _RectsForFill; // прямоугольники с каждым символом private double _LengthFillText; // общая ширина рисованного текста //анимация Storyboard _Storyboard; DoubleAnimation _FromAnimation; DoubleAnimation _ToAnimation; private void CreateFillText() { //получаем текстовое содержимое TextBlock tb = this.textBlockHidden; var text = tb.Text; //создаем экземпляр форматированного текста FormattedText formattedText = new FormattedText( text, CultureInfo.GetCultureInfo("en-US"), FlowDirection.LeftToRight, new Typeface( tb.FontFamily, tb.FontStyle, tb.FontWeight, tb.FontStretch), tb.FontSize, Brushes.Black // конкретная кисть нам не важна, мы используем только геометрию ); //берем переносы строк у эталонного текстблока formattedText.MaxTextWidth = this.textBlockHidden.Width; formattedText.MaxTextHeight = this.textBlockHidden.Height; // стащили геометрию у текста... var geo = formattedText.BuildGeometry(new Point()); // ...и отдали её Path'у Target.Data = geo; //вычислим прямоугольники для заполнения GetRectsForFill(text, formattedText); } private void GetRectsForFill(string text, FormattedText formattedText) { var bb = formattedText.BuildHighlightGeometry(new Point()); _LengthFillText = bb.Bounds.Width; // общая ширина //заполняем коллекцию побуквенных боксов _RectsForFill = Enumerable.Range(0, text.Length) .Select(k => formattedText.BuildHighlightGeometry(new Point(), k, 1) .Bounds) .ToList(); //ссылки на анимацию для дальнейшей работы с ней _Storyboard = (Storyboard)Target.Resources["AnimationStoryboard"]; _FromAnimation = (DoubleAnimation)_Storyboard.Children[0]; _ToAnimation = (DoubleAnimation)_Storyboard.Children[1]; }

Here is the method that fills the black text with black.

 /// <summary> /// Закрашивание рисованного текста /// </summary> /// <param name="startPos">начальная позиция слова</param> /// <param name="count">число закрашиваемых букв в слове</param> public void FillTextPath(int startPos, int count) { if (count == 0) throw new ArgumentException(nameof(count)); //вычисляем индекс необходимого прямоугольника int index = startPos + count; if (index >= _RectsForFill.Count) index = _RectsForFill.Count - 1; //необходимый прямоугольник Rect box = _RectsForFill[index]; //закрашиваем _FromAnimation.From = box.Left / _LengthFillText; _FromAnimation.To = box.Right / _LengthFillText; _ToAnimation.From = box.Left / _LengthFillText; _ToAnimation.To = box.Right / _LengthFillText; _Storyboard.Begin(); }

@VladD, very much looking forward :) I already thought to make through creating separate Path for each necessary line, but I haven’t yet decided how to determine when the text in TextBlock got a transfer to another line.

Accepted Answer · 2017-02-26T22:48:02

You went the right way, break into separate Path 's - a good idea.

Let's implement it to the end.

For a start, the playback functionality is already quite complex, so we move it into a separate UserControl . Then, let each control be responsible for one line. In order not to look for pieces by geometry, simply cut this line with Clip 'a. At the entrance to the UserControl we will submit the results of the analysis of the text on the geometry (the Create function).

 <UserControl x:Class="KaraokeText.SingleLine" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Path Name="Target" Stroke="Black" StrokeThickness="0.5"> <Path.Fill> <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"> <GradientStop Color="Black" Offset="0" x:Name="TargetFrom"/> <GradientStop Color="White" Offset="0" x:Name="TargetTo" /> </LinearGradientBrush> </Path.Fill> <Path.Resources> <Storyboard x:Key="AnimationStoryboard"> <DoubleAnimation Duration="00:00:00.25" Storyboard.TargetName="TargetFrom" Storyboard.TargetProperty="Offset"> <DoubleAnimation.EasingFunction> <CubicEase EasingMode="EaseIn"/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="00:00:00.25" Storyboard.TargetName="TargetTo" Storyboard.TargetProperty="Offset"> <DoubleAnimation.EasingFunction> <CubicEase EasingMode="EaseOut"/> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard> </Path.Resources> </Path> </UserControl>

In the code-behind will be an animation:

 public partial class SingleLine : UserControl { List<Rect> boundingBoxes; double extent; public SingleLine() { InitializeComponent(); } public SingleLine(Geometry geo, List<Rect> boundingBoxes, double totalExtent) : this() { Target.Data = geo; extent = totalExtent; Rect clip = boundingBoxes.Aggregate(Rect.Union); Clip = new RectangleGeometry(clip); this.boundingBoxes = boundingBoxes; } public async Task Play() { var storyboard = (Storyboard)Target.Resources["AnimationStoryboard"]; var fromAnimation = (DoubleAnimation)storyboard.Children[0]; var toAnimation = (DoubleAnimation)storyboard.Children[1]; foreach (var b in boundingBoxes) { await Task.Delay(250); // перерыв между буквами fromAnimation.From = b.Left / extent; fromAnimation.To = b.Right / extent; toAnimation.From = b.Left / extent; toAnimation.To = b.Right / extent; storyboard.Begin(); await Task.Delay(250); // дождёмся конца анимации } } }

Why do we need such complexity with Clip and totalExtent ? Unfortunately, I did not find a method to bite out only the necessary part of the geometry. Therefore, we give the entire geometry to the input, and we want to show only the current line. To do this, we calculate the rectangle corresponding to the desired part of the geometry (the current line), and cut off the rest of the display using Clip 'a. But our calculations of the coefficients ( b.Left / extent , etc.) require a percentage of the total width of the Path ', and not the width of the current line! (Let me remind you that our Path receives the geometry of the entire line, including the other lines as well.) Therefore, it is also necessary to transmit the total width.

Now the main code. It has become easier as part of the functionality has separated. In it, we can not put a single, fixed Path , as we have the number of lines is not known in advance. Therefore, the controls will be added dynamically.

The main window looks simple:

 <Window x:Class="KaraokeText.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Тест" Height="350" Width="525"> <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Name="Container"> <TextBlock Name="Source" FontSize="24" Visibility="Hidden" TextWrapping="Wrap" Text="А-а, в Африке реки вот такой ширины &#x000d;А-а, в Африке горы вот такой вышины"/> </Grid> </Window>

And code-behind:

 public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); Loaded += (o, args) => Create(); // вначале запустим Create PreviewKeyDown += (o, args) => Play(); // а по нажатию клавиши - Play } // список контролов, отображающих строки List<SingleLine> lineControls = new List<SingleLine>(); void Create() // https://msdn.microsoft.com/en-us/library/ms745816(v=vs.110).aspx { TextBlock tb = Source; var text = tb.Text; FormattedText formattedText = new FormattedText( text, CultureInfo.GetCultureInfo("en-US"), FlowDirection.LeftToRight, new Typeface( tb.FontFamily, tb.FontStyle, tb.FontWeight, tb.FontStretch), tb.FontSize, Brushes.Black); // установили максимальную ширину, чтобы текст был разбит на части formattedText.MaxTextWidth = Source.ActualWidth; var boundingBoxes = // побуквенная ширина и позиции Enumerable.Range(0, text.Length) .Where(k => !char.IsWhiteSpace(text[k])) .Select(k => formattedText.BuildHighlightGeometry(new Point(), k, 1) .Bounds) .ToList(); // вычисляем охватывающий прямоугольник всех прямоугольников var totalBb = boundingBoxes.Aggregate(Rect.Union); var totalExtent = totalBb.Width; List<List<Rect>> boundingBoxesByLine = new List<List<Rect>>(); List<Rect> currentLine = null; double lastRectBottom = double.NegativeInfinity; foreach (var rect in boundingBoxes) { // проверка на новую строку. если верх текущего прямоугольника там же, // где низ предыдущего прямоугольника, или ещё ниже - новая строка, иначе нет if (rect.Top >= lastRectBottom) { // добавим старую строку в список строк if (currentLine != null) boundingBoxesByLine.Add(currentLine); // новый пустой контейнер прямоугольников для новой строки currentLine = new List<Rect>(); } currentLine.Add(rect); lastRectBottom = rect.Bottom; } if (currentLine != null) // последнюю строку не теряем boundingBoxesByLine.Add(currentLine); // стащили геометрию у текста... var geo = formattedText.BuildGeometry(new Point()); // строим по контролу для каждой строки: foreach (var line in boundingBoxesByLine) { // ... отдавая ему геометрию: var lineControl = new SingleLine(geo, line, totalExtent); Container.Children.Add(lineControl); lineControls.Add(lineControl); } } async void Play() { // проигрываем просто построчно foreach (var line in lineControls) await line.Play(); } }

Everything!

Result:

simple anima named Natasha

Thanks, it is necessary to sleep :) Tomorrow morning I will try to repeat.
For me, the riddle algorithm for splitting lines starting with the line var totalBb = boundingBoxes.Aggregate(Rect.Union);
I understand correctly that you first calculate the total width of the combined rectangles derived from letters?
But after all, whitespace rectangles were thrown higher, so the total width obtained would be less real?
Yes, and in the cycle, the principle of separation according to Top and Bottom is not at all clear to me.
And it is also not clear, we transfer to the SingleLine(geo, line, totalExtent) constructor SingleLine(geo, line, totalExtent) as the total width of the totalExtent , although this is not the width of this particular line, but the total width of all the lines, how so?
Sorry, and here in the SingleLine constructor here is this line Clip = new RectangleGeometry(clip);

How can I implement running highlighting (selection) of multiline text?

1 answer 1

More articles: