Um projeto recente envolve os requisitos funcionais para assinaturas manuscritas em terminais móveis. O código de implementação será registrado aqui para referência de seus amigos.
Código HTML:
<!--Área de escrita--> <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 escrita manual</p> <canvas id=mSign_signMark_canvas></canvas> </div> </div> </div> </div> <!--Fim da área de escrita à mão--> <!--Botão inferior--> <div class=mSign_signMark_footer> <span id=mSign_signMark_clear_out class=mSign_signMark_footer_cancle>Limpar</span> <span id=mSign_signMark_submit class=mSign_signMark_footer_sure>OK</span> </div> <!--Fim do botão inferior-->
Estilo CSS:
.mSign_signMark_box{preenchimento: 15px 15px 26px 15px;}.mSign_signMark_footer{largura máxima:640px;margem:0 automático;altura: 44px;fundo: #4ba7eb;posição: fixa;inferior: 0;esquerda: 0;direita: 0; cor:#fff;tamanho da fonte: 16px;alinhamento de texto: centro;altura da linha: 44px;}.mSign_signMark_footer span{display: bloco;largura: 50%;alinhamento de texto: centro;float: esquerda;}.mSign_signMark_footer_cancle{fundo: #f4f4f5;cor: #333333;}/*Assinatura manuscrita*/.mSign_signMark_write_box{posição: relativa;altura: 240px;}.mSign_signMark_body_box {posição: absoluta;cor de fundo: #fff;borda: 1px sólido #ccc;topo:0;esquerda: 0 ;direita: 0;inferior: 0;largura: 99%;altura: auto;largura mínima: 250px;altura mínima: 140px;}.mSign_signMark_body {posição: absoluto;esquerda: 0;direita: 0;topo: 0;inferior: 0;}.mSign_signMark_body canvas {posição: absoluta;esquerda: 0 ;topo: 0;largura: 100%;altura: 100%;}.mSign_signMark_body p{posição: absoluto;tamanho da fonte: 14px;cor: #ccc;alinhamento de texto: centro;largura: 100%;topo: 50%;margem-topo: -22px;}.mSign_signMark_clear_out{posição: absoluto;topo: -10px;direita: -5px;índice z: 10;exibição: nenhum;}.mSign_signMark_clear_out img{largura: 18px;altura: 18px;}A página apresenta JS:
//Evento de toque da área de escrita $(function() { var ctouch=$('.mSign_signMark_body canvas'); ctouch.bind(touchstart,function(event){ $('.mSign_signMark_body p').hide(); }) ;ctouch.mouseover(function(event) { $('.mSign_signMark_body p').hide(); });});Endereço do arquivo js de introdução de assinatura manuscrita: qianmian-js.rar
O efeito é o seguinte:
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.