HTML5实现屏幕手势解锁,swift下实现手势解锁

用 canvas 落成 Web 手势解锁

2017/04/04 · HTML5 ·
Canvas

原稿出处: songjz   

近来列席 360 暑假的前端星布置,有3个在线作业,结束日期是 3 月 30
号,让手动实现一个 H5 手势解锁,具体的职能就好像原生手提式有线电话机的九宫格解锁那样。

新萄京娱乐场8309 1

落到实处的末尾效果就好像下边那张图那样:

新萄京娱乐场8309 2

主导供给是那般的:将密码保存到 localStorage
里,初阶的时候会从本土读取密码,即使没有就让用户设置密码,密码最少为六位数,少于七个人要升迁错误。需求对第②次输入的密码进行认证,一次一样才能保持,然后是评释密码,能够对用户输入的密码进行表达。

支付宝登陆界面(手势解锁的兑现),手势解锁

 //1.下边是落到实处的步骤,基本上下边包车型大巴诠释应该都写清楚了,感激大牌们教导,借使必要质地和源工程文件,能够索要,谢谢帮衬☺

 //2.在最上面附有效果图

#import “ViewController.h”

#import “FFFGestureView.h”

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIImageView *smallView;

@property (weak, nonatomic) IBOutlet FFFGestureView *gestureView;

@end

@implementation ViewController

– (void)viewDidLoad {

    [super viewDidLoad];

    self.view.backgroundColor = [UIColor
colorWithPatternImage:[UIImage imageNamed:@”Home_refresh_bg”]];

    self.gestureView.myblock = ^(UIImage *image,NSString *pass){

        NSString *turePass = @”012″;

        if([pass isEqualToString:turePass]){

            self.smallView.image = nil;

            return YES;

        }else{

            self.smallView.image = image;

            return NO;

        }

    };

}

***************************************************************************

#import <UIKit/UIKit.h>

@interface FFFGestureView : UIView

@property (nonatomic,copy) BOOL(^myblock)(UIImage *,NSString *);

@end

***************************************************************************

#import “FFFGestureView.h”

#import “SVProgressHUD.h”

#define SUMCOUNT 9

@interface FFFGestureView ()

//定义可变数组加载需求的button

@property (nonatomic,strong) NSArray *buttons;

//设置数组接收画的线

@property (nonatomic,strong) NSMutableArray *lineButton;

//定义一个点,保存手指当前的职位

@property(nonatomic,assign) CGPoint currentPoint;

@end

 

@implementation FFFGestureView

 

-(NSMutableArray *)lineButton{

    if(_lineButton==nil){

        _lineButton = [新萄京娱乐场8309,NSMutableArray array];

    }

    return _lineButton;

}

 

//懒加载button

-(NSArray *)buttons{

    if(_buttons==nil){

        NSMutableArray *arrayM = [NSMutableArray array];

        for(int i=0;i<SUMCOUNT;i++){

            

            UIButton *button = [[UIButton alloc] init];

            button.tag = i;

//            button.backgroundColor = [UIColor redColor];

            [button setUserInteractionEnabled:NO];

            

            [button setBackgroundImage:[UIImage
imageNamed:@”gesture_node_normal”] forState:UIControlStateNormal];

            [button setBackgroundImage:[UIImage
imageNamed:@”gesture_node_highlighted”]
forState:UIControlStateHighlighted];

            [button setBackgroundImage:[UIImage
imageNamed:@”gesture_node_error”] forState:UIControlStateSelected]HTML5实现屏幕手势解锁,swift下实现手势解锁。;

            

            [self addSubview:button];

            [arrayM addObject:button];

        }

        _buttons = [arrayM copy];

    }

    return _buttons;

}

 

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

 

//    获取touch对象

    UITouch *touch = [touches anyObject];

//    获取点击的点

    CGPoint point = [touch locationInView:touch.view];

    

//    遍历全部的按钮

    for(int i=0;i<self.buttons.count;i++){

    

        UIButton *button = self.buttons[i];

//        按钮的frame是或不是含有了点击的点

        if(CGRectContainsPoint(button.frame, point)){

//        开头高亮状态

            button.highlighted = YES;

            

//            判断这几个按钮是不是一度添加到了数组个中,借使没有在添加

            if(![self.lineButton containsObject:button]){

            

                [self.lineButton addObject:button];

            }

        }

    }

}

 

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{

    //    获取touch对象

    UITouch *touch = [touches anyObject];

    //    获取点击的点

    CGPoint point = [touch locationInView:touch.view];

    

    //    获取活动的时候手指地方

    self.currentPoint = point;

 

    //    遍历全部的按钮

    for(int i=0;i<self.buttons.count;i++){

        

        UIButton *button = self.buttons[i];

        //        按钮的frame是或不是含有了点击的点

        if(CGRectContainsPoint(button.frame, point)){

            //        初始高亮状态

            button.highlighted = YES;

//            判断那几个按钮是或不是曾经添加到了数组个中,假诺没有在加上

            if(![self.lineButton containsObject:button]){

                

                [self.lineButton addObject:button];

            }

        }

    }

    [self setNeedsDisplay];

}

 

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{

 

//    化解错误的时候,最终手指的职分不再三再四

    self.currentPoint = [[self.lineButton lastObject] center];

    [self setNeedsDisplay];

    

    for (int i=0; i<self.lineButton.count; i++) {

        UIButton *button = self.lineButton[i];

        button.selected = YES;

        button.highlighted = NO;

    }

//    在回复在此之前无法展开连线

    [self setUserInteractionEnabled:NO];

    

    NSString *passWord = @””;

    for (int i=0; i<self.lineButton.count; i++) {

        //        拼接按钮的tag

        passWord = [passWord stringByAppendingString:[NSString
stringWithFormat:@”%ld”,[self.lineButton[i] tag]]];

    }

    

//    输出当前VIew作为image

    UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 0);

//    获取上下文

    CGContextRef ctx = UIGraphicsGetCurrentContext();

//    渲染

    [self.layer renderInContext:ctx];

//    通过上下文获取图片

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

//    关闭上下文

    UIGraphicsEndImageContext();

    

    if(self.myblock){

        if(self.myblock(image,passWord)){

            [SVProgressHUD showSuccessWithStatus:@”密码正确”];

        }else{

            [SVProgressHUD showErrorWithStatus:@”密码错误”];

        }

    }

//    展现错误的样式 1分钟

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 *
NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

//        苏醒之后再把用户交互打开

        [self setUserInteractionEnabled:YES];

        [self clearScreen];

    });

}

 

-(void)clearScreen{

    [self.lineButton removeAllObjects];

    for (int i=0; i<self.buttons.count ; i++) {

        UIButton *button = self.buttons[i];

        button.highlighted = NO;

        button.selected = NO;

    }

//    恢复生机原来状态

    [self setNeedsDisplay];

}

-(void)drawRect:(CGRect)rect{

 

//    成立路径对象

    UIBezierPath *path = [UIBezierPath bezierPath];

    

    for(int i=0;i<self.lineButton.count;i++){

        if(i==0){

            [path moveToPoint:[self.lineButton[i] center]];

        }else{

            [path addLineToPoint:[self.lineButton[i] center]];

        }

    }

    if(self.lineButton.count){

//     连接到手指的职位

        [path addLineToPoint:self.currentPoint];

    }

//    设置颜色

    [[UIColor redColor] set];

    

//    设置线宽

    path.lineWidth = 10;

    

//    设置连接处的体裁

    [path setLineJoinStyle:kCGLineJoinRound];

    

//    设置头尾的体制

    [path setLineCapStyle:kCGLineCapRound];

    

//    渲染

    [path stroke];

}

-(void)layoutSubviews{

    

    [super layoutSubviews];

    

    CGFloat w = 74;

    CGFloat h = w;

    CGFloat margin = (self.frame.size.width-3*w)/4;

    

    for(int i=0;i<self.buttons.count;i++){

    

        UIButton *button = self.buttons[i];

        CGFloat row = i % 3;

        CGFloat col = i / 3;

        CGFloat x = row * (margin + w) + margin;

        CGFloat y = col * (margin + h) + margin;

        button.frame = CGRectMake(x, y, w, h);

    }

}

@end

 

新萄京娱乐场8309 3

 

新萄京娱乐场8309 4

//1.上面是促成的步调,基本上上边包车型地铁评释应该都写清楚了,谢谢大咖们辅导,借使急需素材…

发散

明亮手势生命周期能够实现类似 水果忍者,还有笔画的功用

  //
  //  LockGestureView.swift
  //  手势解锁swift
  //
  //  Created by lotawei on 16/12/8.
  //  Copyright © 2016年 lotawei. All rights reserved.
  //

  import UIKit
  import CoreGraphics



  class LockGestureView: UIView {
     private let   imgsize = 50
      private  var   pawd:String!
     private var   rowcount = 3
       var  back:UIImage {
          return  #imageLiteral(resourceName: "back_bg.png")
      }
      var btns: [UIButton]! = [UIButton]()

 override init(frame: CGRect) {
    super.init(frame: frame)
    backgroundColor = #colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1)
    initialview()
}
convenience init(frame: CGRect, _ row:Int,_ pwd:String!) {
    self.init(frame:frame)
    self.rowcount = row
    self.pawd = pwd

}
func initialview(){
    //布局

    let    xpadding = (Int( self.bounds.size.width) - 3 * imgsize) / 4 //  计算一个横间距
    let    ypadding =  (Int( self.bounds.size.height) - (rowcount ) * imgsize) / (rowcount + 1)
    var   x = 0
    var   y = 0
    for  i in 0  ..< rowcount * 3  {
        let   btn = UIButton()
        btn.isSelected  = false
        btn.setImage(#imageLiteral(resourceName: "gesture_node_highlighted"), for: .selected)
        btn.setImage(#imageLiteral(resourceName: "gesture_node_highlighted"), for: .highlighted)
        btn.setImage(#imageLiteral(resourceName: "gesture_node_normal"), for: .normal)
        // 并设置一个tag
         btn.tag = i
        addSubview(btn)
        btn.isUserInteractionEnabled = false
        x=xpadding*((i%3)+1)+imgsize*(i%3)
        y=ypadding*((i/rowcount)+1)+imgsize*(i/rowcount)
        btn.frame = CGRect(x: x, y: y, width: imgsize, height: imgsize)

    }

}
required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    let  touch = touches.first  //
    let  point  = touch?.location(in: self)

    for    abtn in self.subviews{
        let  btn = abtn  as!  UIButton
        //表示滑动的时候这个矩形框是否包含这个点
        if btn.frame.contains(point!) {
            if btn.isSelected == false  {
                if !btns.contains(btn) {
                      btns.append(btn)
                }

                setNeedsDisplay()

            }
            btn.isSelected = true
        }
    }
}



override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {


    //自定义视图如果设置交互为false默认会向俯视图传递响应莲  因此  解决方式  hittest

    var   result = ""
    for  btn  in btns{

        if btn.isSelected {
            result  +=  "\(btn.tag)"

              print(result)
        }
        btn.isSelected = false



    }


    if (result == self.pawd) {


        print("解锁成功!")


    }
    self.btns.removeAll()

    setNeedsDisplay()


}

// 重写draw方法
override func draw(_ rect: CGRect) {
    let  cout = self.btns.count
    let   path = UIBezierPath()
    for  i in 0..<cout {
        let  point  = self.btns[i].center
        if i == 0 {
            path.move(to: point)
        }
        else{
            path.addLine(to: point)
        }
    }
    UIColor.blue.setStroke()//画笔颜色
    path.lineWidth   =  3
    path.stroke()
}
  }

HTML5兑现荧屏手势解锁

2015/07/18 · HTML5 · 1
评论 ·
手势解锁

初稿出处:
AlloyTeam   

效用呈现

新萄京娱乐场8309 5

贯彻原理 利用HTML5的canvas,将解锁的层面划出,利用touch事件解锁这一个规模,直接看代码。

JavaScript

function createCircle() {//
成立解锁点的坐标,依照canvas的尺寸来平均分配半径 var n = chooseType;//
画出n*n的矩阵 lastPoint = []; arr = []; restPoint = []; r =
ctx.canvas.width / (2 + 4 * n);// 公式总结 半径和canvas的轻重缓急有关 for
(var i = 0 ; i < n ; i++) { for (var j = 0 ; j < n ; j++) {
arr.push({ x: j * 4 * r + 3 * r, y: i * 4 * r + 3 * r });
restPoint.push({ x: j * 4 * r + 3 * r, y: i * 4 * r + 3 * r }); }
} //return arr; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function createCircle() {// 创建解锁点的坐标,根据canvas的大小来平均分配半径
 
        var n = chooseType;// 画出n*n的矩阵
        lastPoint = [];
        arr = [];
        restPoint = [];
        r = ctx.canvas.width / (2 + 4 * n);// 公式计算 半径和canvas的大小有关
        for (var i = 0 ; i < n ; i++) {
            for (var j = 0 ; j < n ; j++) {
                arr.push({
                    x: j * 4 * r + 3 * r,
                    y: i * 4 * r + 3 * r
                });
                restPoint.push({
                    x: j * 4 * r + 3 * r,
                    y: i * 4 * r + 3 * r
                });
            }
        }
        //return arr;
    }

canvas里的圈子画好之后方可拓展事件绑定

JavaScript

function bindEvent() { can.addEventListener(“touchstart”, function (e) {
var po = getPosition(e); console.log(po); for (var i = 0 ; i <
arr.length ; i++) { if (Math.abs(po.x – arr[i].x) < r &&
Math.abs(po.y – arr[i].y) < r) { // 用来判断早先点是还是不是在规模内部
touchFlag = true; drawPoint(arr[i].x,arr[i].y);
lastPoint.push(arr[i]); restPoint.splice(i,1); break; } } }, false);
can.addEventListener(“touchmove”, function (e) { if (touchFlag) {
update(getPosition(e)); } }, false); can.addEventListener(“touchend”,
function (e) { if (touchFlag) { touchFlag = false; storePass(lastPoint);
setTimeout(function(){ init(); }, 300); } }, false); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function bindEvent() {
        can.addEventListener("touchstart", function (e) {
             var po = getPosition(e);
             console.log(po);
             for (var i = 0 ; i < arr.length ; i++) {
                if (Math.abs(po.x – arr[i].x) < r && Math.abs(po.y – arr[i].y) < r) { // 用来判断起始点是否在圈圈内部
 
                    touchFlag = true;
                    drawPoint(arr[i].x,arr[i].y);
                    lastPoint.push(arr[i]);
                    restPoint.splice(i,1);
                    break;
                }
             }
         }, false);
         can.addEventListener("touchmove", function (e) {
            if (touchFlag) {
                update(getPosition(e));
            }
         }, false);
         can.addEventListener("touchend", function (e) {
             if (touchFlag) {
                 touchFlag = false;
                 storePass(lastPoint);
                 setTimeout(function(){
 
                    init();
                }, 300);
             }
 
         }, false);
    }

进而到了最重庆大学的步骤绘制解锁路径逻辑,通过touchmove事件的随处触发,调用canvas的moveTo方法和lineTo方法来画出折现,同时判断是不是达到规定的标准大家所画的范畴里面,当中lastPoint保存不易的规模路径,restPoint保存全体规模去除正确路线之后剩余的。
Update方法:

JavaScript

function update(po) {// 主题转移方式在touchmove时候调用 ctx.clearRect(0,
0, ctx.canvas.width, ctx.canvas.height); for (var i = 0 ; i <
arr.length ; i++) { // 每帧先把面板画出来 drawCle(arr[i].x,
arr[i].y); } drawPoint(lastPoint);// 每帧花轨迹 drawLine(po ,
lastPoint);// 每帧画圆心 for (var i = 0 ; i < restPoint.length ; i++)
{ if (Math.abs(po.x – restPoint[i].x) < r && Math.abs(po.y –
restPoint[i].y) < r) { drawPoint(restPoint[i].x,
restPoint[i].y); lastPoint.push(restPoint[i]); restPoint.splice(i,
1); break; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function update(po) {// 核心变换方法在touchmove时候调用
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 
        for (var i = 0 ; i < arr.length ; i++) { // 每帧先把面板画出来
            drawCle(arr[i].x, arr[i].y);
        }
 
        drawPoint(lastPoint);// 每帧花轨迹
        drawLine(po , lastPoint);// 每帧画圆心
 
        for (var i = 0 ; i < restPoint.length ; i++) {
            if (Math.abs(po.x – restPoint[i].x) < r && Math.abs(po.y – restPoint[i].y) < r) {
                drawPoint(restPoint[i].x, restPoint[i].y);
                lastPoint.push(restPoint[i]);
                restPoint.splice(i, 1);
                break;
            }
        }
 
    }

末段正是结束工作,把路子里面包车型客车lastPoint保存的数组变成密码存在localstorage里面,之后就用来拍卖解锁验证逻辑了

JavaScript

function storePass(psw) {// touchend截至以后对密码和情景的处理 if
(pswObj.step == 1) { if (checkPass(pswObj.fpassword, psw)) { pswObj.step
= 2; pswObj.spassword = psw; document.getElementById(‘title’).innerHTML
= ‘密码保存成功’; drawStatusPoint(‘#2CFF26’);
window.localStorage.setItem(‘passwordx’,
JSON.stringify(pswObj.spassword));
window.localStorage.setItem(‘chooseType’, chooseType); } else {
document.getElementById(‘title’).innerHTML = ‘四遍不等同,重新输入’;
drawStatusPoint(‘red’); delete pswObj.step; } } else if (pswObj.step ==
2) { if (checkPass(pswObj.spassword, psw)) {
document.getElementById(‘title’).innerHTML = ‘解锁成功’;
drawStatusPoint(‘#2CFF26’); } else { drawStatusPoint(‘red’);
document.getElementById(‘title’).innerHTML = ‘解锁战败’; } } else {
pswObj.step = 1; pswObj.fpassword = psw;
document.getElementById(‘title’).innerHTML = ‘再度输入’; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function storePass(psw) {// touchend结束之后对密码和状态的处理
        if (pswObj.step == 1) {
            if (checkPass(pswObj.fpassword, psw)) {
                pswObj.step = 2;
                pswObj.spassword = psw;
                document.getElementById(‘title’).innerHTML = ‘密码保存成功’;
                drawStatusPoint(‘#2CFF26’);
                window.localStorage.setItem(‘passwordx’, JSON.stringify(pswObj.spassword));
                window.localStorage.setItem(‘chooseType’, chooseType);
            } else {
                document.getElementById(‘title’).innerHTML = ‘两次不一致,重新输入’;
                drawStatusPoint(‘red’);
                delete pswObj.step;
            }
        } else if (pswObj.step == 2) {
            if (checkPass(pswObj.spassword, psw)) {
                document.getElementById(‘title’).innerHTML = ‘解锁成功’;
                drawStatusPoint(‘#2CFF26’);
            } else {
                drawStatusPoint(‘red’);
                document.getElementById(‘title’).innerHTML = ‘解锁失败’;
            }
        } else {
            pswObj.step = 1;
            pswObj.fpassword = psw;
            document.getElementById(‘title’).innerHTML = ‘再次输入’;
        }
 
    }

解锁组件

将那么些HTML5解锁写成了贰个零部件,放在

二维码体验: 新萄京娱乐场8309 6

 

参考资料:

1 赞 4 收藏 1
评论

新萄京娱乐场8309 7

H5 手势解锁

扫码在线查看:

新萄京娱乐场8309 8

依然点击查阅手机版。

项目 GitHub
地址,H5HandLock。

首先,作者要证实一下,对于这么些体系,笔者是参照外人的,H5lock。

自小编以为1个相比合理的解法应该是行使 canvas 来落到实处,不晓得有没有大神用 css
来达成。借使纯用 css 的话,能够将连线先安装
display: none,当手指划过的时候,显示出来。光设置这么些本该就11分麻烦呢。

后边精晓过 canvas,但并未当真的写过,上面就来介绍自个儿这几天学习 canvas
并贯彻 H5 手势解锁的进度。

预备及布局设置

自个儿那里用了三个比较符合规律的做法:

(function(w){ var handLock = function(option){} handLock.prototype = {
init : function(){}, … } w.handLock = handLock; })(window) // 使用 new
handLock({ el: document.getElementById(‘id’), … }).init();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function(w){
  var handLock = function(option){}
 
  handLock.prototype = {
    init : function(){},
    …
  }
 
  w.handLock = handLock;
})(window)
 
// 使用
new handLock({
  el: document.getElementById(‘id’),
  …
}).init();

常规方法,比较易懂和操作,弊端正是,能够被轻易的修改。

流传的参数中要包含3个 dom 对象,会在那个 dom 对象內创设一个canvas。当然还有一对别的的 dom 参数,比如 message,info 等。

有关 css 的话,懒得去新建文件了,就一贯內联了。

canvas

1. 学习 canvas 并消除画圆

MDN
上边有个不难的学科,大约浏览了须臾间,感觉还可以。Canvas教程。

先创制八个 canvas,然后设置其大小,并经过 getContext
方法赢得绘画的上下文:

var canvas = document.createElement(‘canvas’); canvas.width =
canvas.height = width; this.el.appendChild(canvas); this.ctx =
canvas.getContext(‘2d’);

1
2
3
4
5
var canvas = document.createElement(‘canvas’);
canvas.width = canvas.height = width;
this.el.appendChild(canvas);
 
this.ctx = canvas.getContext(‘2d’);

然后呢,先画 n*n 个圆出来:

JavaScript

createCircles: function(){ var ctx = this.ctx, drawCircle =
this.drawCircle, n = this.n; this.r = ctx.canvas.width / (2 + 4 * n) //
那里是参照的,感觉那种画圆的不二法门挺合理的,方方圆圆 r = this.r;
this.circles = []; // 用来囤积圆心的职位 for(var i = 0; i < n;
i++){ for(var j = 0; j < n; j++){ var p = { x: j * 4 * r + 3 * r,
y: i * 4 * r + 3 * r, id: i * 3 + j } this.circles.push(p); } }
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); //
为了幸免再度画 this.circles.forEach(function(v){ drawCircle(ctx, v.x,
v.y); // 画每个圆 }) }, drawCircle: function(ctx, x, y){ // 画圆函数
ctx.strokeStyle = ‘#FFFFFF’; ctx.lineWidth = 2; ctx.beginPath();
ctx.arc(x, y, this.r, 0, Math.PI * 2, true); ctx.closePath();
ctx.stroke(); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
createCircles: function(){
  var ctx = this.ctx,
    drawCircle = this.drawCircle,
    n = this.n;
  this.r = ctx.canvas.width / (2 + 4 * n) // 这里是参考的,感觉这种画圆的方式挺合理的,方方圆圆
  r = this.r;
  this.circles = []; // 用来存储圆心的位置
  for(var i = 0; i < n; i++){
    for(var j = 0; j < n; j++){
      var p = {
        x: j * 4 * r + 3 * r,
        y: i * 4 * r + 3 * r,
        id: i * 3 + j
      }
      this.circles.push(p);
    }
  }
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // 为了防止重复画
  this.circles.forEach(function(v){
    drawCircle(ctx, v.x, v.y); // 画每个圆
  })
},
 
drawCircle: function(ctx, x, y){ // 画圆函数
  ctx.strokeStyle = ‘#FFFFFF’;
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.stroke();
}

画圆函数,供给专注:怎么着规定圆的半径和各样圆的圆心坐标(这一个本身是参考的),假如以圆心为大旨,每种圆上下左右各扩张1个半径的离开,同时为了避防万一四边太挤,四周在填写八个半径的相距。那么获得的半径正是
width / ( 4 * n + 2),对应也得以算出每一种圆所在的圆心坐标,也有一套公式,GET

2. 画线

画线必要依赖 touch event 来形成,约等于,当大家 touchstart
的时候,传入开首时的周旋坐标,作为线的另一方面,当我们 touchmove
的时候,获得坐标,作为线的另贰只,当大家 touchend 的时候,伊始画线。

那只是二个测试画线效能,具体的末端再举行修改。

有七个函数,获得当前 touch 的对峙坐标:

getTouchPos: function(e){ // 获得触摸点的相对地方 var rect =
e.target.getBoundingClientRect(); var p = { // 相对坐标 x:
e.touches[0].clientX – rect.left, y: e.touches[0].clientY – rect.top
}; return p; }

1
2
3
4
5
6
7
8
getTouchPos: function(e){ // 获得触摸点的相对位置
  var rect = e.target.getBoundingClientRect();
  var p = { // 相对坐标
    x: e.touches[0].clientX – rect.left,
    y: e.touches[0].clientY – rect.top
  };
  return p;
}

画线:

drawLine: function(p1, p2){ // 画线 this.ctx.beginPath();
this.ctx.lineWidth = 3; this.ctx.moveTo(p1.x, p2.y);
this.ctx.lineTo(p.x, p.y); this.ctx.stroke(); this.ctx.closePath(); },

1
2
3
4
5
6
7
8
drawLine: function(p1, p2){ // 画线
  this.ctx.beginPath();
  this.ctx.lineWidth = 3;
  this.ctx.moveTo(p1.x, p2.y);
  this.ctx.lineTo(p.x, p.y);
  this.ctx.stroke();
  this.ctx.closePath();
},

然后正是监听 canvas 的 touchstarttouchmove、和 touchend 事件了。

相关文章