UI5-技术篇-签字板

发布时间：2020-12-15 08:23:47 所属栏目：Java 来源：网络整理

导读：签字板应用是通过创建自定义控件实现的，相关代码如下： 1.HTML 1 ! DOCTYPE HTML 2 html 3 head 4 5 meta http-equiv ="X-UA-Compatible" content ="IE=edge" / 6 7 script id ="sap-ui-bootstrap" 8 type ="text/javascript" 9 data-sap-ui-libs ="sap.m"

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

1.HTML

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 
 7 <script id="sap-ui-bootstrap" 
 8     type="text/javascript"
 9     data-sap-ui-libs="sap.m"
10     data-sap-ui-theme="sap_bluecrystal"       
11     src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"></script>
12 
13 </head>
14 <body class="sapUiBody">
15   <div id="content"></div>
16 </body>

2.Javascript

  1 jQuery(function() {
  2   sap.ui.core.Control.extend(‘SignaturePad‘,{
  3     metadata: {
  4       properties: {
  5         width: {type: ‘int‘,defaultValue: 300},  6         height: {type: ‘int‘,defaultValue: 100},  7         bgcolor: {type: ‘string‘,defaultValue: ‘#ffa‘},  8         lineColor: {type: ‘string‘,defaultValue: ‘#666‘},  9         penColor: {type: ‘string‘,defaultValue: ‘#333‘}, 10         signature: ‘string‘
 11       }
 12     }, 13     
 14     renderer: function(oRm,oControl) {
 15       var bgColor = oControl.getBgcolor();
 16       var lineColor = oControl.getLineColor();
 17       var pen = oControl.getPenColor();
 18       var id = oControl.getId();
 19       var w = oControl.getWidth();
 20       var h = oControl.getHeight();
 21       oRm.write("<div");
 22       oRm.writeControlData(oControl);
 23       oRm.write(">");
 24       oRm.write(‘<svg xmlns="http://www.w3.org/2000/svg" width="‘ + w +
 25                 ‘" height="‘ + h + ‘" viewBox="0 0 ‘ + w + ‘ ‘ + h + ‘">‘);
 26       
 27       oRm.write(‘<rect id="‘ + id  + ‘_r" width="‘ + w + ‘" height="‘ + h + 
 28                 ‘" fill="‘ + bgColor  + ‘"/>‘);
 29       
 30       var hh = h - 20;
 31       oRm.write(‘<line x1="0" y1="‘ + hh  + ‘" x2="‘ + w + ‘" y2="‘ + hh + 
 32                 ‘" stroke="‘ + lineColor + 
 33                 ‘" stroke-width="1" stroke-dasharray="3" ‘ + 
 34                 ‘shape-rendering="crispEdges" pointer-events="none"/>‘);
 35       
 36       oRm.write(‘<path id="‘ + id + ‘_p" stroke="‘ + pen + ‘" stroke-width="2" ‘ +
 37                 ‘fill="none" pointer-events="none"/>‘);
 38       oRm.write(‘</svg>‘);
 39       oRm.write("</div>");
 40     }, 41     
 42     clear: function() {
 43       this.signaturePath = ‘‘;
 44       var p = document.getElementById(this.getId() + ‘_p‘);
 45       p.setAttribute(‘d‘,‘‘);
 46     }, 47     
 48     onAfterRendering: function() {
 49       var that = this;
 50       this.signaturePath =‘‘;
 51       isDown = false;
 52       var elm = this.$()[0];
 53       var r = document.getElementById(this.getId() + ‘_r‘);
 54       var p = document.getElementById(this.getId() + ‘_p‘);
 55 
 56       function isTouchEvent(e) {
 57         return e.type.match(/^touch/);
 58       }
 59 
 60       function getCoords(e) {
 61         if (isTouchEvent(e)) {
 62           return e.targetTouches[0].clientX + ‘,‘ +
 63             e.targetTouches[0].clientY;
 64         }
 65         return e.clientX + ‘,‘ + e.clientY;
 66       }
 67 
 68       function down(e) {
 69         that.signaturePath += ‘M‘ + getCoords(e) + ‘ ‘;
 70         p.setAttribute(‘d‘,that.signaturePath);
 71         isDown = true;
 72         if (isTouchEvent(e)) e.preventDefault();
 73       }
 74 
 75       function move(e) {
 76         if (isDown) {
 77           that.signaturePath += ‘L‘ + getCoords(e) + ‘ ‘;
 78           p.setAttribute(‘d‘,that.signaturePath);
 79         }
 80         if (isTouchEvent(e)) e.preventDefault();
 81       }
 82 
 83       function up(e) {
 84         isDown = false; 
 85         if (isTouchEvent(e)) e.preventDefault();
 86       }
 87 
 88       r.addEventListener(‘mousedown‘,down,false);
 89       r.addEventListener(‘mousemove‘,move,false);
 90       r.addEventListener(‘mouseup‘,up,false);
 91       r.addEventListener(‘touchstart‘,false);
 92       r.addEventListener(‘touchmove‘,false);
 93       r.addEventListener(‘touchend‘,false);
 94       r.addEventListener(‘mouSEOut‘,false); 
 95       
 96       if (this.getSignature()) {
 97         console.log(‘asdasda‘);
 98         this.signaturePath = this.getSignature();
 99         var p = document.getElementById(this.getId() + ‘_p‘);
100         if (p) {
101           p.setAttribute(‘d‘,this.signaturePath);
102         }
103       }
104       
105       this.setSignature = function(s) {
106         this.setProperty(‘signature‘,s);
107         this.invalidate();
108       }
109     }
110   });
111 
112   var oCtrl = new SignaturePad();
113   oCtrl.placeAt(‘content‘);
114   
115   (new sap.m.Button({
116     text: ‘Clear‘,117     press: function() {
118       prevSignature = oCtrl.getSignature();
119       if (prevSignature) {
120         undo.setEnabled(true);
121       }
122       oCtrl.clear();
123     }
124   })).placeAt(‘content‘);
125   
126   (new sap.m.Button({
127     text: ‘Accept‘,128     press: function() {
129       sap.m.MessageToast.show(oCtrl.getSignature());
130     }
131   })).placeAt(‘content‘);
132   
133   var prevSignature = null;
134   
135   var undo = new sap.m.Button({
136     text: ‘Undo‘,137     enabled: false,138     press: function() {
139       oCtrl.setSignature(prevSignature);
140     }
141   });
142   undo.placeAt(‘content‘);
143   
144   oCtrl.setSignature(‘M48,46 L47,46 L43,46 L42,46 L40,46 L39,46 L38,46 L37,46 L36,47 L35,48 L35,49 L35,51 L37,51 L38,51 L39,53 L40,54 L42,55 L43,57 L44,59 L44,60 L44,61 L43,61 L41,61 L37,61 L34,61 L31,61 L29,61 L28,61 L27,61 M49,47 L49,48 L49,49 L49,51 L49,52 L49,54 L49,55 L50,56 L50,58 L50,57 L50,54 L50,53 L50,51 L52,49 L52,48 L53,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,62 M56,57 L57,56 L60,56 L62,55 L64,54 L65,54 M69,47 L69,48 L69,49 L69,51 L69,54 L69,55 L69,57 L69,58 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,42 L80,43 L80,44 L80,45 L78,45 L77,46 L75,47 L74,47 L72,49 L72,49 L71,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,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,47 L122,45 L124,45 L125,44 L127,44 L130,44 L133,44 L136,45 L139,46 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,56 M122,38 L122,37 L123,37 L125,36 L130,36 L133,33 L138,32 L142,30 L145,28 L147,28‘);
145 });

3.测试

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!