2013-05-14 3 views
0

캔버스 요소에 좌표계를 만들었습니다. 나는 모든 가치에 대해 빨간 점을 그리고 그것을 오래된 점과 연결한다.WPF 좌표계 업데이트

는 여기를 참조하십시오 : 나는 매 초마다 약 10 값을 받고 있어요 enter image description here

. = 1 개 픽셀

빨간색 선

1 값은 그냥 테스트를 위해 상수 값을 받고 있어요, 값을 나타냅니다.

내 목표는 좌표계의 끝에 도달하면 도면을 업데이트하는 것입니다. 내 그림을 왼쪽으로 밀고 다음 점을 그립니다.

내 목표는 다음과 같습니다

  • 나중에 내가 확대를 원하기 때문에 내 그래프에 포인트를 잃고 밖으로 싶지 않는
  • 나는 가능한 한 덜으로 내 시스템을 느리게 돼요 ...

이 내 코드가 아니라 내가 끝 부분의 그래프를 업데이트 할 수 있습니다 방법을 잘 ....입니다

 static double xOld = 32; 
     static double yOld = 580; 
     static double t = 32; 
     System.Windows.Shapes.Path path; 
     static GeometryGroup lineGroupDrw1 = new GeometryGroup(); 
     .... 


    public void drawPoly(double value) 
    { 

      //increase point position 
      t++; 


      //generate 2 point for the connection 
      Point pOne = new Point(xOld, yOld); 
      Point pTwo = new Point(t, value); 

      //connect old point with new 
      GeometryGroup lineGroup = new GeometryGroup(); 
      LineGeometry connectorGeometry = new LineGeometry(); 
      connectorGeometry.StartPoint = pOne; 
      connectorGeometry.EndPoint = pTwo; 
      lineGroup.Children.Add(connectorGeometry); 
      path = new System.Windows.Shapes.Path(); 
      path.Data = lineGroup; 
      path.StrokeThickness = 1; 
      path.Stroke = path.Fill = Brushes.Red; 


      //fill the static linegroup with a new point 
      lineGroupDrw1.Children.Add(connectorGeometry); 

      if (coordinateSystem.Width > t) 
      { 
       // draw graph 
       coordinateSystem.Children.Add(path); 
      } 
      else 
      { 
       //To do : update drawing 
       updateDrawingEnd(); 
      } 

      //refresh values 
      xOld = t; 
      yOld = value; 

     } 
      .... 

      public void updateDrawingEnd() 
     { 
      path = new System.Windows.Shapes.Path(); 
      path.Data = lineGroupDrw1; 
      path.StrokeThickness = 1; 
      path.Stroke = path.Fill = Brushes.Yellow; 

      coordinateSystem.Children.Add(path); 
      t = 145; 
     } 
+0

전체 코드 및 XAML을 게시하십시오. –

답변

0

UI를 스크롤 뷰어에 넣기 만하면됩니다. 주변을 "이동"하려고하는 것을 잊어 버리십시오.

<Window x:Class="MiscSamples.SignalGraph" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="SignalGraph" Height="300" Width="300"> 
    <ScrollViewer VerticalScrollBarVisibility="Auto" 
        HorizontalScrollBarVisibility="Auto"> 
     <Grid x:Name="coordinateSystem"> 

     </Grid> 
    </ScrollViewer> 
</Window> 

코드 뒤에 (코드에서 가져온 조금 개선)

public partial class SignalGraph : Window 
    { 
     private System.Threading.Timer timer; 
     private Random random = new Random(); 

     public SignalGraph() 
     { 
      InitializeComponent(); 

      timer = new System.Threading.Timer(x => DrawRandomLine(), null, 0, 100); 
     } 

     private void DrawRandomLine() 
     { 
      Dispatcher.BeginInvoke((Action) (() => drawPoly(random.Next(0,100))), null); 
     } 

     static double xOld = 32; 
     static double yOld = 580; 
     static double t = 32; 
     Path path; 
     static GeometryGroup lineGroupDrw1 = new GeometryGroup(); 

     public void drawPoly(double value) 
     { 
      //increase point position 
      t = t+5; 


      //generate 2 point for the connection 
      var pOne = new Point(xOld, yOld); 
      var pTwo = new Point(t, value); 

      //connect old point with new 
      var lineGroup = new GeometryGroup(); 

      var connectorGeometry = new LineGeometry {StartPoint = pOne, EndPoint = pTwo}; 

      lineGroup.Children.Add(connectorGeometry); 
      path = new Path 
         { 
          Data = lineGroup, 
          StrokeThickness = 1, 
          Stroke = Brushes.Red, 
          Fill = Brushes.Red 
         }; 

      //fill the static linegroup with a new point 
      lineGroupDrw1.Children.Add(connectorGeometry); 

      //if (coordinateSystem.ActualWidth > t) 
      //{ 
       // draw graph 
       coordinateSystem.Children.Add(path); 
      //} 
      //else 
      //{ 
      // //To do : update drawing 
      // updateDrawingEnd(); 
      //} 

      //refresh values 
      xOld = t; 
      yOld = value; 

     } 
    } 

결과 :

enter image description here

0
내가 차트를 표시하기 위해 특정 사용자 제어 개발을 고려할 것

차트 데이터 표현을 위해 별도의 클래스를 사용하십시오. 간단한 목록을 사용하거나 더 많은 기능을 제공하는 특정 클래스를 만들 수 있습니다. 이렇게하면 나중에 사용하기 위해 더 이상 표시되지 않는 포인트를 메모리에 유지하는 것과 같은 UI 문제와 별도로 모든 포인트의 기록을 유지할 수 있습니다. 차트 개체를 사용자 정의 컨트롤에 바인딩 할 수 있으며,이 컨트롤에서 특정 논리를 개발하여 확대/축소, 이전 지점 표시 등을 수행 할 수 있습니다.