在WinForm里绘图

    当我们需要使用Window的窗体进行绘图的时候可能会对绘制图的进行放大或缩小的操作,利用PictureBox控件默认是实现不了这个功能的,但是我们可以通过对一个一般的UserControl操作来达到这个目的,而不一定使用PictureBox,这里,我使用了Form或UserControl的基类ScrollableControl进行了继承并在其上绘图,因为这个控件足够使用了.

    我这里提到了如下的几个绘图的问题:

    1:当我们在Windows里绘图的时候所用的坐标系统和我们在数学里使用的坐标系是不一样的,我们需要对其进行转换以适合我们在数学坐标系里的习惯.

    2:当我们所需的画布大于当前窗口大小的时候需要滚动条的支持.

    3:我们可能随时对所绘的图进行放大或缩小.

    4:我们在绘图的时候不能出现闪动而使使用者感到讨厌,我们需要良好的显示效果,给人以快速的感觉

    5:我们可能需要绘制出数学函数图像.或是给了一堆的要绘图的坐标绘制出图像.

    如果您对上面的问题感兴趣,那么请参考下面的代码示例,如果对示例有问题也请指正以共同提高,谢谢!

定义绘图使用的控件:

 

///   <summary>
///  显示由Graphics绘制的图像
///   </summary>
internal   class  ImageBox : ScrollableControl
{
     private  Color m_ColorCoordinate;
     private  PointF[] m_Points;
     private   float  m_Scale;
     private  SizeF m_ImageSize;
     ///   <summary>
     ///  构造函数
     ///   </summary>
     public  ImageBox()
    {
         this .SetStyle(ControlStyles.AllPaintingInWmPaint  |  ControlStyles.UserPaint  |  ControlStyles.OptimizedDoubleBuffer  |  ControlStyles.ResizeRedraw,  true );
        m_ColorCoordinate  =  Color.Red;
         this .m_Scale  =   1 ;
    }
     ///   <summary>
     ///  画布的大小
     ///   </summary>
     public  SizeF ImageSize
    {
         get
        {
             return  m_ImageSize;
        }
         set
        {
             this .m_ImageSize  =  value;
             this .AutoScrollMinSize  =  Size.Ceiling( new  SizeF( this .m_ImageSize.Width  *   this .m_Scale,  this .m_ImageSize.Height  *   this .m_Scale));
        }
    }
     ///   <summary>
     ///  坐标系的X,Y两轴的颜色
     ///   </summary>
     public  Color ColorCoordinate
    {
         get
        {
             return   this .m_ColorCoordinate;
        }
         set
        {
             this .m_ColorCoordinate  =  value;
             this .Invalidate( this .ClientRectangle,  false );
        }
    }
     ///   <summary>
     ///  重写以进行绘制
     ///   </summary>
     ///   <param name="e"></param>
     protected   override   void  OnPaint(PaintEventArgs e)
    {
         base .OnPaint(e);
         this .drawMathImage(e.Graphics,  this .getStartPoint(),  this .m_Scale);
    }
     ///   <summary>
     ///  得到Sin函数值坐标点
     ///   </summary>
     ///   <returns></returns>
     public   void  DrawSin()
    {
        List < PointF >  list  =   new  List < PointF > ();
         for  ( int  i  =   - 100   *  ( int )Math.PI; i  <   100   *  ( int )Math.PI; i ++ )
        {
             float  x  =  i  /   100.0f ;
             float  y  =  ( float )Math.Sin(( double )x);
            list.Add( new  PointF(x  *   100 , y  *   100 ));
        }
        m_Points  =  list.ToArray();
         this .Invalidate();
    }
     ///   <summary>
     ///  得到抛物线函数值坐标点
     ///   </summary>
     ///   <returns></returns>
     public   void  DrawPow()
    {
        List < PointF >  list  =   new  List < PointF > ();
         for  ( int  i  =   - 100 ; i  <  ( int ) 100 ; i ++ )
        {
             float  x  =  i  /  100f;
             float  y  =  ( float )Math.Pow(( double )x,  2 );
            list.Add( new  PointF(x  *   100 , y  *   100 ));
        }
        m_Points  =  list.ToArray();
         this .Invalidate();
    }
     public   void  ClearFunImage()
    {
         this .m_Points  =   null ;
         this .Invalidate();
    }
     ///   <summary>
     ///  放大图像的倍数
     ///   </summary>
     ///   <param name="scale"></param>
     public   void  ScaleImage( float  scale)
    {
         float  tmp  =  scale;
         if  (tmp  >   0 )
        {
             this .m_Scale  =  tmp;
            SizeF size  =   new  SizeF( this .m_ImageSize.Width  *   this .m_Scale,  this .m_ImageSize.Height  *   this .m_Scale);

             base .AutoScrollMinSize  =  Size.Ceiling(size);
             this .Invalidate();
        }
    }
     ///   <summary>
     ///  由当前的滚动信息得到开始点以用来计算绘图原点信息
     ///   </summary>
     ///   <returns></returns>
     private  PointF getStartPoint()
    {
        SizeF size  =   new  SizeF( this .m_ImageSize.Width  *   this .m_Scale,  this .m_ImageSize.Height  *   this .m_Scale);
        PointF point  =   this .AutoScrollPosition;

         if  (size.Width  >   this .ClientRectangle.Width  &&  size.Height  <   this .ClientRectangle.Height)
        {
            point.Y  +=  ( this .ClientRectangle.Height  -  size.Height)  /   2.0f ;
        }
         else   if  (size.Width  <   this .ClientRectangle.Width  &&  size.Height  >   this .ClientRectangle.Height)
        {
            point.X  +=  ( this .ClientRectangle.Width  -  size.Width)  /   2.0f ;
        }
         else   if  (size.Width  <=   this .ClientRectangle.Width  &&  size.Height  <=   this .ClientRectangle.Height)
        {
            point.Y  +=  ( this .ClientRectangle.Height  -  size.Height)  /   2.0f ;
            point.X  +=  ( this .ClientRectangle.Width  -  size.Width)  /   2.0f ;
        }
         return  point;
    }
     ///   <summary>
     ///  使用指定的Graphics对象进行绘图
     ///   </summary>
     ///   <param name="g"> 用来绘图的Graphics对象 </param>
     ///   <param name="startPoint"> 绘图的时候坐标的偏移量 </param>
     private   void  drawMathImage(Graphics g, PointF start,  float  scale)
    {
         // 建立坐标中点坐标
         float  tmpOX  =   this .AutoScrollMinSize.Width  /   2.0f ;
         float  tmpOY  =   this .AutoScrollMinSize.Height  /   2.0f ;

        GraphicsState state  =  g.Save();
         using  (Matrix matrix  =   new  Matrix( 1 ,  0 ,  0 ,  - 1 ,  0 ,  0 ))
        {
            g.Transform  =  matrix;
            g.PageUnit  =  GraphicsUnit.Pixel;
            g.TranslateTransform(tmpOX  +  start.X,  - tmpOY  -  start.Y, MatrixOrder.Prepend);
            g.ScaleTransform( this .m_Scale,  this .m_Scale, MatrixOrder.Prepend);

             float  maxX  =  tmpOX  /  scale;
             float  maxY  =  tmpOY  /  scale;

             // 绘制坐标轴线
             using  (Pen pen  =   new  Pen( this .m_ColorCoordinate,  1 ))
            {
                g.DrawLine(pen,  - maxX,  0.0f , maxX,  0.0f );
                g.DrawLine(pen,  0.0f ,  - maxY,  0.0f , maxY);

                g.DrawLine(pen, maxX,  0.0f , maxX  -   2.0f ,  2.0f );
                g.DrawLine(pen, maxX,  0.0f , maxX  -   2.0f ,  - 2.0f );

                g.DrawLine(pen,  0.0f , maxY,  2.0f , maxY  -   2.0f );
                g.DrawLine(pen,  0.0f , maxY,  - 2.0f , maxY  -   2.0f );
            }
             // 绘制函数图像
             if  (m_Points  !=   null   &&  m_Points.Length  >   1 )
            {
                g.DrawCurve(SystemPens.ControlText, m_Points);
            }
        }
        g.Restore(state);
    }
     ///   <summary>
     ///  重写以切换Sin,Pow函数图像进行绘图测试
     ///   </summary>
     ///   <param name="e"></param>
     protected   override   void  OnMouseDown(MouseEventArgs e)
    {
         base .OnMouseDown(e);
         if  (e.Button  ==  MouseButtons.Right)
        {
             this .ClearFunImage();
             return ;
        }
         switch  (e.Clicks)
        {
             case   1 :
                 this .DrawSin();
                 break ;
             case   2 :
                 this .DrawPow();
                 break ;
        }
    }
     protected   override   bool  ProcessDialogKey(Keys keyData)
    {
         if  (keyData  ==  Keys.Add)
        {
             this .ScaleImage( this .m_Scale  +   this .m_Scale  *   0.02f );
        }
         else   if  (keyData  ==  Keys.Subtract)
        {
             this .ScaleImage( this .m_Scale  -   this .m_Scale  *   0.02f );
        }
         return   base .ProcessDialogKey(keyData);
    }
}

 

然后我们可以定义一个窗体用来承载这个控件以使控件展现它的行为:

 

public   class  testForm:Form
{
     public  testForm()
    {
         // InitializeComponent();

        ImageBox box  =   new  ImageBox();
        box.Dock  =  DockStyle.Fill;
        box.ImageSize  =   new  Size( 200 ,  150 );
         this .Controls.Add(box);
    }
}

 

到这里我们可以运行testForm来通过点击使ImageBox显示出Sin函数或抛物线的数学图像.我们也可以通过键盘上的"+"及"-"来放大或缩小我们绘制的图,并在适当的时候通过滚动条来滚动显示图像.