#.net #wpf #xaml #animation
#.net #wpf #xaml #Анимация
Вопрос:
Я хотел бы иметь анимированный эффект сердцебиения / осциллографа для моего приложения, аналогичный следующему:
Однако я не уверен, какой подход выбрать. Подходы, которые я рассмотрел (но не знаю, с чего начать)::
- Подготовить всю строку в виде пути, но затем закрыть ее непрозрачным прямоугольником, в котором есть окно, чтобы вы могли видеть линию через него.
- Подготовив путь и проведя по нему линию, постепенно перемещая ее.
Обратите внимание, что это эффект, а не фактический осциллограф с привязкой к данным (который, я ожидаю, будет намного сложнее).
Комментарии:
1. Вы бы хотели, чтобы это было реалистично? Потому что эти репрезентативные комплексы довольно нелепы: D PhysioBank имеет большое количество бесплатных ЭКГ в цифровом виде. Вы можете сохранить данные о точках и перерисовать точки в виде траектории со скоростью 25 мм / с (обычная частота ЭКГ). У меня есть средство просмотра ЭКГ, использующее API PhysioBank в WPF, которое делает именно это и довольно хорошо работает на относительно новой машине.
Ответ №1:
Я понимаю, что прошло почти 3 года, но подумал, что передам то, что нашел … http://www.yazgelistir.com/makale/silverlight-ile-bir-ekg-animasyonu
На всякий случай, если страница исчезнет…
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="200"
Background="#FF000000"
x:Name="Page"
>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever" x:Name="Storyboard1">
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.StartPoint)">
<SplinePointKeyFrame KeyTime="00:00:00" Value="-31.5,-28.5"/>
<SplinePointKeyFrame KeyTime="00:00:02" Value="308,-29.5"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)">
<SplinePointKeyFrame KeyTime="00:00:00" Value="-9.5,-28.5"/>
<SplinePointKeyFrame KeyTime="00:00:02" Value="330,-29.5"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)">
<SplinePointKeyFrame KeyTime="00:00:00" Value="-9.5,228.5"/>
<SplinePointKeyFrame KeyTime="00:00:02" Value="330,227.5"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)">
<SplinePointKeyFrame KeyTime="00:00:00" Value="-31.5,228.5"/>
<SplinePointKeyFrame KeyTime="00:00:02" Value="308,227.5"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Canvas x:Name="Layer_1" Width="300" Height="200" Canvas.Left="0" Canvas.Top="0">
<Canvas.Clip>
<PathGeometry>
<PathFigure IsClosed="True" StartPoint="-31.5,-28.5">
<LineSegment Point="-9.5,-28.5"/>
<LineSegment Point="-9.5,228.5"/>
<LineSegment Point="-31.5,228.5"/>
</PathFigure>
</PathGeometry>
</Canvas.Clip>
<Path Width="300.488" Height="194.519" Canvas.Left="-0.594986" Canvas.Top="5.19727" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF23FF00" Data="F1 M 0.405014,137.11L 30.6097,137.11L 42.6763,76.7877L 53.0284,146.736L 59.0672,127.484L 67.733,137.11L 153.962,137.11L 181.568,6.19727L 203.997,198.717L 223.839,65.2365L 241.092,151.87L 248.857,137.11L 298.893,137.11"/>
</Canvas>
</Canvas>
Ответ №2:
С помощью этого руководства функциональность для построения графика ЭКГ доступна для winforms… http://www.codeproject.com/KB/miscctrl/GraphPlotting.aspx
Используйте то же самое для любого элемента управления диаграммой WPF … бесплатный доступен в WPF toolkit … http://dynamicdatadisplay.codeplex.com /
Ответ №3:
Создайте путь, содержащий множество сегментов, либо отрезков, либо сегментов Безье. Используйте столько сегментов, сколько доступно. Затем переместите или анимируйте координату y начальной и конечной точек сегмента.
Вы можете повторно использовать данные для получения повторяющегося эффекта или генерировать новые значения и сдвигать их слева.
Таким образом, вы не создаете больше объектов, чем вам нужно.