开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
文档中心
凯发app官方网站的技术支持 & 案例 faq 
支付宝小程序
案例分析
sdk & demo下载
常见问题
常用工具
iot小程序
运维保障
小程序 > 支付宝小程序 > 案例分析 > 小程序中如何进行手写签名
贡献者
收藏
我的文档
设置
场景分析
在小程序业务中如需用户进行手写签名的场景如:寄快递,签约合同时需要在小程序中进行手写签名。 
处理方法
实现原理
运用 canvas 监听用户 touch 事件,然后在 canvas 上画出与 touch 事件相近的线模仿手写签名效果。 
实现方法参考如下代码
.axml
xml
复制代码
<view class="wrapper">
<view class="handbtn">
<image ontap="selectcolorevent" src="{{ selectcolor === 'black' ? '../../images/color_black_selected.png' : '../../images/color_black.png' }}" class="{{ selectcolor === 'black' ? 'color_select' : '' }} black-select" data-color="black" data-color-value="#1a1a1a">image>
<image ontap="selectcolorevent" src="{{ selectcolor === 'red' ? '../../images/color_red_selected.png' : '../../images/color_red.png' }}" class="{{ selectcolor === 'red' ? 'color_select' : '' }} red-select" data-color="red" data-color-value="#ca262a">image>
<button ontap="retdraw" class="delbtn">重写button>
view>
<view class="handcenter">
<canvas class="handwriting" disable-scroll="true" ontouchstart="uploadscalestart" ontouchmove="uploadscalemove" ontouchend="uploadscaleend" ontap="mousedown" id="handwriting">
canvas>
view>
<view class="handright">
<view class="handtitle">手写板view>
view>view>
.js
.acss
用到的图片资源

内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图