Блог

Главная - Вопросы по программированию - Разумный подход для анимированного эффекта сердцебиения / осциллографа в WPF / xaml

Разумный подход для анимированного эффекта сердцебиения / осциллографа в WPF / xaml

#.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 начальной и конечной точек сегмента.

Вы можете повторно использовать данные для получения повторяющегося эффекта или генерировать новые значения и сдвигать их слева.

Таким образом, вы не создаете больше объектов, чем вам нужно.