--- title: "在您的移动应用程序中捕获签名" date: "2015-12-23" categories: - "mobile" - "xquery" tags: - "mobile-development" - "mobiletogether" - "software-tools" description: 了解如何使用 Altova MobileTogether 2.0 在移动应用程序中实现签名功能。 学习关于跨平台功能以及签名存储的相关知识。 --- Status: #blog Tags: #mobile-development #mobiletogether #software-tools Categories: [mobile-development](/blog/zh/category/mobile-development.md) | [xpath+xquery](/blog/zh/category/xpathxquery.md) # 在您的移动应用程序中捕获签名 您可能最近在电子设备上签名，用于信用卡支付或接受包裹。现在，[Altova MobileTogether 2.0](https://www.altova.com/zh/whatsnew_mobiletogether.html) 允许您将签名功能集成到您自己的移动应用程序中，适用于所有平台。 ![签名](/blog/images/signature.png) 能够采集来自偏远地区的数据、发起请愿、授权协议，或者仅仅记录现实世界的互动，都可以使用签名采集功能。Altova Parcel Delivery 示例应用程序，该应用程序展示了 GPS 功能，现已更新，增加了用于验证送货的签名功能。该 Parcel Delivery 应用程序已安装在 Altova MobileTogether Demo 服务器上，您可以通过 [MobileTogether Client 应用程序](https://www.altova.com/zh/mobiletogether/app.html) 在自己的移动设备上运行它。 “包裹配送”应用程序模拟了城市配送服务的运作方式。在送货过程中，该应用会要求收件人在送货员的移动设备上签名确认，就像下图所示，该截图是在一台小型安卓平板电脑上截取的。 ![Altova Parcel Delivery 移动应用程序中的签名采集功能](/blog/images/Screenshot-1.png) 在完成整个派送路线后，包裹派送应用程序会显示一份派送摘要，其中包含收件人的签名，用于验证。 ![Altova Parcel Delivery 移动应用程序中的签名验证功能](/blog/images/Screenshot-2.png) 这些截图展示了在移动应用程序中处理签名最常见的流程：签名被捕捉、存储，然后在未来的某个时间和地点重新显示。 在大多数应用中，签名显示将在与签名采集设备不同的设备上进行。例如，员工可以使用移动应用程序提交已签名的费用报销单，而经理会查看并批准该报销单；或者，采购人员可以电子签名采购订单，并将副本存储在采购数据库中。MobileTogether 包含一些功能，可以帮助开发者在多个平台上显示签名。 为了演示此功能，我们开发了一个简单的应用程序，用于将签名保存到文件中，并在各种设备上重新显示。例如，在安卓手机上采集的签名可以在iPad上显示，或者在Windows 10系统上运行的应用程序采集的签名可以在任何移动设备上显示。以下是“签名”应用程序的首页的局部视图，用户可以选择采集新的签名，或者查看已经存储的签名。 “采集”和“查看”按钮分别会打开相应的子页面，用于执行这些操作。 ![Signatures跨平台演示移动应用程序的启动界面](/blog/images/Screenshot-3.png) **签名采集** 该签名采集子页面的设计非常简洁，仅包含四个控件：页面顶部有一个标签，中间是签名区域，以及两个按钮，分别用于保存签名或清除签名并重新尝试。 ![用于“Signatures”演示版移动应用程序的引导页设计](/blog/images/Capture-Page-Design.png) 签名字段可以通过从“MobileTogether控件”辅助窗口拖动图标的方式添加到子页面。该字段的尺寸会自动调整，以填充所选用于模拟的设备的宽度，并且无需定义任何特殊属性。签名字段的颜色基于设备的默认设置。在上面的示例中，选择了iOS设备进行设计，因此默认颜色是黑色背景上的白色笔迹。稍后，当应用程序在Android设备上运行时，默认颜色将变为灰色背景上的黑色笔迹；而在Windows Phone设备上，则为白色背景上的黑色笔迹。 上面的“页面资源”辅助窗口显示了我们定义的用于保存签名图片的元素，以及用于记录其颜色和有关设备的附加信息的元素，这些信息稍后将很有用，可以用于回顾。根据您自己的应用程序的工作流程，您可能需要记录当前的日期和时间，或者可能需要记录地理位置坐标以及签名信息。我们的应用程序会将每个新的签名追加到位于 MobileTogether 服务器上的一个名为 "signatures.xml" 的文件中。在这个简单的示例中，所有用户都访问同一个文件。 当您设计一个应用程序时，其中一些用户创建签名，而另一些用户需要在不同的设备上查看这些签名，那么一种优雅的做法是，在查看者的设备上以默认大小和颜色显示这些签名。MobileTogether 提供了一个名为 mt-change-image-colors 的特殊功能，可以帮助实现这一点。 **签名显示** 捕获的签名可以显示在签名区域中，也可以以图像的形式显示。 无论使用哪种方式，原始签名都会自动调整大小以适应任何显示设备，这意味着在平板电脑上捕获的签名可以自动适应手机屏幕，反之亦然。 以下截图是在iPhone上截取的，显示的是“评论”子页面，其中显示的手写签名使用了iOS系统默认的白色字体在黑色背景上显示。虽然原始图像是在Android设备上拍摄的，使用的是黑色字体在灰色背景上显示。 ![使用 Altova Signatures 演示版的跨平台移动应用程序，您可以查看和验证已捕获的签名](/blog/images/Capture-Review-Signature-with-expression.png) 右侧是用于转换颜色的表达式。请注意，墨水和画布的颜色都经过了单次处理。如果颜色转换需要反转两种颜色，就必须这样操作。如果分两次进行转换，你可能会将黑色墨水变成白色，并且与画布颜色不匹配。在这种情况下，中间的转换结果会是一个纯色矩形，而签名就会丢失！ **定制颜色** 您不必局限于默认颜色。在每个签名控件的“属性”辅助窗口中，“文本颜色”字段定义了签名笔迹的颜色，而“背景颜色”字段定义了画布的颜色。可以使用 XPath 变量来保存这些值，以便稍后进行转换。 ![样式辅助窗口，用于定义捕获的签名所使用的颜色](/blog/images/Styles-Helper-Window.png) 我们对“Signature Demo”应用程序进行了改进，增加了一个页面，允许用户从下拉列表中选择自定义颜色 ![为 Altova 签名演示移动应用提供自定义签名颜色增强功能](/blog/images/custom-colors-capture.png) [下载免费的 MobileTogether Designer](https://www.altova.com/zh/download/mobiletogether-designer.html)，即可在极短时间内为您的跨平台移动应用程序添加签名功能。您的安装包将包含所有在 MobileTogether 演示服务器上安装的示例应用程序的设计文件。如果您想查看本文中描述的签名演示应用程序，它已上传到 GitHub，地址为：[https://github.com/altova/MobileTogether-signature-capture](https://github.com/altova/MobileTogether-signature-capture) **MobileTogether 移动应用程序** 请访问您设备的应用商店，下载这款**免费**应用： [![Android 应用，可在 Google Play 商店下载](/blog/images/googleplay.gif)](https://play.google.com/store/apps/details?id=com.altova.mobiletogether) [![适用于 iOS 系统的应用程序，可在 Apple Store 商店下载](/blog/images/Download_on_the_App_Store_Badge_US-UK_135x40.png)](https://itunes.apple.com/us/app/altova-mobiletogether/id904018222?) [![Windows Phone 8 应用，可在 Windows 应用商店下载](/blog/images/258x67_WPS_Download_cyan.gif)](http://www.windowsphone.com/s?appid=49ef6685-f3bc-4df3-ac2a-99ae567979ca) [![Windows 8 应用程序，可在 Windows 商店下载](/blog/images/Windows8_Green.png)](http://apps.microsoft.com/windows/en-us/app/altova-mobiletogether/9775f49c-3db4-4fe4-8e7b-19ae77f537bb)