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，并且已经登陆。

  在程序启动后，在签名区进行触摸操作，会显示笔迹内容。签名完成后，点击[签名]按钮，在显示区获取签名图像，点击右侧[清除]按钮，显示区的内容将被清除。