UI5-技术篇-签字板

签字板应用是通过创建自定义控件实现的，相关代码如下：

1.HTML

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

 <script id="sap-ui-bootstrap"

     type="text/javascript"

     data-sap-ui-libs="sap.m"

     data-sap-ui-theme="sap_bluecrystal"

     src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"></script>

 </head>

 <body class="sapUiBody">

   <div id="content"></div>

 </body>

2.Javascript

 jQuery(function() {

   sap.ui.core.Control.extend('SignaturePad', {

     metadata: {

       properties: {

         width: {type: 'int', defaultValue: 300},

         height: {type: 'int', defaultValue: 100},

         bgcolor: {type: 'string', defaultValue: '#ffa'},

         lineColor: {type: 'string', defaultValue: '#666'},

         penColor: {type: 'string', defaultValue: '#333'},

         signature: 'string'

       }

     },

     renderer: function(oRm, oControl) {

       var bgColor = oControl.getBgcolor();

       var lineColor = oControl.getLineColor();

       var pen = oControl.getPenColor();

       var id = oControl.getId();

       var w = oControl.getWidth();

       var h = oControl.getHeight();

       oRm.write("<div");

       oRm.writeControlData(oControl);

       oRm.write(">");

       oRm.write('<svg xmlns="http://www.w3.org/2000/svg" width="' + w +

                 '" height="' + h + '" viewBox="0 0 ' + w + ' ' + h + '">');

       oRm.write('<rect id="' + id  + '_r" width="' + w + '" height="' + h +

                 '" fill="' + bgColor  + '"/>');

       var hh = h - 20;

       oRm.write('<line x1="0" y1="' + hh  + '" x2="' + w + '" y2="' + hh +

                 '" stroke="' + lineColor +

                 '" stroke-width="1" stroke-dasharray="3" ' +

                 'shape-rendering="crispEdges" pointer-events="none"/>');

       oRm.write('<path id="' + id + '_p" stroke="' + pen + '" stroke-width="2" ' +

                 'fill="none" pointer-events="none"/>');

       oRm.write('</svg>');

       oRm.write("</div>");

     },

     clear: function() {

       this.signaturePath = '';

       var p = document.getElementById(this.getId() + '_p');

       p.setAttribute('d', '');

     },

     onAfterRendering: function() {

       var that = this;

       this.signaturePath ='';

       isDown = false;

       var elm = this.$()[0];

       var r = document.getElementById(this.getId() + '_r');

       var p = document.getElementById(this.getId() + '_p');

       function isTouchEvent(e) {

         return e.type.match(/^touch/);

       }

       function getCoords(e) {

         if (isTouchEvent(e)) {

           return e.targetTouches[0].clientX + ',' +

             e.targetTouches[0].clientY;

         }

         return e.clientX + ',' + e.clientY;

       }

       function down(e) {

         that.signaturePath += 'M' + getCoords(e) + ' ';

         p.setAttribute('d', that.signaturePath);

         isDown = true;

         if (isTouchEvent(e)) e.preventDefault();

       }

       function move(e) {

         if (isDown) {

           that.signaturePath += 'L' + getCoords(e) + ' ';

           p.setAttribute('d', that.signaturePath);

         }

         if (isTouchEvent(e)) e.preventDefault();

       }

       function up(e) {

         isDown = false;

         if (isTouchEvent(e)) e.preventDefault();

       }

       r.addEventListener('mousedown', down, false);

       r.addEventListener('mousemove', move, false);

       r.addEventListener('mouseup', up, false);

       r.addEventListener('touchstart', down, false);

       r.addEventListener('touchmove', move, false);

       r.addEventListener('touchend', up, false);

       r.addEventListener('mouseout', up, false); 

       if (this.getSignature()) {

         console.log('asdasda');

         this.signaturePath = this.getSignature();

         var p = document.getElementById(this.getId() + '_p');

         if (p) {

           p.setAttribute('d', this.signaturePath);

         }

       }

       this.setSignature = function(s) {

         this.setProperty('signature', s);

         this.invalidate();

       }

     }

   });

   var oCtrl = new SignaturePad();

   oCtrl.placeAt('content');

   (new sap.m.Button({

     text: 'Clear',

     press: function() {

       prevSignature = oCtrl.getSignature();

       if (prevSignature) {

         undo.setEnabled(true);

       }

       oCtrl.clear();

     }

   })).placeAt('content');

   (new sap.m.Button({

     text: 'Accept',

     press: function() {

       sap.m.MessageToast.show(oCtrl.getSignature());

     }

   })).placeAt('content');

   var prevSignature = null;

   var undo = new sap.m.Button({

     text: 'Undo',

     enabled: false,

     press: function() {

       oCtrl.setSignature(prevSignature);

     }

   });

   undo.placeAt('content');

   oCtrl.setSignature('M48,46 L47,46 L43,46 L42,46 L40,46 L39,46 L38,46 L37,46 L36,46 L36,47 L35,47 L35,48 L35,49 L35,51 L37,51 L38,51 L39,53 L40,54 L42,55 L43,57 L44,57 L44,59 L44,60 L44,61 L43,61 L41,61 L37,61 L34,61 L31,61 L29,61 L28,61 L27,61 L28,61 M49,47 L49,48 L49,49 L49,51 L49,52 L49,54 L49,55 L50,56 L50,58 L50,57 L50,55 L50,54 L50,53 L50,51 L52,51 L52,51 L52,49 L52,48 L53,48 L53,47 L54,47 L54,47 L55,47 L56,47 L57,49 L58,50 L60,51 L60,53 L62,54 L62,55 L63,56 L63,57 L63,58 L63,59 L63,61 L64,61 L64,61 L64,62 M56,57 L57,56 L60,56 L62,55 L63,55 L64,54 L65,54 M69,47 L69,48 L69,49 L69,51 L69,54 L69,55 L69,57 L69,58 L69,60 L69,60 L69,61 M67,45 L67,44 L68,43 L68,43 L71,41 L73,41 L76,41 L77,40 L78,40 L79,40 L80,41 L80,41 L80,42 L80,43 L80,44 L80,44 L80,45 L78,45 L77,46 L75,47 L74,47 L72,49 L72,49 L71,49 L69,49 L68,49 L67,49 M87,41 L87,42 L87,43 L87,44 L87,46 L87,48 L87,49 L87,51 L87,52 L88,53 L88,53 L89,53 L90,54 L91,55 L92,55 L94,55 L95,57 L96,57 L97,57 L98,56 L98,55 L98,54 L99,53 L99,52 L99,50 L99,49 L99,47 L99,46 L99,45 L99,43 L99,43 L99,42 L99,41 L99,40 M107,40 L107,41 L107,42 L107,44 L107,46 L107,49 L107,50 L107,52 L107,52 M121,36 L121,37 L121,38 L121,39 L120,42 L120,43 L120,45 L120,46 L120,47 L120,48 L120,48 L120,47 L122,47 L122,47 L122,45 L124,45 L125,44 L127,44 L130,44 L133,44 L136,45 L139,46 L141,46 L141,47 L141,47 L141,48 L141,50 L139,51 L138,52 L136,53 L133,55 L129,56 L126,56 L123,57 L120,57 L119,57 L117,57 L117,56 M122,38 L122,37 L123,37 L125,36 L130,36 L133,33 L138,32 L142,30 L145,28 L147,28');

 });

3.测试

UI5-技术篇-签字板的更多相关文章

jSignature签字板保存为图片
这是本人的第一篇博客,还不会使用.有些简陋,勿怪! 今天要讲的是使用jquery插件jSignature做一个手写板签字的功能,并将签字笔迹保存为图片. 第一步:环境准备 jquery.jSignat ...
关于ocx中遇到的坑
前言这还是第一次写博客,以前太懒了,现在发现是很有必要记录下这些经验和问题的.最近项目中有个需求(报表单据需要客户签名,连接签字板,把签名单据同步到服务器上),需要和硬件交互,当时硬件商提供了ocx ...
解码Base64,并保存图片至本地
五一去了具有诗情画意的城市---杭州,今天是假期结束后回来上班的第一天,玩饱之后回来,确实精神抖擞了不少; 前段时间开发了有关电子签名的需求,其中有个关于解码Base64图片的知识点,值得关注一下; ...
如何实现Excel多人共享与协作
1.写在前面的话本人从事信息化工作多年,对Excel等电子表格的多人共享与协作接触较早,帮助客户实施的方案也较多,因此有些体会和认识.正好看到网上这方面的讨论较多,但都不完整,我就进一步做了专题调研 ...
ocx控件的坑
前言这还是第一次写博客,以前太懒了,现在发现是很有必要记录下这些经验和问题的.最近项目中有个需求(报表单据需要客户签名,连接签字板,把签名单据同步到服务器上),需要和硬件交互,当时硬件商提供了ocx ...
【CEDEC 2015】【夏日课堂】制作事宜技术篇，新手职员挑战VR Demo开发的真相
日文原文地址 http://www.4gamer.net/games/277/G027751/20150829002/ PS:CEDEC 2015的PPT有些要到10月才有下载,目前的都是记者照片修图 ...
Linux系统中用DNW向ARM开发板下载程序
在Linux下通过dnw来给开发板发送程序.包括驱动程序代码:secbulk.c,应用程序代码:dnw.c.只能运行在32位系统上,在64位系统上提示错误:DNW download Data size ...
[Intel Edison开发板] 05、Edison开发基于MRAA实现IO控制，特别是UART通信
一.前言下面是本系列文章的前几篇: [Intel Edison开发板] 01.Edison开发板性能简述 [Intel Edison开发板] 02.Edison开发板入门 [Intel Edison ...
[Intel Edison开发板] 04、Edison开发基于nodejs和redis的服务器搭建
一.前言 intel-iot-examples-datastore 是Intel提供用于所有Edison开发板联网存储DEMO所需要的服务器工程.该工程是基于nodejs和redis写成的一个简单的工 ...

随机推荐

uploadifive 1.1.2 动态传参
之前用过Flash版本的uploadify,写过一篇关于uploadify动态传参的文章(点击打开链接).后来有了HTML5版本的上传控件,叫uploadifive,测试着用了一下,效果还不错.这里主 ...
chartjs
chartjs是一个图表控件集合,使用html5的canvas进行绘制. 官网:http://www.chartjs.org/ 文档:https://www.chartjs.org/docs/late ...
Win10 LTSC 2019 长期支持版
win 10 LTSB 2016 文件名:cn_windows_10_enterprise_2016_ltsb_x86_dvd_9057089.iso (2.62GB) 语言: Chinese – S ...
几种常见的java网页静态化技术对比
名称优点缺点使用场景 jsp 1.功能强大,可以写java代码 2.支持jsp标签(jsp tag) 3.支持表达式语言(el) 4.官方标准,用户群广,丰富的第三方jsp标签库 5.性能良好. ...
【Linux】宝塔服务器磁盘爆满处理方法
直接上图 1 清理网站日志/php站点session/系统邮件/临时文件 cd /www/server/panel && python tools.pyc clear 2 清空面板回收 ...
获取进程 pid 以及命令参数
方法一: wmic process where name="node.exe" get ProcessId,CommandLine 方法二: tlist -c
plsql 记录型变量
set serveroutput on declare emplist emp%rowtype; begin ; dbms_output.put_line(emplist.ename||'的薪水是'| ...
【linux学习笔记七】关机重启命令
shutdown命令 shutdown [选项] 时间 #-c 取消前一个关机命令 #-h 关机(慎用远程关机) #-r 重启其它关机命令 halt poweroff init 0 其它重启命令 ...
[LeetCode] 687. Longest Univalue Path 最长唯一值路径
Given a binary tree, find the length of the longest path where each node in the path has the same va ...
【VS开发】MFC CListCtrl列表控件的消息响应
MFC里的CListCtrl选中一行,消息是哪个.实在想不起来了.找了一篇文章,比较有用: http://www.cnblogs.com/hongfei/archive/2012/12/25/2832 ...

UI5-技术篇-签字板

UI5-技术篇-签字板的更多相关文章

随机推荐

热门专题