[自用]apiCloud结合canvas手机端手势密码

首先解锁页面不能被安卓的返回按键干掉,需要监听返回按钮,

apiCloud提供的

apiready = function() {
    api.addEventListener({
        name: 'keyback'
    }, function(ret, err) {

    });
}

方法可以实现,在function里不写任何操作即可实现,

注:侧方法只能在apiCloud的

api.openWin({
    'name': '手势密码',
    'url': '/app/route/gestureCipher/'
});

方法打开的页面才能实现监听

其次是用canvas绘制手势密码的问题,在高清屏幕上,canvas会模糊,解决方案就是将canvas放大(网上的css3缩小的方法不管用!)

用的自修改后的jquery.gesture.password插件,

启动函数的传入的宽度*2

var width = $('body').width()*0.9*2;
$("#gesturepwd").GesturePasswd({
    roundRadii: (width/10),    //圆点的半径
    pointRadii:(width/10), //圆点被选中后的半径显示
    space: (width/7.5), //圆点之间的距离
    width:width,   //整个组件的宽度
    height:width,  //整个组件的高度
    zindex :1  //整个组件的css z-index属性
});

然后修改jquery.gesture.password插件以下部分

1.由于canvas放大了,所以包裹的容器需要overflow:hidden,并限制其大小,做到高度和宽度一直,实现方法是height:0,padding-bottom:100%,

//全局样式
this.$element.css({
    "position": "relation",
    "width": this.options.width,
    "height": 0,
    "padding-bottom": "100%",
    "background-color": options.backgroundColor,
    "overflow": "hidden",
    "cursor": "default"
});

2.在绘制的时候放大canvas

this.$element.append('<canvas class="main-c" width="' + options.width*2 + '" height="' + options.height*2 + '" style="width:' + options.width + 'px; height: ' + options.height + ' px;">');

3.所有清除画布的地方面积*2

that.$ctx.clearRect(0, 0, that.options.width*2, that.options.height*2); //清空画布

4.由于canvas放大了,里面的内容还是原来大小,所以touchmove的事件改变

if(e.data.that.touched) {
    var x = e.pageX*2 || e.originalEvent.targetTouches[0].pageX*2;
    var y = e.pageY*2 || e.originalEvent.targetTouches[0].pageY*2;
    //x = x - that.$element.offset().left;
    //y = y - that.$element.offset().top;
    x = x - (that.$element.offset().left*2);
    y = y -  (that.$element.get(0).offsetTop*2);
    var p = e.data.that.isIn(x, y);
    if(p != 0) {
        if(!e.data.that.pointInList(p, e.data.that.sList)) {
            e.data.that.sList.push(p);
        }
    }
    e.data.that.draw(x, y);
}

最后逻辑上在开启app也需要输入手势密码

由于没有在apiCloud上找到相关api所以自己去通过 sessionStorage 去判断即可

ios上用openWin打开的网页存在滑动后退效果

加上

api.openWin({
    'name': '手势密码',
    'url': '/app/route/gestureCipher/',
    'slidBackEnabled': false
});

slidBackEnabled: false即可

其次

[自用]apiCloud结合canvas手机端手势密码

猜你喜欢