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

  CSDN网站中的找回密码功能中,需要用户滑动图片补全图片中的不完整部分,通过这种方式来进行验证,只有通过验证才能进行下一步操作。
使用C#中的GDI+功能实现图片填充验证方式_第1张图片
  使用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);
}

  上述三个方面的功能实现后,剩余的就是实现鼠标拖动滑块进行图片填充验证,如果将填充区域的图形移动到了图片的填充区域,则验证成功,否则验证失败。示例程序的截图如下:
使用C#中的GDI+功能实现图片填充验证方式_第2张图片
使用C#中的GDI+功能实现图片填充验证方式_第3张图片

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

你可能感兴趣的:(C#编程)