由于項目的需要，需要在項目的WinForm系統(tǒng)的一個模塊中集成手寫簽名的功能，一開始對這塊不是很了解，只是了解他能夠替代鼠標(biāo)進行簽名。既然是簽名，一般就是需要記錄手稿圖片，作為一個記錄核實的憑證，因為有效的簽名是很難模擬的。市場上也存在很多類型的電子簽名筆，一時間還真不知道那種適合。

WinForm應(yīng)用的界面開發(fā)有個很好用的界面控件推薦——DevExpress WinForm，擁有180+組件和UI庫，能為Windows Forms平臺創(chuàng)建具有影響力的業(yè)務(wù)解決方案，點擊下方按鈕鏈接可直接獲取產(chǎn)品體驗！

1. 電子手寫簽名介紹

電子手寫簽名，其實就是模擬真實的筆進行簽名的過程，我這里主要是介紹使用外部設(shè)備來記錄手稿圖片的需求，這樣其實就是類似于把我們真實在紙張上的簽名內(nèi)容，放到了電腦記錄面板上進行操作了，而這個操作模擬，其實就是利用了類似鼠標(biāo)功能的接觸筆來實現(xiàn)的。

有些筆是在紙上或者電腦屏幕上進行模擬簽名，通過一個接收器方式接受筆的接觸信號，一般要先設(shè)定紙張或者屏幕的范圍，然后進行簽名書寫。

由于簽名筆淘寶上也有很多，開始淘到的就是類似這種，不過效果不理想，好像總是定位不準，而且和鼠標(biāo)發(fā)生嚴重沖突，基本上操作不了，商家客服說很少有這種現(xiàn)象發(fā)生，但是卻發(fā)生在我身上，于是只有退貨。然后淘到的是一款漢王手寫板筆，開始用的還可以，其實就是代替了鼠標(biāo)進行操作，試過可以后，就擱置起來。

一直用鼠標(biāo)模擬簽名進行開發(fā)，寫該篇隨筆的時候，本來想用來展示下效果，可惜又用不了，不知道什么原因。

做簽名功能開發(fā)的時候，其實我是不關(guān)注手寫筆功能的，因為我想其實如果鼠標(biāo)能操作就可以，手寫筆其實也就應(yīng)該可以操作。因此只需要在輸入的地方記錄鼠標(biāo)操作的痕跡，類似手寫簽名的效果即可，大概如下所示。

2. 手寫簽名的實現(xiàn)

從上圖可以看到，只需要提供一個類似繪圖的面板即可記錄鼠標(biāo)的軌跡，也就是功能有點類似Windows自帶的白板（或者繪圖板）軟件即可。

其實要模擬鼠標(biāo)簽名的效果，只需要利用功能強大的GraphicsPath對象就差不多了，剩下的就是記錄點和繪制點，設(shè)置繪圖筆的寬度和顏色等方面。下面我們看看具體的實現(xiàn)代碼吧。

首先要申明幾個必要的對象，來承載相關(guān)的信息。

//記錄直線或者曲線的對象
private System.Drawing.Drawing2D.GraphicsPath mousePath = new System.Drawing.Drawing2D.GraphicsPath();
//畫筆透明度
private int myAlpha = 100;
//畫筆顏色對象
private Color myUserColor = new Color();
//畫筆寬度
private int myPenWidth = 3;
//簽名的圖片對象
public Bitmap SavedBitmap;

從上圖效果圖上，我們看到，我們在其中放置了一個繪圖面板，其實就是一個PictureBox對象而已，我們只需要在PictureBox對象，記錄鼠標(biāo)的移動、鼠標(biāo)按下，以及對象刷新操作事件即可實現(xiàn)模擬簽名的效果了，如下代碼所示。

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
try
{
mousePath.AddLine(e.X, e.Y, e.X, e.Y);
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}
pictureBox1.Invalidate();
}

private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
mousePath.StartFigure();
}
}

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
try
{
myUserColor = System.Drawing.Color.Blue;
myAlpha = 255;
Pen CurrentPen = new Pen(Color.FromArgb(myAlpha, myUserColor), myPenWidth);
e.Graphics.DrawPath(CurrentPen, mousePath);
}
catch { }
}

保存及清空操作，其實很簡單，清空的時候，記得把繪圖面板清空，并重置路徑對象即可。保存也是記錄PictureBox對象的大小寬度，把圖片存儲到圖片對象里面，供控件使用。

具體實現(xiàn)如下所示。

private void btnClear_Click(object sender, EventArgs e)
{
pictureBox1.CreateGraphics().Clear(Color.White);
mousePath.Reset();
}

private void btnSave_Click(object sender, EventArgs e)
{
SavedBitmap = new Bitmap(pictureBox1.Width, pictureBox1.Height);
pictureBox1.DrawToBitmap(SavedBitmap, new Rectangle(0, 0, pictureBox1.Width, pictureBox1.Height));
this.DialogResult = System.Windows.Forms.DialogResult.OK;
}

上面實現(xiàn)還不能完成一個最終的簽名效果，有時候，我們需要把這些圖片放到數(shù)據(jù)庫里面，如果是把上面的操作的圖片記錄下來，發(fā)現(xiàn)很大，一般我們簽名的效果顯示，不會很大，一方面只需要辨認其筆跡即可，另外一方面也不會過于增大數(shù)據(jù)庫的存儲空間。那么我們就需要對圖片大小進行一定的處理了。其實可能在詳細信息里面，我們就這樣記錄顯示即可。那么就一定要裁剪圖片的大小。

以上的醫(yī)生簽名，我們觸發(fā)的操作就是彈出一個簽名窗體，在其中繪制簽名，確認后返回，并把圖片進行顯示在詳細信息窗體里面。

private void btnDoctorSign_Click(object sender, EventArgs e)
{
FrmSignicture dlg = new FrmSignicture();
if (dlg.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
this.picDoctor.Image = dlg.SavedBitmap;
}
}

為了安裝最終顯示的PictureBox的大小保存圖片，我們需要裁減，裁減就是重新根據(jù)圖片大小進行保存Bitmap對象，這種可以從全屏最初的幾M縮小到十幾K，方便存儲。

至于圖片對象存儲到數(shù)據(jù)庫，這個由于利用了我Winform開發(fā)框架里面的數(shù)據(jù)庫基礎(chǔ)對象，基本上不需要特別對待及處理，只需要把圖片字段的Byte數(shù)組獲得即可了。這里就不在贅述Winform開發(fā)框架的功能及相關(guān)的基類處理了。

public Bitmap SaveImage(PictureBox pictureBox1)
{
Bitmap SavedBitmap = new Bitmap(pictureBox1.Width, pictureBox1.Height);
pictureBox1.DrawToBitmap(SavedBitmap, new Rectangle(0, 0, pictureBox1.Width, pictureBox1.Height));
return SavedBitmap;
}

最后，有時候，簽名還需要在列表里面顯示，這樣方便對一些關(guān)鍵信息進行查看核對。如下圖所示：

那么對于列表中顯示圖片，我們在DevExpress界面的分頁控件中應(yīng)該如何處理呢，這估計也是DevExpress開發(fā)中很多常見問題之一？

其實也很簡單，就是在DataSourceChanged 變化的事件中改變單元格的對象屬性即可。

this.winGridViewPager1.OnRefresh += new EventHandler(winGridViewPager1_OnRefresh);
this.winGridViewPager1.ShowLineNumber = true;
this.winGridViewPager1.gridView1.Appearance.Row.TextOptions.HAlignment = DevExpress.Utils.HorzAlignment.Center;
this.winGridViewPager1.gridView1.Appearance.HeaderPanel.TextOptions.HAlignment = DevExpress.Utils.HorzAlignment.Center;
this.winGridViewPager1.AppendedMenu = this.contextMenuStrip1;
this.winGridViewPager1.gridView1.DataSourceChanged += new EventHandler(gridView1_DataSourceChanged);
this.winGridViewPager1.gridView1.RowHeight = 44;

void gridView1_DataSourceChanged(object sender, EventArgs e)
{
RepositoryItemPictureEdit pic1 = new RepositoryItemPictureEdit();
pic1.SizeMode = DevExpress.XtraEditors.Controls.PictureSizeMode.Zoom;
pic1.NullText = " ";
pic1.CustomHeight = 44;
pic1.BestFitWidth = 100;
this.winGridViewPager1.gridView1.Columns["Signature"].ColumnEdit = picFlight;
this.winGridViewPager1.gridView1.Columns["Signature"].MaxWidth = 100;
this.winGridViewPager1.gridView1.Columns["Signature"].MinWidth = 100;

RepositoryItemPictureEdit picDoctor = new RepositoryItemPictureEdit();
picDoctor.SizeMode = DevExpress.XtraEditors.Controls.PictureSizeMode.Zoom;
picDoctor.NullText = " ";
picDoctor.CustomHeight = 44;
picDoctor.BestFitWidth = 100;
this.winGridViewPager1.gridView1.Columns["DoctorSignature"].ColumnEdit = picDoctor;
this.winGridViewPager1.gridView1.Columns["DoctorSignature"].MaxWidth = 100;
this.winGridViewPager1.gridView1.Columns["DoctorSignature"].MinWidth = 100;
}

以上就基本上解決了，簽名，以及圖片保存，以及列表顯示圖片效果的問題了。

DevExpress WinForm | 下載試用

DevExpress WinForm擁有180+組件和UI庫，能為Windows Forms平臺創(chuàng)建具有影響力的業(yè)務(wù)解決方案。DevExpress WinForms能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序，無論是Office風(fēng)格的界面，還是分析處理大批量的業(yè)務(wù)數(shù)據(jù)，它都能輕松勝任！

本文轉(zhuǎn)載自：

DevExpress技術(shù)交流群6：600715373      歡迎一起進群討論