Question

我在画布元素上创建了一个坐标系。我为每个得到的值绘制一个红点并将其与旧值相连。

见这里： enter image description here

我每秒都会得到大约10个值。

1 value = 1 Pixel

红线表示值，我只是为测试得到一个恒定值。

我的目标是在图形到达坐标系末尾时更新图形。我想把我的绘图向左推，然后绘制下一个点。

我的目标是：

我不想丢失图表中的点数，因为后来我想放大和缩小
我不想尽可能减慢我的系统速度......

这是我的代码，但不确定如何在结尾部分更新图表....

        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;
        }

Answer 1

只需将您的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

Answer 2

我会考虑开发一个特定的用户控件来显示图表，并为图表数据表示使用单独的类。您可以使用简单的List或创建提供更多功能的特定类。这样，您可以将所有点的记录与UI关注点分开（例如如何在内存中保留不再显示以供进一步使用的点）。您可以将图表对象绑定到用户控件，并在此控件中开发特定逻辑来处理缩放，显示以前的点等等...

WPF坐标系统更新

2 个答案: