UI5-技术篇-签字板

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

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‘, down, false);
 92       r.addEventListener(‘touchmove‘, move, false);
 93       r.addEventListener(‘touchend‘, up, false);
 94       r.addEventListener(‘mouseout‘, up, 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,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‘);
145 });

3.测试

原文地址:https://www.cnblogs.com/ricoo/p/11347715.html

时间: 08-13

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

制作SD(8G)卡Linux镜像,使得ZC706开发板可以从SD卡启动进入Linux系统

转自网络,供学习记录使用,红色部分是我实验时,这篇文章和网站稍有出入的地方. 目的:制作SD(8G)卡Linux镜像,使得ZC706开发板可以从SD卡启动进入Linux系统 在http://wiki.analog.com/resources/eval/user-guides/ad-fmcomms2-ebz/quickstart/zynq(姑且把这个链接成为链接1吧)链接中找到 图1 点击绿色字体的链接,下载镜像原始文件.这里有不同时期的版本,本说明中选择 图2 下载的原始文件为:2014_R2-

Firefly-RK3288开发板Android编译环境搭建开荒

入手了Firefly-RK3288的开发板,自己从零开始搭建编译环境开荒 第一步:安装Ubuntu12.04,使用安装盘安装(安装的过程就不详写了,下面贴图) 安装完后,更新ubuntu 第二步:从官网上下载SDK,进行编译环境的安装 下载SDK有两种方式,一是下载压缩包,二是通过git下载. 我选择了下载压缩包.SDK百度云下载地址:http://pan.baidu.com/s/1eQjBGQI?qq-pf-to=pcqq.c2c 在等待代码下载完成的同时,开始按照官方的步骤进行环境安装.为了

使用Visual Studio快速开发STM32F4-Discovery探索板入门

本本将主要介绍如何使用Visual Studio创建一个基于STM32F4-Discovery探索板的简单工程. 本文使用以下硬件和软件: ●      Microsoft Visual Studio ●      VisualGDB ●      STM32F4-Discovery探索板 我们将创建一个简单的“LED闪烁”的工程,然后进行构建,并使用调试器进行单步调试. 1.    启动Visual Studio.选择File-> New-> Project. 2.    选择VisualG

在STM32F746G-DISCO开发板上使用Nabto + FreeRTOS的演示热泵应用

当使用STM32 ARM Cortex-M微控制器时,ST的免费嵌入式软件STM32Cube提供了所有必要的驱动程序和中间件组件,以减少初始的开发工作.在上述提到的中间件组件中,其中一个是非常受欢迎的FreeRTOS实时操作系统,Nabto正在努力建立一个强大的FreeRTOS + Nabto组合的解决方案. 我们最新推出AppMyProduct应用平台可帮助您快速开发远程控制设备的高质量应用程序.本文介绍了在STM32F746G-DISCO开发板上使用Nabto + FreeRTOS的演示热泵

为LPC1549 LPCXpresso评估板开发基于mbed的项目

本文将主要介绍如何使用Visual Studio和VisualGDB为LPC1549 LPCXpresso开发板创建一个使用mbed框架的基础项目. LPC1549 LPCXpresso开发板载一个LPC-Link调试器,可用于调试板载的固件. 为了能够从VisualGDB调试该开发板,我们将从Segger下载并安装一个特殊的固件,使其与Segger J-Link软件和VisualGDB兼容. 1.  在开始之前,请先从恩智浦网站下载并安装LPCScrypt软件. 2.  将LPCXpresso

arm方案商,三星解决方案S5P4418核心板

产品简介 G4418开发平台采用邮票孔的核心板+底板方式设计,核心板可扩展性强,多达 184 PIN 管脚,运行速度高达 1.4GHz.PCB 采用 8 层沉金工艺设计,具有最佳的电气特性和抗干扰特性,工作稳定可靠.核心板板载了 PMU,带库仑计的充电管理,可以广泛应用于 MID,POS,PDA,PND,智能家居,手机,车机,学习机,游戏机以及其他各种工控领域. S5P4418 采用 28nm 制作工艺,内置高性能 4 核 A9 ARM 架构,相比 Exynos4412, 在多媒体性能上,它几乎

arm核心板,三星方案商S5P4418工控产品

产品简介 Gbox4418卡片电脑尺寸,差不多只是G4418开发板的三分之一,但它的功能相对于G4418开发板是有过之而无不及,几乎包括了G4418开发板所有外设功能,而且还板载VGA,USB WIFI/BT二合一模块,等: 软件上,Gbox4418和G4418开发板几乎完全兼容,无需做过多修改. 硬件上,Gbox4418和Gbox6818完全兼容,只需更换CPU,即可将A9四核升级到A53八核,方便客户升级自己产品. Gbox4418卡片电脑非常适合无需其他行业外设扩展的领域,如工控,电力,通

三星八核RP6818开发板开发过程中错误程序判断

在咨询技术支持时,最好先和技术人员说清楚:使用平台.操作系统.之前是否正常.软硬件有和改动. Q:我用的三星八核RP6818开发板,现在总跳这个什么意思? A:你装了其他应用吗? Q:装了 . 也装我们自己开发的程序. A:没装之前有没有, 卸载再看看. Q:之前好像没有 A:卸载完后,再wipe data. 然后同步sync, 再重启, 然后一个个应用装, 看是哪个造成的,再具体找. Q:好的.

第八章 让开发板发出声音:蜂鸣器驱动

这一章的主要内容是让开发板发出声音——蜂鸣器驱动,在Linux驱动开发中重点也学习了这一部分内容,同时最后我们小组的考核内容是通过中断控制蜂鸣器发七个音符的音. 这一部分中,要中断控制蜂鸣器,在中断和蜂鸣器代码的基础上进行增加.中断与蜂鸣器的代码不变,在中断的测试代码中,首先要定义七个音符,之后将开发板上的七个键与七个音符相连接,再将七个音符的转换与蜂鸣器相连接,来达到所需的效果. 核心代码: int main() { int fd,fd1; int div; int keyval; fd1 =

嵌入式 hi3518c裸板uboot烧写、kernel烧写、fs烧写小结

1.在uboot中我可以添加自己的命令,添加的方法是找到一个uboot的命令,然后模仿着去增加属于自己的命令代码以及实现函数就可以 2.记住在使用printf进行调试的时候,在遇到指针或者字符串的时候最好使用“%x”,以为我不知道指针或者字符串中是否包含不可见字符,如果有不可见字符会导致错误,而且错误不好查找 3.对于uboot中的环境变量,其实是放在uboot里面的,也就是环境变量占用的是uboot的空间,如果不需要去实时修改环境变量的值那么就可以不用env这个分区:但是如果需要修改环境变量,