c# - WPF坐标系更新

Question

我在画布元素上创建了一个坐标系。我为每一个得到的价值画一个红点，并将它与旧的连接起来。

看这里：

我每秒得到大约 10 个值。

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

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;

        }
    }

结果：

Answer 2

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