apicloud apicloud

注册
查看: 4520|回复: 11

[APP开发技巧] HTML5密码锁,支持IOS,Android

驾校小白

UID:92003

主题:
6
帖子:
42
云币:
342

APICloud粉丝一周年

[APP开发技巧] HTML5密码锁,支持IOS,Android

4520 11 | 发表于 2015-9-17 13:24:19 |阅读模式 | |
由于官方的模块只支持一个版本,要么是IOS,要么是android,故通过HTML5的画布和Javascript写出:


  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
  5.           name="viewport"/>
  6.     <meta charset="UTF-8">
  7.     <title></title>
  8.     <style type="text/css">
  9.         html, body {
  10.             margin: 0;
  11.             padding: 0;
  12.             width: 100%;
  13.             height: 100%;
  14.         }
  15.     </style>
  16.     <script type="text/javascript">
  17.         var R = 26, CW = 400, CH = 320, OffsetX = 30, OffsetY = 30;
  18.         function CaculateNinePointLotion(diffX, diffY) {
  19.             var Re = [];
  20.             for (var row = 0; row < 3; row++) {
  21.                 for (var col = 0; col < 3; col++) {
  22.                     var Point = {
  23.                         X: (OffsetX + col * diffX + ( col * 2 + 1) * R),
  24.                         Y: (OffsetY + row * diffY + (row * 2 + 1) * R)
  25.                     };
  26.                     Re.push(Point);
  27.                 }
  28.             }
  29.             return Re;
  30.         }
  31.         var PointLocationArr = [];
  32.         window.onload = function () {
  33.             var c = document.getElementById("myCanvas");
  34.             CW = document.body.offsetWidth;
  35.             c.width = CW;
  36.             c.height = CH;
  37.             var cxt = c.getContext("2d");
  38.             //两个圆之间的外距离 就是说两个圆心的距离去除两个半径
  39.             var X = (CW - 2 * OffsetX - R * 2 * 3) / 2;
  40.             var Y = (CH - 2 * OffsetY - R * 2 * 3) / 2;
  41.             PointLocationArr = CaculateNinePointLotion(X, Y);
  42.             InitEvent(c, cxt);
  43.             //CW=2*offsetX+R*2*3+2*X
  44.             Draw(cxt, PointLocationArr, [],null);
  45.         }
  46.         function Draw(cxt, _PointLocationArr, _LinePointArr,touchPoint) {
  47.             if (_LinePointArr.length > 0) {
  48.                 cxt.beginPath();
  49.                 for (var i = 0; i < _LinePointArr.length; i++) {
  50.                     var pointIndex = _LinePointArr[i];
  51.                     cxt.lineTo(_PointLocationArr[pointIndex].X, _PointLocationArr[pointIndex].Y);
  52.                 }
  53.                 cxt.lineWidth = 10;
  54.                 cxt.strokeStyle = "#627eed";
  55.                 cxt.stroke();
  56.                 cxt.closePath();
  57.                 if(touchPoint!=null)
  58.                 {
  59.                     var lastPointIndex=_LinePointArr[_LinePointArr.length-1];
  60.                     var lastPoint=_PointLocationArr[lastPointIndex];
  61.                     cxt.beginPath();
  62.                     cxt.moveTo(lastPoint.X,lastPoint.Y);
  63.                     cxt.lineTo(touchPoint.X,touchPoint.Y);
  64.                     cxt.stroke();
  65.                     cxt.closePath();
  66.                 }
  67.             }
  68.             for (var i = 0; i < _PointLocationArr.length; i++) {
  69.                 var Point = _PointLocationArr[i];
  70.                 cxt.fillStyle = "#627eed";
  71.                 cxt.beginPath();
  72.                 cxt.arc(Point.X, Point.Y, R, 0, Math.PI * 2, true);
  73.                 cxt.closePath();
  74.                 cxt.fill();
  75.                 cxt.fillStyle = "#ffffff";
  76.                 cxt.beginPath();
  77.                 cxt.arc(Point.X, Point.Y, R - 3, 0, Math.PI * 2, true);
  78.                 cxt.closePath();
  79.                 cxt.fill();
  80.                 if(_LinePointArr.indexOf(i)>=0)
  81.                 {
  82.                     cxt.fillStyle = "#627eed";
  83.                     cxt.beginPath();
  84.                     cxt.arc(Point.X, Point.Y, R -16, 0, Math.PI * 2, true);
  85.                     cxt.closePath();
  86.                     cxt.fill();
  87.                 }

  88.             }
  89.         }
  90.         function IsPointSelect(touches,LinePoint)
  91.         {
  92.             for (var i = 0; i < PointLocationArr.length; i++) {
  93.                 var currentPoint = PointLocationArr[i];
  94.                 var xdiff = Math.abs(currentPoint.X - touches.pageX);
  95.                 var ydiff = Math.abs(currentPoint.Y - touches.pageY);
  96.                 var dir = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
  97.                 if (dir < R ) {
  98.                     if(LinePoint.indexOf(i) < 0){ LinePoint.push(i);}
  99.                     break;
  100.                 }
  101.             }
  102.         }
  103.         function InitEvent(canvasContainer, cxt) {
  104.             var LinePoint = [];
  105.             canvasContainer.addEventListener("touchstart", function (e) {
  106.                 IsPointSelect(e.touches[0],LinePoint);
  107.             }, false);
  108.             canvasContainer.addEventListener("touchmove", function (e) {
  109.                 e.preventDefault();
  110.                 var touches = e.touches[0];
  111.                 IsPointSelect(touches,LinePoint);
  112.                 cxt.clearRect(0,0,CW,CH);
  113.                 Draw(cxt,PointLocationArr,LinePoint,{X:touches.pageX,Y:touches.pageY});
  114.             }, false);
  115.             canvasContainer.addEventListener("touchend", function (e) {
  116.                 cxt.clearRect(0,0,CW,CH);
  117.                 Draw(cxt,PointLocationArr,LinePoint,null);
  118.                 alert("密码结果是:"+LinePoint.join("->"));
  119.                 LinePoint=[];
  120.             }, false);
  121.         }
  122.     </script>
  123. </head>
  124. <body>
  125. <canvas id="myCanvas"></canvas>
  126. </body>
  127. </html>
复制代码


本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

2

查看全部评分

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

发表于 2015-9-18 12:20:04 |
感谢分享

主题:
74
帖子:
4759
云币:
506

足球狗狗年旺旺旺APICloud粉丝连续签到100天APICloud毕业勋章APICloud骨灰粉模块开发者签到党土豪志愿者一周年中秋节社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人SB侠

发表于 2015-9-17 13:34:13 |
66666666666666666

新手上路

UID:157547

主题:
31
帖子:
105
云币:
150
发表于 2015-9-18 11:28:32 |
楼主学习过面向对象么?可以封装成类或者模块 你写成这样只是展示一下么

主题:
1115
帖子:
5318
云币:
2147212798

圣诞节捣蛋鬼APICloud大会专属勋章足球狗儿童节快乐

发表于 2015-10-8 09:52:31 |
感谢分享

新手上路

UID:18395

主题:
11
帖子:
65
云币:
582
发表于 2015-10-12 22:34:55 |
先收藏,慢慢学习

主题:
19
帖子:
56
云币:
294
发表于 2016-2-4 04:12:08 |
一个字,骚!

主题:
11
帖子:
40
云币:
70
发表于 2016-2-4 16:29:54 |
mark---

主题:
15
帖子:
95
云币:
152
发表于 2016-2-15 09:56:34 |
赞赞。。。。。

实习司机

UID:171669

主题:
38
帖子:
97
云币:
198
发表于 2016-2-15 09:57:49 |
so good , thx!
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表