PinToo之手寫板簽名

1. 說明

  通過PinToo智慧控制平臺，實現手寫板簽名的功能，可將簽名儲存為圖片格式的檔案。可用於電子簽名採集。在使用以下功能之前，請先確認是否有給予PinToo相應的許可權。

  通過範例學習，可以掌握fxSignaturePad控制元件的基本使用。

2. 設計明細

  開啟PinToo設計器，分別加入下插圖之控制元件。或者點選左上角的[打開模板Lib檔案]，選擇模板檔案來打開對應模板。

  ①：TfxSignaturePad元件，控制元件名稱為fxSignaturePad1。

  ②：TfxSuperButton元件，控制元件名稱為fxSuperButton1。

  ③：TfxImage元件，控制元件名稱為fxImage1。

  ④：TfxSuperButton元件，控制元件名稱為fxSuperButton2。

• fxRunFrame屬性設定

  • Height：設定頁面高度=800。
  • Width：設定頁面寬度=400。

• ①fxSignaturePad1屬性設定

  • Height：設定控制元件高度=585。
  • Width：設定控制元件=370。

• ②fxSuperButton1屬性設定

  • Height：設定控制元件高度=100。
  • Width：設定控制元件寬度=100。
  • ButtonType：設定按鈕型別，設定為TfxSvgButton。
  • ButtonType.Text：設定按鈕顯示的文字=簽名。
  • ButtonType.SvgData：設定SVG數據，其數據內容如下。

  <path d="M37.1403884887695,77.6687164306641 L12.3366441726685,80.0623092651367 L14.7397747039795,55.2680969238281 L30.7415752410889,45.665111541748 L46.7433776855469,61.6669158935547 Z" p-id="1087" fill="#FF959FAF" stroke="Null"></path>
  <path d="M28.7389678955078,63.6695213317871 M25.344066619873,63.6695213317871 C25.344066619873,65.5444641113281 26.8640155792236,67.0644226074219 28.7389678955078,67.0644226074219 C30.6139183044434,67.0644226074219 32.1338653564453,65.5444793701172 32.1338653564453,63.6695213317871 C32.1338653564453,61.7945747375488 30.6139183044434,60.2746353149414 28.7389678955078,60.2746353149414 C26.8640155792236,60.2746353149414 25.344066619873,61.7945747375488 25.344066619873,63.6695213317871 Z" p-id="1088" fill="#FFE4EFF4" stroke="Null"></path>
  <path d="M28.3434982299805,43.2689437866211 L66.7385711669922,4.8738694190979 L87.5342254638672,25.6695365905762 L49.1391677856445,64.0646209716797 Z" p-id="1089" fill="#FF51B5ED" stroke="Null"></path>
  <path d="M48.2596397399902,32.2667045593262 C47.9735527038574,32.2667045593262 47.6779289245605,32.1522674560547 47.4585952758789,31.9329376220703 C47.0199279785156,31.4942665100098 47.0199279785156,30.7790489196777 47.4585952758789,30.3308506011963 L63.4603958129883,14.3290481567383 C63.8990592956543,13.890380859375 64.6142807006836,13.890380859375 65.0624847412109,14.3290481567383 C65.5011444091797,14.7677154541016 65.5011444091797,15.4829320907593 65.0624847412109,15.9311351776123 L49.0606803894043,31.9329376220703 C48.8413505554199,32.1522674560547 48.5552635192871,32.2667045593262 48.2596397399902,32.2667045593262 Z" p-id="1090" fill="White" stroke="Null"></path>
  <path d="M67.9328918457031,11.4681758880615 M66.7980651855469,11.4681758880615 C66.7974624633789,12.0949239730835 67.3050384521484,12.6034927368164 67.9317779541016,12.6041049957275 C68.5593872070313,12.604718208313 69.0683135986328,12.0957899093628 69.0677032470703,11.468186378479 C69.0683135986328,10.841438293457 68.5607452392578,10.3328704833984 67.9339904785156,10.332257270813 C67.306396484375,10.3316440582275 66.7974624633789,10.8405723571777 66.7980651855469,11.4681777954102 Z" p-id="1091" fill="White" stroke="Null"></path>
  <path d="M43.481128692627,58.4059028625488 L81.8761978149414,20.0108318328857 L87.5335693359375,25.6682968139648 L49.1385917663574,64.0633697509766 Z" p-id="1092" fill="#FF2996D3" stroke="Null"></path>
  <path d="M43.3484802246094,58.2720146179199 L33.745491027832,74.2738189697266 L12.3652534484863,79.7666854858398 L12.3366441726685,80.0623092651367 L37.1403884887695,77.6687164306641 L46.7433776855469,61.6669158935547 Z" p-id="1093" fill="#FF74808C" stroke="Null"></path>
  <path d="M88.7409515380859,24.4660625457764 C88.0734100341797,23.798526763916 87.0053482055664,23.798526763916 86.3378219604492,24.4660625457764 L56.3368301391602,54.4670562744141 L52.5890884399414,50.7193183898926 C51.9215545654297,50.0517807006836 50.8534927368164,50.0517807006836 50.1859550476074,50.7193183898926 C49.5184211730957,51.3773193359375 49.5184211730957,52.4549140930176 50.1859550476074,53.1224479675293 L53.9336929321289,56.870189666748 L49.1369743347168,61.6669158935547 L30.7415752410889,43.2715148925781 L35.5382995605469,38.4747886657715 L44.7407684326172,47.6772575378418 C45.074535369873,48.0110282897949 45.5036659240723,48.1731414794922 45.9423332214355,48.1731414794922 C46.3810005187988,48.1731414794922 46.810131072998,48.0110282897949 47.1438980102539,47.6772575378418 C47.8114356994629,47.0192527770996 47.8114356994629,45.9416618347168 47.1438980102539,45.2741241455078 L37.9414329528809,36.0716590881348 L67.9424285888672,6.0706672668457 C68.6099548339844,5.41266679763794 68.6099548339844,4.33507299423218 67.9424285888672,3.66753649711609 C67.2748870849609,3 66.2068176269531,3 65.5392913818359,3.66753649711609 L27.1368808746338,42.069953918457 C26.4693450927734,42.727954864502 26.4693450927734,43.8055458068848 27.1368808746338,44.4730834960938 L28.0046787261963,45.3408813476563 L13.8719797134399,53.8185958862305 C13.4142408370972,54.0951499938965 13.1090812683105,54.5719604492188 13.0518636703491,55.1059837341309 L10.6487321853638,79.9001922607422 C10.6010513305664,80.4056167602539 10.7822399139404,80.9015045166016 11.1350803375244,81.2638778686523 C11.4593124389648,81.5881118774414 11.8884429931641,81.759765625 12.3366451263428,81.759765625 C12.3938627243042,81.759765625 12.4415445327759,81.759765625 12.498761177063,81.7502288818359 L37.3025054931641,79.3470916748047 C37.8365364074707,79.2994232177734 38.313346862793,78.994255065918 38.5898971557617,78.5269775390625 L47.0676116943359,64.394287109375 L47.9354057312012,65.262077331543 C48.2501029968262,65.5767669677734 48.6887702941895,65.7579650878906 49.1369743347168,65.7579650878906 C49.5851783752441,65.7579650878906 50.0143051147461,65.5767669677734 50.3385429382324,65.262077331543 L57.5383987426758,58.0622177124023 L88.7409515380859,26.8596572875977 C89.3989486694336,26.2016582489014 89.3989486694336,25.1335983276367 88.7409515380859,24.4660625457764 Z M36.1295471191406,76.0570983886719 L16.885425567627,77.9166641235352 L26.5456295013428,68.2564544677734 C27.2322406768799,68.580696105957 27.9856033325195,68.7523422241211 28.7389640808105,68.7523422241211 C30.0454292297363,68.7523422241211 31.3423557281494,68.2564544677734 32.3341255187988,67.2647018432617 C33.2972869873047,66.3015365600586 33.82177734375,65.023681640625 33.82177734375,63.6599960327148 C33.82177734375,62.2963218688965 33.2877502441406,61.0184555053711 32.3341255187988,60.0648307800293 C31.3709659576416,59.1016807556152 30.093111038208,58.5771903991699 28.7294311523438,58.5771903991699 C27.3657493591309,58.5771903991699 26.087890625,59.1112098693848 25.1247329711914,60.0648307800293 C23.560791015625,61.6287803649902 23.2365589141846,63.965160369873 24.1329650878906,65.8533325195313 L14.4822969436646,75.523063659668 L16.3418617248535,56.2789421081543 L30.4745597839355,47.8012275695801 L44.5977249145508,61.9243927001953 L36.1295471191406,76.0570983886719 Z M27.5373973846436,62.4679641723633 C27.861629486084,62.1437339782715 28.2812232971191,61.9720802307129 28.7389640808105,61.9720802307129 C29.196704864502,61.9720802307129 29.6162986755371,62.1532745361328 29.9405288696289,62.4679641723633 C30.2647609710693,62.7921943664551 30.4364166259766,63.211784362793 30.4364166259766,63.6695213317871 C30.4364166259766,64.1272583007813 30.2552280426025,64.5468597412109 29.9405288696289,64.87109375 C29.2825317382813,65.5290985107422 28.2049350738525,65.5290985107422 27.5373973846436,64.87109375 C26.8793983459473,64.2035522460938 26.8793983459473,63.1259651184082 27.5373973846436,62.4679641723633 Z" p-id="1094" fill="#FF2D3742" stroke="Null"></path>
  

• ③fxImage1屬性設定

  • Height：設定控制元件高度=100。
  • Width：設定控制元件寬度=100。

• ④fxSuperButton2屬性設定

  • Height：設定控制元件高度=100。
  • Width：設定控制元件寬度=100。
  • ButtonType：設定按鈕型別，設定為TfxSvgButton。
  • ButtonType.Text：設定按鈕顯示的文字=清除。
  • ButtonType.SvgData：設定SVG數據，其數據內容如下。

  <path d="M56.2124252319336,66.4618453979492 L24.3260746002197,34.5754928588867 L55.5436096191406,3.36737608909607 C55.9109878540039,3 56.5044403076172,3 56.8718147277832,3.36737608909607 L87.4205474853516,33.9160995483398 C87.7879180908203,34.2834777832031 87.7879180908203,34.8769302368164 87.4205474853516,35.2443046569824 L56.2124252319336,66.4618453979492 Z" p-id="1232" fill="#FF51B5ED" stroke="Null"></path>
  <path d="M84.104736328125,30.590877532959 L78.4716339111328,24.9577808380127 C80.6759033203125,27.1620349884033 80.6759033203125,30.7227592468262 78.4716339111328,32.9270133972168 L50.5793266296387,60.8287506103516 L56.2124252319336,66.4618453979492 L84.104736328125,38.5695304870605 C86.3090057373047,36.3652725219727 86.3090057373047,32.7951354980469 84.104736328125,30.590877532959 Z" p-id="1233" fill="#FF2996D3" stroke="Null"></path>
  <path d="M39.6051445007324,78.5475769042969 L12.2403469085693,51.1827697753906 C11.8729705810547,50.8153953552246 11.8729705810547,50.2219390869141 12.2403469085693,49.8545684814453 L25.9180374145508,36.1768760681152 L54.6110420227051,64.8698883056641 L40.9333534240723,78.5475845336914 C40.565975189209,78.9149627685547 39.9725227355957,78.9149627685547 39.6051445007324,78.5475845336914 Z" p-id="1234" fill="#FFE4EFF4" stroke="Null"></path>
  <path d="M25.9274578094482,36.1768760681152 L48.9873657226563,59.2367858886719 L38.6254768371582,69.5986709594727 C36.4212226867676,71.8029327392578 32.8605003356934,71.8029327392578 30.6562442779541,69.5986709594727 L36.2893409729004,75.2317733764648 C38.493595123291,77.4360275268555 42.0543212890625,77.4360275268555 44.2585754394531,75.2317733764648 L54.6204643249512,64.8698883056641 L25.927453994751,36.176872253418 Z" p-id="1235" fill="#FFC1DFEA" stroke="Null"></path>
  <path d="M64.6526489257813,18.9102058410645 M63.5222625732422,18.9102058410645 C63.5222625732422,19.5345001220703 64.0283508300781,20.0405921936035 64.6526489257813,20.0405921936035 C65.2769470214844,20.0405921936035 65.7830352783203,19.5345001220703 65.7830352783203,18.9102058410645 C65.7830352783203,18.2859115600586 65.2769470214844,17.7798194885254 64.6526489257813,17.7798194885254 C64.0283508300781,17.7798194885254 63.5222625732422,18.2859115600586 63.5222625732422,18.9102058410645 Z" p-id="1236" fill="White" stroke="Null"></path>
  <path d="M43.4578819274902,24.3549060821533 C43.1658668518066,24.3549060821533 42.8832664489746,24.2418651580811 42.6571922302246,24.0252075195313 C42.2144584655762,23.5824718475342 42.2144584655762,22.8759784698486 42.6571922302246,22.4332466125488 L55.4117279052734,9.67870712280273 C55.8356246948242,9.25481224060059 56.5797996520996,9.25481224060059 57.0036964416504,9.67870712280273 L61.7890014648438,14.464015007019 C62.2317390441895,14.9067497253418 62.2317390441895,15.613242149353 61.7890014648438,16.0559768676758 C61.346263885498,16.4987106323242 60.6397705078125,16.4987106323242 60.1970367431641,16.0559768676758 L56.2124214172363,12.0713605880737 L44.2585716247559,24.0252075195313 C44.0324935913086,24.2418651580811 43.7498970031738,24.3549060821533 43.4578819274902,24.3549060821533 Z" p-id="1237" fill="White" stroke="Null"></path>
  <path d="M54.6204643249512,67.2625427246094 L55.0160980224609,67.6581726074219 C55.3457946777344,67.9878768920898 55.779109954834,68.1574325561523 56.2124252319336,68.1574325561523 C56.6457443237305,68.1574325561523 57.0790596008301,67.9878768920898 57.4087524414063,67.6581726074219 L85.3010711669922,39.7658576965332 C88.1552886962891,36.9116287231445 88.1552886962891,32.2582015991211 85.3010711669922,29.4039707183838 L61.393367767334,5.48685264587402 C60.0086441040039,4.10212850570679 58.1717643737793,3.33911609649658 56.2124252319336,3.33911609649658 C54.2530899047852,3.33911609649658 52.4162101745605,4.10212755203247 51.0314826965332,5.48685264587402 L23.1391677856445,33.3885879516602 C22.8188915252686,33.7088623046875 22.63991355896,34.1327590942383 22.63991355896,34.5849151611328 C22.63991355896,35.0370712280273 22.8188915252686,35.4609680175781 23.1391677856445,35.7812461853027 L23.5348033905029,36.1768836975098 L14.3692436218262,45.3424415588379 C12.9845190048218,46.727165222168 12.2215061187744,48.5640449523926 12.2215061187744,50.5233840942383 C12.2215061187744,52.482723236084 12.9845180511475,54.3196029663086 14.3692436218262,55.7043304443359 L35.0930137634277,76.428108215332 C36.0915260314941,77.4266128540039 37.3255348205566,78.0954284667969 38.663158416748,78.3874435424805 L13.530873298645,78.3874435424805 C12.5983028411865,78.3874435424805 11.8447113037109,79.1410293579102 11.8447113037109,80.0736083984375 C11.8447113037109,81.0061798095703 12.5983028411865,81.759765625 13.530873298645,81.759765625 L82.2866973876953,81.759765625 C83.2192687988281,81.759765625 83.9728698730469,81.0061798095703 83.9728698730469,80.0736083984375 C83.9728698730469,79.1410293579102 83.2192687988281,78.3874435424805 82.2866973876953,78.3874435424805 L41.8753395080566,78.3874435424805 C43.2129707336426,78.0859985351563 44.4469718933105,77.4171981811523 45.445484161377,76.428108215332 L54.6204643249512,67.2625427246094 Z M53.4241371154785,7.87950325012207 C54.9595756530762,6.34405994415283 57.465274810791,6.34405994415283 59.0007133483887,7.87950325012207 L82.9084014892578,31.7871990203857 C83.652587890625,32.5313720703125 84.0670471191406,33.5204620361328 84.0670471191406,34.5754890441895 C84.0670471191406,35.6305198669434 83.6525726318359,36.6196098327637 82.9084014892578,37.3637809753418 L56.2124252319336,64.0691986083984 L55.8167915344238,63.6735610961914 L27.1237831115723,34.9805526733398 L26.7281455993652,34.5849151611328 L53.4241371154785,7.87950611114502 Z M40.2739601135254,75.1846771240234 C39.2189292907715,75.1846771240234 38.2298393249512,74.7701950073242 37.485668182373,74.0260314941406 L16.7618961334229,53.3022537231445 C16.0177249908447,52.5580825805664 15.6032485961914,51.5689926147461 15.6032485961914,50.5139694213867 C15.6032485961914,49.4589385986328 16.0177230834961,48.4698486328125 16.7618961334229,47.7256813049316 L25.9274578094482,38.5601234436035 L52.2278099060059,64.860481262207 L43.0622520446777,74.0260391235352 C42.3180809020996,74.7796249389648 41.3289909362793,75.184684753418 40.2739601135254,75.184684753418 Z" p-id="1238" fill="#FF2D3742" stroke="Null"></path>
  

3. 程式設計

3.1. 程式初始設定

  該程式無初始設定。

3.2. 事件設定

• ②fxSuperButton1-OnClick事件

  點選按鈕獲取簽名，將簽名板中目前顯示的影象資訊賦值給影象顯示控制元件。

Procedure fxSuperButton1OnClick(Sender: TObject);
//獲取簽名，將簽名板中的當前影象資訊賦值給影象顯示控制元件
Begin
  fximage1.Bitmap := fxSignaturePad1.SignatureBitmap;
End;

• ④fxSuperButton2-OnClick事件

  點選按鈕以清除簽名板和影象顯示控制元件中的內容。

Procedure fxSuperButton2OnClick(Sender: TObject);
//清除簽名板和影象顯示控制元件中的內容
Begin
  fxSignaturePad1.clear;
  fximage1.Bitmap := nil;
End;

4. 運行結果

  使用滑鼠在 PinToo 功能表，點選[除錯運行]按鈕，測試運行結果。

  通過同步中心，將程式上傳至手機PinToo運行；同步時，請確保手機已經運行PinToo，並且已經登陸。

  在程式啟動后，在簽名區進行觸控操作，會顯示筆跡內容。簽名完成後，點選[簽名]按鈕，在顯示區獲取簽名影象，點選右側[清除]按鈕，顯示區的內容將被清除。