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

Question

我有基本的想法,如何做到但我不知道代码.我想在Visual Studio中使用WPF应用程序.当用户点击"绘图"按钮时,它会在画布上绘制一个形状(一个螺旋形图)(使用折线),但扭曲是,它需要逐点绘制,一次一行,所以你将看到这个"动画".此外,用户应该能够在画布上绘制时取消/停止绘图.首先,它需要生成一个列表或点数组(我对数组更熟悉),然后将这些点传递给后台工作者,后者将通过在画布上缓慢绘制形状来"报告其进度".这是绘制螺旋形图的代码,但任何形状都可以.

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 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事件在同一个线程上运行.因此,当用户点击画布时:

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委托中完成了大部分繁重工作:

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
}