由于項(xiàng)目的需要，需要在項(xiàng)目的WinForm系統(tǒng)的一個(gè)模塊中集成手寫簽名的功能，一開始對(duì)這塊不是很了解，只是了解他能夠替代鼠標(biāo)進(jìn)行簽名。既然是簽名，一般就是需要記錄手稿圖片，作為一個(gè)記錄核實(shí)的憑證，因?yàn)橛行У暮灻呛茈y模擬的。市場(chǎng)上也存在很多類型的電子簽名筆，一時(shí)間還真不知道那種適合。

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

1. 電子手寫簽名介紹

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

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

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

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

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

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

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

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

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

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

從上圖效果圖上，我們看到，我們?cè)谄渲蟹胖昧艘粋€(gè)繪圖面板，其實(shí)就是一個(gè)PictureBox對(duì)象而已，我們只需要在PictureBox對(duì)象，記錄鼠標(biāo)的移動(dòng)、鼠標(biāo)按下，以及對(duì)象刷新操作事件即可實(shí)現(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 { }
}

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

具體實(shí)現(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;
}

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

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

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ù)圖片大小進(jìn)行保存Bitmap對(duì)象，這種可以從全屏最初的幾M縮小到十幾K，方便存儲(chǔ)。

至于圖片對(duì)象存儲(chǔ)到數(shù)據(jù)庫(kù)，這個(gè)由于利用了我Winform開發(fā)框架里面的數(shù)據(jù)庫(kù)基礎(chǔ)對(duì)象，基本上不需要特別對(duì)待及處理，只需要把圖片字段的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;
}

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

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

其實(shí)也很簡(jiǎn)單，就是在DataSourceChanged 變化的事件中改變單元格的對(duì)象屬性即可。

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庫(kù)，能為Windows Forms平臺(tái)創(chuàng)建具有影響力的業(yè)務(wù)解決方案。DevExpress WinForms能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序，無(wú)論是Office風(fēng)格的界面，還是分析處理大批量的業(yè)務(wù)數(shù)據(jù)，它都能輕松勝任！

本文轉(zhuǎn)載自：

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