c# - 如何在C#中逐点绘制形状？

Question

我对如何完成它有基本的想法，但我真的不知道代码。我想在 Visual Studio 中使用 WPF 应用程序。当用户单击“绘制”按钮时，它会在 Canvas 上绘制一个形状(一个螺旋图)(使用多段线)，但不同之处在于，它需要逐点绘制，一次绘制一条线，这样你就可以看到这个“动画”。此外，用户应该能够在 Canvas 上绘制时取消/停止绘图。首先，它需要生成点的列表或数组(我对数组更熟悉)，然后将这些点传递给后台工作人员，后台工作人员将通过在 Canvas 上缓慢绘制形状来“报告其进度”。这是绘制螺旋图的代码，但实际上任何形状都可以。

public void DrawSpiroGraph()
{
    for (inti = 0; i<= numPoints; i++)
    {
        pt = newPoint();
        pt.X = x0 + r * Math.Cos(a);
        pt.Y = y0 + r * Math.Sin(a);
        double rr = 0.5 * r;
        double aa = -0.8 * a;
        Point pnt = newPoint();
        pnt.X = pt.X + rr * Math.Cos(aa);
        pnt.Y = pt.Y + rr * Math.Sin(aa);
        a += 0.5;
        pline.Points.Add(pnt);
    }
}

Answer 1

首先，设置 Canvas :

<Canvas Name="Canvas" MouseLeftButtonUp="Canvas_MouseLeftButtonUp" MouseRightButtonUp="Canvas_MouseRightButtonUp">
  <!-- you can customize your polyline thickness/color/etc here -->
  <Polyline x:Name="Poly" Stroke="Black" StrokeThickness="1" />
</Canvas>

然后您需要对您的应用程序进行多线程处理。 WPF 中的多线程是一件冒险的事情，因为您无法从不同的线程访问任何绘图上下文。幸运的是，BackgroundWorker 类在这里可以让您省去一些麻烦，因为它的 ProgressChanged 事件在同一个线程上运行。因此，当用户点击 Canvas 时:

private BackgroundWorker _animationWorker;

private void Canvas_MouseLeftButtonUp( object sender, MouseButtonEventArgs e ) {
  var p = e.GetPosition( Canvas );
  Poly.Points.Add( p );

  _animationWorker = new BackgroundWorker {
    WorkerReportsProgress = true, 
    WorkerSupportsCancellation = true};
  _animationWorker.ProgressChanged += AnimationWorkerOnProgressChanged;
  _animationWorker.DoWork += AnimationWorkerOnDoWork;
  _animationWorker.RunWorkerAsync( p );
}

现在我们已经设置了后台工作程序，我们在 DoWork 委托(delegate)中完成大部分繁重的工作:

private void AnimationWorkerOnDoWork( object sender, DoWorkEventArgs doWorkEventArgs ) {
  var p = (Point) doWorkEventArgs.Argument;

  const int numPoints = 1000;
  var r = 100;
  var a = 0.0;

  var pc = new PointCollection();
  for( var i = 0; i <= numPoints; i++ ) {
    var pt = new Point();
    pt.X = p.X + r * Math.Cos( a );
    pt.Y = p.Y + r * Math.Sin( a );
    double rr = 0.5 * r;
    double aa = -0.8 * a;
    Point pnt = new Point();
    pnt.X = pt.X + rr * Math.Cos( aa );
    pnt.Y = pt.Y + rr * Math.Sin( aa );
    a += 0.5;
    _animationWorker.ReportProgress( 0, pnt );
    Thread.Sleep( 10 );
    if( _animationWorker.CancellationPending ) break;
  }
}

注意我们是如何使用ReportProgress 方法来传递点数的；这将使我们能够访问正在执行的线程并添加到我们的多段线:

private void AnimationWorkerOnProgressChanged( object sender, ProgressChangedEventArgs progressChangedEventArgs ) {
  var p = (Point) progressChangedEventArgs.UserState;
  Poly.Points.Add( p );
}

现在唯一剩下的就是支持停止动画了。我选择通过右键单击来实现这一点(左键单击绘制，右键单击停止/清除)。当然，您可以将您希望的任何控件附加到此功能。这是鼠标右键处理程序:

private void Canvas_MouseRightButtonUp( object sender, MouseButtonEventArgs e ) {
  if( _animationWorker != null ) _animationWorker.CancelAsync();
  Poly.Points.Clear();  // you may wish to do this elsewhere so the partial animation stays on the screen
}