Un proyecto reciente involucra los requisitos funcionales para firmas manuscritas en terminales móviles. El código de implementación se registrará aquí para referencia de sus amigos ~.
código HTML:
<!--Área de escritura a mano--> <div class=mSign_signMark_box> <div class=mSign_signMark_write_box> <div id=mSign_signMark_signature_pad class=mSign_signMark_body_box> <div class=mSign_signMark_body> <span class=mSign_signMark_clear_out> <img src=../images/mCommon_basicIcon_deleteRed.png> </span> <p>Área de escritura a mano</p> <canvas id=mSign_signMark_canvas></canvas> </div> </div> </div> </div> <!--Fin del área de escritura a mano--> <!--Botón inferior--> <div class=mSign_signMark_footer> <span id=mSign_signMark_clear_out class=mSign_signMark_footer_cancle>Borrar</span> <span id=mSign_signMark_submit class=mSign_signMark_footer_sure>Aceptar</span> </div> <!--Fin del botón inferior-->
Estilo CSS:
.mSign_signMark_box{padding: 15px 15px 26px 15px;}.mSign_signMark_footer{max-width:640px;margin:0 auto;alto: 44px;fondo: #4ba7eb;posición: fija;abajo: 0;izquierda: 0;derecha: 0; color:#fff;tamaño de fuente: 16px;text-align: center;line-height: 44px;}.mSign_signMark_footer span{display: block;width: 50%;text-align: center;float: left;}.mSign_signMark_footer_cancle{fondo: #f4f4f5;color: #333333;}/*Firma manuscrita*/.mSign_signMark_write_box{posición: relativa;altura: 240px;}.mSign_signMark_body_box {posición: absoluta;color de fondo: #fff;borde: 1px sólido #ccc;arriba:0;izquierda: 0 ;derecha: 0;abajo: 0;ancho: 99%;alto: auto;ancho mínimo: 250px;alto mínimo: 140px;}.mSign_signMark_body {posición: absoluta;izquierda: 0;derecha: 0;arriba: 0;abajo: 0;}.mSign_signMark_body lienzo {posición: absoluta;izquierda: 0 ;arriba: 0;ancho: 100%;alto: 100%;}.mSign_signMark_body p{posición: absoluta;tamaño de fuente: 14px;color: #ccc;text-align: center;ancho: 100%;arriba: 50%;margin-top: -22px;}.mSign_signMark_clear_out{posición: absoluta;arriba: -10px;derecha: -5px;índice z: 10;pantalla: ninguna;}.mSign_signMark_clear_out img{ancho: 18px;alto: 18px;}La página presenta JS:
//Evento táctil del área de escritura a mano $(function() { var ctouch=$('.mSign_signMark_body canvas'); ctouch.bind(touchstart,function(event){ $('.mSign_signMark_body p').hide(); }) ; ctouch.mouseover(función(evento) { $('.mSign_signMark_body p').hide(); });});Dirección del archivo js de introducción de firma manuscrita: qianmian-js.rar
El efecto es el siguiente:
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.