使用C#中的GDI+功能实现图片填充验证方式

  CSDN网站中的找回密码功能中，需要用户滑动图片补全图片中的不完整部分，通过这种方式来进行验证，只有通过验证才能进行下一步操作。

  使用C#的GDI+功能也可以实现类似的功能。要实现该功能需要完成几下几方面的工作：
  1）创建待填充区域
  这个区域一般是不规则区域，上图中的区域类似于哑铃。创建不规则填充区域可以使用GraphicsPath类，该类可以将多类图形组合在一起，示例代码中实现的是一个长方形，外加左右两边一边一个半圆，直接用线条和弧线拼起来的，代码如下：

        private const int RECT_WIDTH = 50;
        private const int RECT_HEIGHT = 30;
        private const int ARC_RADIUS = 5;

        private void InitGraphicsPath()
        {
            m_clipRegion.AddLine(ARC_RADIUS, 0, ARC_RADIUS + RECT_WIDTH, 0);
            m_clipRegion.AddLine(ARC_RADIUS + RECT_WIDTH, 0, ARC_RADIUS + RECT_WIDTH, RECT_HEIGHT / 2 - ARC_RADIUS);                      
            m_clipRegion.AddArc(RECT_WIDTH, 10, ARC_RADIUS * 2, ARC_RADIUS * 2, -90, 90);           
            m_clipRegion.AddLine(ARC_RADIUS + RECT_WIDTH, RECT_HEIGHT / 2 + ARC_RADIUS, ARC_RADIUS + RECT_WIDTH, RECT_HEIGHT);
            m_clipRegion.AddLine(ARC_RADIUS + RECT_WIDTH, RECT_HEIGHT, ARC_RADIUS, RECT_HEIGHT);
            m_clipRegion.AddLine(ARC_RADIUS, RECT_HEIGHT, ARC_RADIUS, RECT_HEIGHT / 2 + ARC_RADIUS);
            m_clipRegion.AddArc(0, 10, ARC_RADIUS * 2, ARC_RADIUS * 2, 90, 270);            
            m_clipRegion.AddLine(ARC_RADIUS, RECT_HEIGHT / 2 - ARC_RADIUS, ARC_RADIUS, 0);
        }

  2）在图片中绘制待填充区域
  这个可以调用Graphics的FillPath函数来实现，示例程序中填充区域的位置在Y方向是固定的，X方向随机生成。
  3）获取填充区域的图形
  一般将填充区域的图形放在图形左侧，然后移动图形下方的滑块来进行图形填充。由于填充区域是不规则形状，将填充区域的图形扣出来可以采用以下两种方式：
  a）使用Bitmap类型的Clone方法获取指定区域的图形，该函数的原型为：

public Bitmap Clone(Rectangle rect, PixelFormat format);

  矩形即包含不规则区域的最小矩形。使用该函数返回的是一个矩形区域，还需要创建一个同样尺寸的空白图片，然后设置该图片的剪切区域，最后再把Clone函数返回的图形绘制到空白图形中。
  b）创建一个空白图片，设置图片的剪切区域，然后直接调用Graphics中的DrawImage将原图中的填充区域图形绘制到空白图形中，代码如下：

using (Graphics g = Graphics.FromImage(m_cuttedImage))
{
    g.Clip = new System.Drawing.Region(m_unfilledRegion.ClipRegion);
    g.DrawImage(UserValidationOfFillingImage.Properties.Resources.hehua,
         0, 0, new Rectangle(m_unfilledRegionStartX, UNFILLED_RERION_START_Y, m_cuttedImage.Width, m_cuttedImage.Height), GraphicsUnit.Pixel);
}

  上述三个方面的功能实现后，剩余的就是实现鼠标拖动滑块进行图片填充验证，如果将填充区域的图形移动到了图片的填充区域，则验证成功，否则验证失败。示例程序的截图如下：

示例代码地址：https://github.com/guochao2299/UserValidationOfFillingImage