使用 rollup 打包一个原生 js + canvas 实现的移动端手势解锁功能组件2-阿里云开发者社区

代码实现

1、新建初始化项目

npm init -y

2、安装依赖

npm i rollup -D

为了让库文件具有更好的兼容性，需要把ES6代码在打包的时候转义成ES5。

# 安装rollup插件包
npm install @rollup/plugin-babel -D
# 安装babel相关包
npm install @babel/core @babel/preset-env -D

在根目录下新建 .babelrc 文件，并撰写如下内容：

{
    "presets": [
        "@babel/preset-env"
    ]
}

需要对生产环境进行压缩

# 安装代码压缩插件
npm install rollup-plugin-terser -D

3、配置 rollup.config.js 文件

根路径添加 rollup.config.js 文件，配置如下：

// 用于es6转es5
import { babel } from '@rollup/plugin-babel';
// 用于代码压缩
import { terser } from 'rollup-plugin-terser';
const config = {
    input: "./src/index.js",
    output: [
        {
            file: './lib/kaimo-handlock-umd.js',
            format: 'umd',
            name: 'KaimoHandlock'
            // 当入口文件有export时，'umd'格式必须指定name
            // 这样，在通过<script>标签引入时，才能通过name访问到export的内容。
        },
        {
            file: './lib/kaimo-handlock-es.js',
            format: 'es'
        },
        {
            file: './lib/kaimo-handlock-cjs.js',
            format: 'cjs'
        }
    ],
    plugins: [
        babel({
            babelHelpers: 'bundled' // 建议显式配置此选项（即使使用其默认值），以便对如何将这些 babel 助手插入代码做出明智的决定。
        }),
        terser()
    ]
}
export default config;

4、添加默认的配置项

添加 config/config.default.js

export const defaultRecorderOptions = {
    container: null, // 创建canvas的容器，如果不填，自动在 body 上创建覆盖全屏的层
    autoRender: true, // 是否自动渲染
    dotNum: 4, // 圆点的数量： n x n
    defaultCircleColor: "#ddd", // 未选中的圆的颜色
    focusColor: '#33a06f',  //当前选中的圆的颜色
    bgColor: '#fff', // canvas背景颜色
    innerRadius: 16, // 圆点的内半径
    outerRadius: 42, // 圆点的外半径，focus 的时候显示
    touchRadius: 64, // 判定touch事件的圆半径
    minPoints: 4, // 最小允许的点数
}
export const defaultLockerOptions = {
    update: {
        beforeRepeat: function(){},
        afterRepeat: function(){}
    },
    check: {
        checked: function(){}
    }
}

5、添加绘制的工具方法

添加 utils/draw-utils.js

// 获取canvas 的坐标：canvas 显示大小缩放为实际大小的 50%。为了让图形在 Retina 屏上清晰
export function getCanvasPoint(canvas, x, y) {
    let rect = canvas.getBoundingClientRect();
    return {
        x: 2 * (x - rect.left),
        y: 2 * (y - rect.top)
    };
}
// 计算连点之间的距离
export function distance(p1, p2) {
    let x = p2.x - p1.x,
        y = p2.y - p1.y;
    return Math.sqrt(x * x + y * y);
}
// 画实心圆
export function drawSolidCircle(ctx, color, x, y, r) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
}
// 画空心圆
export function drawHollowCircle(ctx, color, x, y, r) {
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.stroke();
}
// 画线段
export function drawLine(ctx, color, x1, y1, x2, y2) {
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
    ctx.closePath();
}

6、添加入口文件

添加 index.js

import Recorder from './core/recorder.js';
import Locker from './core/locker.js';
export {
  Recorder,
  Locker
}

7、添加核心文件 recorder.js

添加核心文件 core/recorder.js

// 获取默认配置
import {defaultRecorderOptions} from "../config/config.default.js";
// 绘制方法
import {
    distance,
    drawLine,
    drawHollowCircle,
    drawSolidCircle,
    getCanvasPoint
} from "../utils/draw-utils.js";
export default class Recorder{
    static get ERR_USER_CANCELED(){
        return '用户已经取消';
    }
    static get ERR_NO_TASK(){
        return '暂无任务可执行';
    }
    constructor(options) {
        this.options = Object.assign({}, defaultRecorderOptions, options);
        this.container = null; // 容器
        this.circleCanvas = null; // 画圆的 canvas
        this.lineCanvas = null; // 画固定线条 canvas
        this.moveCanvas = null; // 画不固定线条的 canvas
        this.circles = []; // dotNum x dotNum 个实心圆坐标相关数据
        this.recordingTask = null; // 记录任务
        // 是否自动渲染
        if(this.options.autoRender) {
            this.render();
        }
    }
    // 渲染方法
    render() {
        // 拿到容器
        this.container = this.options.container || document.createElement('div');
        // 拿到容器宽高
        let {width, height} = container.getBoundingClientRect();
        // 画圆的 canvas
        this.circleCanvas = document.createElement("canvas");
        // 设置 circleCanvas 的宽高一样
        this.circleCanvas.width = this.circleCanvas.height = 2 * Math.min(width, height);
        // 设置 circleCanvas 的样式支持 retina 屏
        Object.assign(this.circleCanvas.style, {
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%) scale(0.5)', 
        });
        /**
         * cloneNode(true)：方法可创建指定的节点的精确拷贝、拷贝所有属性和值。
         * true：递归复制当前节点的所有子孙节点
         * 复制画圆的 canvas 属性给到 lineCanvas、moveCanvas
         * */ 
        this.lineCanvas = this.circleCanvas.cloneNode(true);
        this.moveCanvas = this.circleCanvas.cloneNode(true);
        // 将三个 canvas 添加到容器里
        container.appendChild(this.lineCanvas);
        container.appendChild(this.moveCanvas);
        container.appendChild(this.circleCanvas);
        // touchmove 事件在 Chrome 下默认是一个 Passive Event 需要传参 {passive: false}，否则就不能 preventDefault。
        this.container.addEventListener('touchmove', evt => evt.preventDefault(), { passive: false });
        // 开始渲染时清除上一次记录
        this.clearPath();
    }
    // 负责在画布上清除上一次记录的结果
    clearPath() {
        // 如果没有画圆的 canvas，则重新渲染
        if(!this.circleCanvas){
            this.render()
        };
        // 获取三个 canvas 的上下文，宽度，还有配置项
        let {circleCanvas, lineCanvas, moveCanvas, options} = this,
            circleCtx = circleCanvas.getContext('2d'),
            lineCtx = lineCanvas.getContext('2d'),
            moveCtx = moveCanvas.getContext('2d'),
            width = circleCanvas.width,
            {dotNum, defaultCircleColor, innerRadius} = options;
        // 清除三个 canvas 画布
        circleCtx.clearRect(0, 0, width, width);
        lineCtx.clearRect(0, 0, width, width);
        moveCtx.clearRect(0, 0, width, width);
        // 绘制 dotNum x dotNum 个实心圆
        let range = Math.round(width / (dotNum + 1));
        let circles = [];
        for(let i = 1; i <= dotNum; i++){
            for(let j = 1; j <= dotNum; j++){
                let y = range * i, x = range * j;
                drawSolidCircle(circleCtx, defaultCircleColor, x, y, innerRadius);
                let circlePoint = {x, y};
                circlePoint.pos = [i, j];
                circles.push(circlePoint);
            }
        }
        this.circles = circles;
    }
    // 负责记录：它是一个异步的，因为不知道什么时候用户停止移动，这里我们返回一个 promise 对象回去，让用户决定停止移动的
    async record() {
        // 获取三个 canvas 的上下文，还有配置项
        let {circleCanvas, lineCanvas, moveCanvas, options} = this,
            circleCtx = circleCanvas.getContext('2d'),
            lineCtx = lineCanvas.getContext('2d'),
            moveCtx = moveCanvas.getContext('2d');
        // 记录激活的圆点
        let records = [];
        // touchstart、touchmove事件执行的方法，用于绘制激活状态
        let handler = evt => {
            // 每次touchstart时清除上一次记录的结果
            if(evt.type === "touchstart") {
                records = [];
                this.clearPath();
            }
            // 获取配置
            let {bgColor, focusColor, innerRadius, outerRadius, touchRadius} = options;
            // 通过 changedTouches 转换得倒移动点的坐标
            let {clientX, clientY} = evt.changedTouches[0],
                touchPoint = getCanvasPoint(moveCanvas, clientX, clientY);
            // 遍历之前存的圆点
            for(let i = 0; i < this.circles.length; i++){
                // 取出之前圆点的坐标
                let point = this.circles[i],
                    x0 = point.x,
                    y0 = point.y;
                // 判断圆点跟移动点的距离是否小于判定touch事件的圆半径
                if(distance(point, touchPoint) < touchRadius){
                    // 绘制白色的圆，半径为 outerRadius
                    drawSolidCircle(circleCtx, bgColor, x0, y0, outerRadius);
                    // 绘制激活色的圆，半径为 innerRadius
                    drawSolidCircle(circleCtx, focusColor, x0, y0, innerRadius);
                    // 绘制激活的空心圆，半径为 outerRadius
                    drawHollowCircle(circleCtx, focusColor, x0, y0, outerRadius);
                    // 如果 records 里面有圆点了，就跟最后一个连线
                    if(records.length){
                        let p2 = records[records.length - 1],
                            x1 = p2.x,
                            y1 = p2.y;
                        drawLine(lineCtx, focusColor, x0, y0, x1, y1);
                    }
                    // 将 circles 里圆点截取出来，push 到 records 里面
                    let circle = this.circles.splice(i, 1);
                    records.push(circle[0]);
                    // 找到之后就break
                    break;
                }
            }
            // 如果 records 里面有圆点了，就跟最后一个连线
            if(records.length){
                let point = records[records.length - 1],
                    x0 = point.x,
                    y0 = point.y,
                    x1 = touchPoint.x,
                    y1 = touchPoint.y;
                // 先清空画布
                moveCtx.clearRect(0, 0, moveCanvas.width, moveCanvas.height);
                // 画移动的线
                drawLine(moveCtx, focusColor, x0, y0, x1, y1);        
            }
        };
        // 监听touchstart、touchmove事件
        circleCanvas.addEventListener('touchstart', handler);
        circleCanvas.addEventListener('touchmove', handler);
        let recordingTask = {};
        let promise = new Promise((resolve, reject) => {
            // 给recordingTask添加取消的方法
            recordingTask.cancel = (res = {}) => {
                let promise = this.recordingTask.promise;
                res.err = res.err || Recorder.ERR_USER_CANCELED;
                circleCanvas.removeEventListener('touchstart', handler);
                circleCanvas.removeEventListener('touchmove', handler);
                document.removeEventListener('touchend', done);
                resolve(res);
                this.recordingTask = null;
                return promise;
            }
            let done = evt => {
                // 清空移动canvas的画布
                moveCtx.clearRect(0, 0, moveCanvas.width, moveCanvas.height);
                // 如果没有记录的点直接退出
                if(!records.length) return;
                // 移除事件
                circleCanvas.removeEventListener('touchstart', handler);
                circleCanvas.removeEventListener('touchmove', handler);
                document.removeEventListener('touchend', done);
                let err = null;
                // 如果记录的个数小于配置的最小允许的点数，就提示报错
                if(records.length < options.minPoints){
                    err = `连接点数至少需要${options.minPoints}个`;
                }
                // 把坐标转成字符串
                resolve({
                    err, 
                    records: records.map(o => o.pos.join('')).join('')
                });
                this.recordingTask = null;
            };
            // 监听 touchend 事件
            document.addEventListener('touchend', done);
        });
        recordingTask.promise = promise;
        this.recordingTask = recordingTask;
        return promise;
    }
    // 负责终止记录过程，同样也是返回一个promise
    async cancel() {
        // 如果有任务就执行任务里的 cancel 方法
        if(this.recordingTask){
            return this.recordingTask.cancel();
        }
        return Promise.resolve({err: Recorder.ERR_NO_TASK});
    }
}

8、添加核心文件 locker.js

添加核心文件 core/locker.js

import Recorder from './recorder.js';
// 获取默认配置
import {defaultLockerOptions} from "../config/config.default.js";
// Locker 继承 Recorder
export default class Locker extends Recorder{
    static get ERR_PASSWORD_MISMATCH(){
        return '密码不匹配';
    }
    constructor(options = {}) {
        options.update = Object.assign({}, defaultLockerOptions.update, options.update);
        options.check = Object.assign({}, defaultLockerOptions.check, options.check);
        super(options);
    }
    // 更新密码
    async update() {
        await this.cancel();
        // 拿到钩子方法 beforeRepeat afterRepeat
        let beforeRepeat = this.options.update.beforeRepeat, 
            afterRepeat = this.options.update.afterRepeat;
        // 第一次输入密码
        let first = await this.record();
        // 如果报错并且错误等于 ERR_USER_CANCELED 就return
        if(first.err && first.err === Locker.ERR_USER_CANCELED) {
            return Promise.resolve(first);
        }
        // 如果报错，return出去
        if(first.err){
            this.update();
            beforeRepeat.call(this, first);
            return Promise.resolve(first);   
        }
        // 执行重复前的钩子
        console.log("第一次密码：", first.records);
        beforeRepeat.call(this, first);
        // 第二次输入密码
        let second = await this.record();
        // 如果报错并且错误等于 ERR_USER_CANCELED 就return
        if(second.err && second.err === Locker.ERR_USER_CANCELED) {
            return Promise.resolve(second);
        }
        // 如果第二次密码没有错，并且第一次的密码不等于第二次的就报错不匹配
        if(!second.err && first.records !== second.records){
            second.err = Locker.ERR_PASSWORD_MISMATCH;
        }
        this.update();
        // 执行重复后的钩子
        console.log("第二次密码：", second.records);
        afterRepeat.call(this, second);
        return Promise.resolve(second);   
    }
    // 校验密码
    async check(password) {
        await this.cancel();
        // 拿到 checked 方法
        let checked = this.options.check.checked;
        // 输入密码
        let res = await this.record();
        // 如果报错并且错误等于 ERR_USER_CANCELED 就return
        if(res.err && res.err === Locker.ERR_USER_CANCELED){
            return Promise.resolve(res);
        }
        // 如果没有错误，密码不一致提示密码匹配不正确
        if(!res.err && password !== res.records){
            res.err = Locker.ERR_PASSWORD_MISMATCH
        }
        // 执行 checked 回调函数，返回结果出去
        checked.call(this, res);
        console.log("输入的密码：", res.records, "需要校验的密码：", password)
        // 再次执行check，失败了可以再次输入
        this.check(password);
        return Promise.resolve(res);
    }
}

9、添加 recorder.html 示例

添加文件 example/recorder.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>kaimo handlock recorder demo</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        * { 
            padding: 0;
            margin: 0; 
        }
        html, body { 
            width: 100%; 
            height: 100%;
            overflow: hidden;
        }
        #container {
            position: relative;
            overflow: hidden;
            width: 100%;
            padding-top: 100%;
            height: 0px;
            background-color: white;
        }
        .control {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <div class="control">
        <button id="cancelBtn" class="el-button el-button--mini el-button--danger">取消</button>
    </div>
    <script src="../lib/kaimo-handlock-umd.js"></script>
    <script>
        // KaimoHandlock是打包暴露出来的，创建一个Recorder实例
        var recorder = new KaimoHandlock.Recorder({
            container: document.querySelector('#container'),
        });
        console.log(recorder)
        function recorded(res) {
            if(res.err){
                console.error(res.err)
                recorder.clearPath();
                if(res.err !== KaimoHandlock.Recorder.ERR_USER_CANCELED){
                    recorder.record().then(recorded);
                }
            }else{
                console.log("密码字符串：", res.records)
                recorder.record().then(recorded);
            }  
        }
        recorder.record().then(recorded);
        // 点击取消
        cancelBtn.onclick = function(){
            recorder.cancel();
            recorder.clearPath();
        }
    </script>
</body>
</html>

10、添加 locker.html 示例

添加文件 example/locker.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>kaimo handlock locker demo</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        * { 
            padding: 0;
            margin: 0; 
        }
        html, body { 
            width: 100%; 
            height: 100%;
            overflow: hidden;
        }
        #container {
            position: relative;
            overflow: hidden;
            width: 100%;
            padding-top: 100%;
            height: 0px;
            background-color: white;
        }
        .control {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <div class="control">
        <button id="setPasswordBtn" class="el-button el-button--mini">设置密码</button>
        <button id="checkPasswordBtn" class="el-button el-button--mini">验证密码</button>
    </div>
    <script src="../lib/kaimo-handlock-umd.js"></script>
    <script>
        var password = localStorage.getItem('kaimo_handlock_passwd') || '1221322322';
        // KaimoHandlock是打包暴露出来的，创建一个Locker实例
        var locker = new KaimoHandlock.Locker({
            container: document.querySelector('#container'),
            check: {
                checked: function(res){
                    locker.clearPath();
                    console.log("checked--->", res)
                    if(res.err){
                        if(res.err === KaimoHandlock.Locker.ERR_PASSWORD_MISMATCH){
                            console.error("密码错误，请重新绘制！")
                        }else{
                            console.error(res.err)
                        }
                    }else{
                        console.log("密码正确！")
                    }
                },
            },
            update:{
                beforeRepeat: function(res){
                    locker.clearPath();
                    if(res.err){
                        console.log(`请连接至少${locker.options.minPoints}个点`)
                    }else{
                        console.log("请再次绘制相同图案")
                    }
                },
                afterRepeat: function(res){
                    locker.clearPath();
                    if(res.err){
                        if(res.err === KaimoHandlock.Locker.ERR_PASSWORD_MISMATCH){
                            console.log("两次绘制的图形不一致，请重新绘制！")
                        }else{
                            console.log(`请连接至少${locker.options.minPoints}个点`)
                        }
                    }else{
                        password = res.records;
                        localStorage.setItem('kaimo_handlock_passwd', password);
                        console.log("密码更新成功：", password)
                    }
                },
            }
        });
        console.log(locker)
        // 点击设置密码
        setPasswordBtn.onclick = function(){
            setPasswordBtn.classList.add("el-button--success");
            checkPasswordBtn.classList.remove("el-button--success");
            locker.clearPath();
            locker.update();
        }
        // 点击验证密码
        checkPasswordBtn.onclick = function(){
            checkPasswordBtn.classList.add("el-button--success");
            setPasswordBtn.classList.remove("el-button--success");
            locker.clearPath();
            locker.check(password);
        }
    </script>
</body>
</html>

11、启动服务测试

第一个服务是 rollup 的
第二个服务是 liveserve 的用于访问 html 页面

recorder.html 测试结果，需要切换到移动端模式，刷新之后就可以测试了。主要就是绘制完看效果，

locker.html 测试结果，相对上面一个，测试复杂一点，点击下面两个按钮是用于切换当前的模式的，切到设置模式会有两次的输入，如果两次都输入正确，就会把密码保存到localStorage，验证密码就是通过设置的密码去校验输入的密码是否一样。感兴趣的可以自己测试玩玩。

localStorage 里的缓存如下：

12、打包之后的 umd 文件

我们看一下通过打包之后的 umd 文件，lib/kaimo-handlock-umd.js

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KaimoHandlock={})}(this,(function(t){"use strict";function e(){
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
e=function(){return t};var t={},r=Object.prototype,n=r.hasOwnProperty,o="function"==typeof Symbol?Symbol:{},i=o.iterator||"@@iterator",a=o.asyncIterator||"@@asyncIterator",c=o.toStringTag||"@@toStringTag";function u(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{u({},"")}catch(t){u=function(t,e,r){return t[e]=r}}function s(t,e,r,n){var o=e&&e.prototype instanceof f?e:f,i=Object.create(o.prototype),a=new C(n||[]);return i._invoke=function(t,e,r){var n="suspendedStart";return function(o,i){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===o)throw i;return _()}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=E(a,r);if(c){if(c===h)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var u=l(t,e,r);if("normal"===u.type){if(n=r.done?"completed":"suspendedYield",u.arg===h)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(n="completed",r.method="throw",r.arg=u.arg)}}}(t,r,a),i}function l(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=s;var h={};function f(){}function p(){}function d(){}var v={};u(v,i,(function(){return this}));var y=Object.getPrototypeOf,g=y&&y(y(k([])));g&&g!==r&&n.call(g,i)&&(v=g);var m=d.prototype=f.prototype=Object.create(v);function b(t){["next","throw","return"].forEach((function(e){u(t,e,(function(t){return this._invoke(e,t)}))}))}function w(t,e){function r(o,i,a,c){var u=l(t[o],t,i);if("throw"!==u.type){var s=u.arg,h=s.value;return h&&"object"==typeof h&&n.call(h,"__await")?e.resolve(h.__await).then((function(t){r("next",t,a,c)}),(function(t){r("throw",t,a,c)})):e.resolve(h).then((function(t){s.value=t,a(s)}),(function(t){return r("throw",t,a,c)}))}c(u.arg)}var o;this._invoke=function(t,n){function i(){return new e((function(e,o){r(t,n,e,o)}))}return o=o?o.then(i,i):i()}}function E(t,e){var r=t.iterator[e.method];if(void 0===r){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,E(t,e),"throw"===e.method))return h;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return h}var n=l(r,t.iterator,e.arg);if("throw"===n.type)return e.method="throw",e.arg=n.arg,e.delegate=null,h;var o=n.arg;return o?o.done?(e[t.resultName]=o.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,h):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,h)}function x(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function R(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function C(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(x,this),this.reset(!0)}function k(t){if(t){var e=t[i];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var r=-1,o=function e(){for(;++r<t.length;)if(n.call(t,r))return e.value=t[r],e.done=!1,e;return e.value=void 0,e.done=!0,e};return o.next=o}}return{next:_}}function _(){return{value:void 0,done:!0}}return p.prototype=d,u(m,"constructor",d),u(d,"constructor",p),p.displayName=u(d,c,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===p||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,d):(t.__proto__=d,u(t,c,"GeneratorFunction")),t.prototype=Object.create(m),t},t.awrap=function(t){return{__await:t}},b(w.prototype),u(w.prototype,a,(function(){return this})),t.AsyncIterator=w,t.async=function(e,r,n,o,i){void 0===i&&(i=Promise);var a=new w(s(e,r,n,o),i);return t.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},b(m),u(m,c,"Generator"),u(m,i,(function(){return this})),u(m,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=k,C.prototype={constructor:C,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(R),!t)for(var e in this)"t"===e.charAt(0)&&n.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function r(r,n){return a.type="throw",a.arg=t,e.next=r,n&&(e.method="next",e.arg=void 0),!!n}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return r("end");if(i.tryLoc<=this.prev){var c=n.call(i,"catchLoc"),u=n.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return r(i.catchLoc,!0);if(this.prev<i.finallyLoc)return r(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return r(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return r(i.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,h):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),h},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),R(r),h}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;R(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:k(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),h}},t}function r(t,e,r,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void r(t)}c.done?e(u):Promise.resolve(u).then(n,o)}function n(t){return function(){var e=this,n=arguments;return new Promise((function(o,i){var a=t.apply(e,n);function c(t){r(a,o,i,c,u,"next",t)}function u(t){r(a,o,i,c,u,"throw",t)}c(void 0)}))}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function a(t,e,r){return e&&i(t.prototype,e),r&&i(t,r),Object.defineProperty(t,"prototype",{writable:!1}),t}function c(t){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},c(t)}function u(t,e){return u=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},u(t,e)}function s(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}function l(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var r,n=c(t);if(e){var o=c(this).constructor;r=Reflect.construct(n,arguments,o)}else r=n.apply(this,arguments);return s(this,r)}}var h={container:null,autoRender:!0,dotNum:4,defaultCircleColor:"#ddd",focusColor:"#33a06f",bgColor:"#fff",innerRadius:16,outerRadius:42,touchRadius:64,minPoints:4},f={beforeRepeat:function(){},afterRepeat:function(){}},p={checked:function(){}};function d(t,e){var r=e.x-t.x,n=e.y-t.y;return Math.sqrt(r*r+n*n)}function v(t,e,r,n,o){t.fillStyle=e,t.beginPath(),t.arc(r,n,o,0,2*Math.PI,!0),t.closePath(),t.fill()}function y(t,e,r,n,o){t.strokeStyle=e,t.beginPath(),t.arc(r,n,o,0,2*Math.PI,!0),t.closePath(),t.stroke()}function g(t,e,r,n,o,i){t.strokeStyle=e,t.beginPath(),t.moveTo(r,n),t.lineTo(o,i),t.stroke(),t.closePath()}var m=function(){function t(e){o(this,t),this.options=Object.assign({},h,e),this.container=null,this.circleCanvas=null,this.lineCanvas=null,this.moveCanvas=null,this.circles=[],this.recordingTask=null,this.options.autoRender&&this.render()}var r,i;return a(t,[{key:"render",value:function(){this.container=this.options.container||document.createElement("div");var t=container.getBoundingClientRect(),e=t.width,r=t.height;this.circleCanvas=document.createElement("canvas"),this.circleCanvas.width=this.circleCanvas.height=2*Math.min(e,r),Object.assign(this.circleCanvas.style,{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%) scale(0.5)"}),this.lineCanvas=this.circleCanvas.cloneNode(!0),this.moveCanvas=this.circleCanvas.cloneNode(!0),container.appendChild(this.lineCanvas),container.appendChild(this.moveCanvas),container.appendChild(this.circleCanvas),this.container.addEventListener("touchmove",(function(t){return t.preventDefault()}),{passive:!1}),this.clearPath()}},{key:"clearPath",value:function(){this.circleCanvas||this.render();var t=this.circleCanvas,e=this.lineCanvas,r=this.moveCanvas,n=this.options,o=t.getContext("2d"),i=e.getContext("2d"),a=r.getContext("2d"),c=t.width,u=n.dotNum,s=n.defaultCircleColor,l=n.innerRadius;o.clearRect(0,0,c,c),i.clearRect(0,0,c,c),a.clearRect(0,0,c,c);for(var h=Math.round(c/(u+1)),f=[],p=1;p<=u;p++)for(var d=1;d<=u;d++){var y=h*p,g=h*d;v(o,s,g,y,l);var m={x:g,y:y};m.pos=[p,d],f.push(m)}this.circles=f}},{key:"record",value:(i=n(e().mark((function r(){var n,o,i,a,c,u,s,l,h,f,p,m=this;return e().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n=this.circleCanvas,o=this.lineCanvas,i=this.moveCanvas,a=this.options,c=n.getContext("2d"),u=o.getContext("2d"),s=i.getContext("2d"),l=[],h=function(t){"touchstart"===t.type&&(l=[],m.clearPath());for(var e,r,n,o=a.bgColor,h=a.focusColor,f=a.innerRadius,p=a.outerRadius,b=a.touchRadius,w=t.changedTouches[0],E=w.clientX,x=w.clientY,R=(e=E,r=x,n=i.getBoundingClientRect(),{x:2*(e-n.left),y:2*(r-n.top)}),C=0;C<m.circles.length;C++){var k=m.circles[C],_=k.x,L=k.y;if(d(k,R)<b){if(v(c,o,_,L,p),v(c,h,_,L,f),y(c,h,_,L,p),l.length){var P=l[l.length-1],O=P.x,j=P.y;g(u,h,_,L,O,j)}var S=m.circles.splice(C,1);l.push(S[0]);break}}if(l.length){var T=l[l.length-1],N=T.x,A=T.y,M=R.x,D=R.y;s.clearRect(0,0,i.width,i.height),g(s,h,N,A,M,D)}},n.addEventListener("touchstart",h),n.addEventListener("touchmove",h),f={},p=new Promise((function(e,r){f.cancel=function(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=m.recordingTask.promise;return r.err=r.err||t.ERR_USER_CANCELED,n.removeEventListener("touchstart",h),n.removeEventListener("touchmove",h),document.removeEventListener("touchend",o),e(r),m.recordingTask=null,i};var o=function t(r){if(s.clearRect(0,0,i.width,i.height),l.length){n.removeEventListener("touchstart",h),n.removeEventListener("touchmove",h),document.removeEventListener("touchend",t);var o=null;l.length<a.minPoints&&(o="连接点数至少需要".concat(a.minPoints,"个")),e({err:o,records:l.map((function(t){return t.pos.join("")})).join("")}),m.recordingTask=null}};document.addEventListener("touchend",o)})),f.promise=p,this.recordingTask=f,e.abrupt("return",p);case 10:case"end":return e.stop()}}),r,this)}))),function(){return i.apply(this,arguments)})},{key:"cancel",value:(r=n(e().mark((function r(){return e().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(!this.recordingTask){e.next=2;break}return e.abrupt("return",this.recordingTask.cancel());case 2:return e.abrupt("return",Promise.resolve({err:t.ERR_NO_TASK}));case 3:case"end":return e.stop()}}),r,this)}))),function(){return r.apply(this,arguments)})}],[{key:"ERR_USER_CANCELED",get:function(){return"用户已经取消"}},{key:"ERR_NO_TASK",get:function(){return"暂无任务可执行"}}]),t}(),b=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&u(t,e)}(s,t);var r,i,c=l(s);function s(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return o(this,s),t.update=Object.assign({},f,t.update),t.check=Object.assign({},p,t.check),c.call(this,t)}return a(s,[{key:"update",value:(i=n(e().mark((function t(){var r,n,o,i;return e().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,this.cancel();case 2:return r=this.options.update.beforeRepeat,n=this.options.update.afterRepeat,t.next=5,this.record();case 5:if(!(o=t.sent).err||o.err!==s.ERR_USER_CANCELED){t.next=8;break}return t.abrupt("return",Promise.resolve(o));case 8:if(!o.err){t.next=12;break}return this.update(),r.call(this,o),t.abrupt("return",Promise.resolve(o));case 12:return console.log("第一次密码：",o.records),r.call(this,o),t.next=16,this.record();case 16:if(!(i=t.sent).err||i.err!==s.ERR_USER_CANCELED){t.next=19;break}return t.abrupt("return",Promise.resolve(i));case 19:return i.err||o.records===i.records||(i.err=s.ERR_PASSWORD_MISMATCH),this.update(),console.log("第二次密码：",i.records),n.call(this,i),t.abrupt("return",Promise.resolve(i));case 24:case"end":return t.stop()}}),t,this)}))),function(){return i.apply(this,arguments)})},{key:"check",value:(r=n(e().mark((function t(r){var n,o;return e().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,this.cancel();case 2:return n=this.options.check.checked,t.next=5,this.record();case 5:if(!(o=t.sent).err||o.err!==s.ERR_USER_CANCELED){t.next=8;break}return t.abrupt("return",Promise.resolve(o));case 8:return o.err||r===o.records||(o.err=s.ERR_PASSWORD_MISMATCH),n.call(this,o),console.log("输入的密码：",o.records,"需要校验的密码：",r),this.check(r),t.abrupt("return",Promise.resolve(o));case 13:case"end":return t.stop()}}),t,this)}))),function(t){return r.apply(this,arguments)})}],[{key:"ERR_PASSWORD_MISMATCH",get:function(){return"密码不匹配"}}]),s}(m);t.Locker=b,t.Recorder=m,Object.defineProperty(t,"__esModule",{value:!0})}));

13、目录结构

目录结构如下：

使用 rollup 打包一个原生 js + canvas 实现的移动端手势解锁功能组件2