使用 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

代码实现

1、新建初始化项目

2、安装依赖

3、配置 rollup.config.js 文件

4、添加默认的配置项

5、添加绘制的工具方法

6、添加入口文件

7、添加核心文件 recorder.js

8、添加核心文件 locker.js

9、添加 recorder.html 示例

10、添加 locker.html 示例

11、启动服务测试

12、打包之后的 umd 文件

13、目录结构

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

代码实现

1、新建初始化项目

2、安装依赖

3、配置 rollup.config.js 文件

4、添加默认的配置项

5、添加绘制的工具方法

6、添加入口文件

7、添加核心文件 recorder.js

8、添加核心文件 locker.js

9、添加 recorder.html 示例

10、添加 locker.html 示例

11、启动服务测试

12、打包之后的 umd 文件

13、目录结构

热门文章

最新文章

相关课程

相关电子书

相关实验场景