vue封裝一個(gè)圖案手勢(shì)鎖組件

更新時(shí)間：2022年05月31日 10:13:40 作者：JYeontu

手勢(shì)鎖是常見的一種手機(jī)解鎖方式，本文主要介紹了vue封裝一個(gè)圖案手勢(shì)鎖組件，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

說在前面

??現(xiàn)在很多人都喜歡使用圖案手勢(shì)鎖，這里我使用vue來封裝了一個(gè)可以直接使用的組件，在這里記錄一下這個(gè)組件的開發(fā)步驟。

效果展示

組件實(shí)現(xiàn)效果如下圖：

JYeontu組件庫 - Google Chrome 2022_5_30 1_01_58 00_00_00-00_00_30.gif

預(yù)覽地址

http://jyeontu.xyz/jvuewheel/#/JAppsLock

實(shí)現(xiàn)步驟

完成一個(gè)組件需要幾步？

1.組件設(shè)計(jì)

首先我們應(yīng)該要知道我們要做怎樣的組件，具備怎樣的功能，這樣才可以開始動(dòng)手去實(shí)現(xiàn)。
功能上其實(shí)是已經(jīng)很明確了，就是仿照手機(jī)上現(xiàn)有的圖案鎖來進(jìn)行網(wǎng)頁版組件開發(fā)。這里我們對(duì)入?yún)⒑突卣{(diào)先進(jìn)行一個(gè)大致的設(shè)計(jì)。

size

圖案的尺寸，默認(rèn)為3，即圖案的大小為 3 * 3，4的話即為4 * 4;

showArrow

是否顯示劃線軌跡箭頭，有的時(shí)候我們并不希望圖案劃到的軌跡箭頭顯示，這樣的保密性會(huì)更高，所以這里需要一個(gè)開關(guān)來控制箭頭的顯示與否;

commit

commit為劃動(dòng)結(jié)束時(shí)的回調(diào)函數(shù)，我們可以在父組件接收到劃動(dòng)軌跡列表。

2.組件分析

接下來就需要對(duì)組件實(shí)現(xiàn)過程中使用到的關(guān)鍵技術(shù)點(diǎn)做一個(gè)分析了：

（1）觸屏事件&鼠標(biāo)移動(dòng)事件

我們需要在頁面上畫出圖案，那么我們肯定需要利用到網(wǎng)頁的觸屏事件和鼠標(biāo)移動(dòng)事件，鼠標(biāo)移動(dòng)事件主要是用于pc端，而在移動(dòng)端使用時(shí)，我們則需要利用到網(wǎng)頁的觸屏事件。

（2）點(diǎn)之間的連線和箭頭方向

我們需要在劃到的相鄰的兩個(gè)點(diǎn)之間進(jìn)行連線并用箭頭標(biāo)出其劃線方向，這里我們需要借助一點(diǎn)數(shù)學(xué)三角函數(shù)的知識(shí)來計(jì)算，這里就不展開了，后面會(huì)對(duì)其進(jìn)行分析解釋。

（3）連線完回調(diào)獲得滑動(dòng)軌跡

這個(gè)時(shí)候我們需要監(jiān)聽鼠標(biāo)抬起事件和觸屏結(jié)束事件，在鼠標(biāo)抬起或觸屏結(jié)束的時(shí)候執(zhí)行回調(diào)，將滑動(dòng)的圖案軌跡以數(shù)組的形式返回。

3.組件實(shí)現(xiàn)

（1）鼠標(biāo)事件和觸屏事件監(jiān)聽

首先我們應(yīng)該先對(duì)鼠標(biāo)事件和觸屏事件進(jìn)行監(jiān)聽，這樣才可以捕捉到我們劃動(dòng)圖案的軌跡。\

vue中的鼠標(biāo)事件和觸屏事件
Vue中已經(jīng)為我們定義了鼠標(biāo)事件和觸屏事件，我們可以直接這樣使用：

@mousedown.prevent="mousedown()"
@touchstart.prevent="mousedown()"
@mouseover="mouseover(cInd)"
@touchmove="mouseover(cInd)"

JavaScript監(jiān)聽鼠標(biāo)事件和觸屏事件
在JavaScript中我們需要對(duì)鼠標(biāo)事件和觸屏事件進(jìn)行監(jiān)聽：

const content = document.getElementById(this.JAppsLockId);
content.addEventListener("mousedown", this.mousedown);
content.addEventListener("mouseup", this.mouseup);

window.addEventListener("mouseup", this.mouseup);

content.addEventListener("touchstart", this.mousedown);
content.addEventListener("touchend", this.mouseup);

window.addEventListener("touchend", this.mouseup);

content.addEventListener("dragstart", () => {});
content.addEventListener("touchmove", this.touchmove);

（2）鼠標(biāo)事件和觸屏事件定義鼠標(biāo)按下 & 手指觸屏開始
在組件內(nèi)鼠標(biāo)按下或者手指觸屏開始的時(shí)候，我們應(yīng)該做一個(gè)標(biāo)記，標(biāo)記當(dāng)前狀態(tài)為鼠標(biāo)按下狀態(tài)。

mousedown() {
    this.isDown = true;
    this.choosePoints = [];
    this.removeLines();
},

鼠標(biāo)移動(dòng) & 觸屏劃動(dòng)
當(dāng)當(dāng)前為鼠標(biāo)按下狀態(tài)且鼠標(biāo)在移動(dòng)時(shí)，我們需要判斷鼠標(biāo)是否移動(dòng)經(jīng)過某一個(gè)點(diǎn)，這里的鼠標(biāo)移動(dòng)事件和觸屏劃動(dòng)事件有點(diǎn)區(qū)別，需要分別定義。

mouseover(ind) {
    if (!this.isDown) return;
    if (this.choosePoints.includes(ind)) return;
    this.choosePoints.push(ind);
},

touchmove(event) {
    if (!this.isDown) return;
    if (this.pointsArea.length === 0) {
        this.initPointsArea();
    }
    const content = document.getElementById(this.JAppsLockId + "lock");
    let nx = event.targetTouches[0].pageX - content.offsetLeft;
    let ny = event.targetTouches[0].pageY - content.offsetTop;
    for (let i = 0; i < this.pointsArea.length; i++) {
        const item = this.pointsArea[i];
        const { x, y, r } = item;
        if (Math.pow(x - nx, 2) + Math.pow(y - ny, 2) <= r * r) {
            if (this.choosePoints.includes(i)) return;
            this.choosePoints.push(i);
            break;
        }
    }
},

（3）鼠標(biāo)抬起和觸屏劃動(dòng)結(jié)束回調(diào)

在鼠標(biāo)抬起和觸屏劃動(dòng)結(jié)束的時(shí)候需要進(jìn)行回調(diào)，將當(dāng)前劃動(dòng)過程中經(jīng)過的圖案軌跡輸出。

mouseup() {
    if (!this.isDown) return;
    this.isDown = false;
    this.drawLine();
    this.$emit("commit", this.choosePoints);
},

（4）組件數(shù)據(jù)初始化

我們需要先確定當(dāng)前組件的id，當(dāng)父組件定義了子組件的id時(shí)則使用定義的id，否則則自動(dòng)生成id

initData() {
    let id = this.id;
    if (id == "") {
        id = getUId();
    }
    this.JAppsLockId = id;
},

（5）圖案數(shù)據(jù)初始化

我們需要根據(jù)傳來的size參數(shù)來渲染不同尺寸的圖案點(diǎn)陣。

initCell() {
    const id = this.JAppsLockId;
    const size = this.size;
    const content = document.getElementById(id);
    const cH = content.offsetHeight;
    const cW = content.offsetWidth;
    const cellH = (cH - 20 - size * 6 * 2) / size + "px";
    const cellW = (cW - 20 - size * 6 * 2) / size + "px";
    this.cellH = cellH;
    this.cellW = cellW;
}

（6）獲取圖案點(diǎn)陣的位置數(shù)據(jù)

我們可以先獲取圖案點(diǎn)陣的圓心坐標(biāo)及半徑，為后續(xù)進(jìn)行判斷計(jì)算作準(zhǔn)備。

initPointsArea() {
    this.pointsArea === [];
    const cell = document.getElementsByClassName("j-apps-lock-cell")[0];
    for (let i = 0; i < this.size * this.size; i++) {
        const point = document.getElementById("point-" + i);
        const x =
            (point.offsetLeft + point.offsetWidth + point.offsetLeft) /
            2;
        const y =
            (point.offsetTop + point.offsetHeight + point.offsetTop) /
            2;
        const r = cell.offsetHeight / 2;
        this.pointsArea.push({ x, y, r });
    }
},

（7）圖案連線首先我們需要先計(jì)算好需要連線的兩個(gè)圖案的坐標(biāo)。

drawLine() {
    const domPoints = this.getPoints();
    for (let i = 1; i < domPoints.length; i++) {
        const x1 =
            domPoints[i - 1].offsetWidth + domPoints[i - 1].offsetLeft;
        const x2 = domPoints[i].offsetWidth + domPoints[i].offsetLeft;
        const y1 =
            domPoints[i - 1].offsetHeight + domPoints[i - 1].offsetTop;
        const y2 = domPoints[i].offsetHeight + domPoints[i].offsetTop;
        this.createLine(
            x1,
            x2,
            y1,
            y2,
            domPoints[i - 1],
            domPoints[i]
        );
    }
}

通過計(jì)算好的坐標(biāo)數(shù)據(jù)，生成對(duì)應(yīng)的線段

createLine(x1, x2, y1, y2, p1, p2) {
    let line = document.createElement("span");
    line.classList.add("j-apps-lock-line");
    line.style.position = "absolute";
    line.style.display = "flex";
    line.style.left = "50%";
    line.style.top = "50%";
    line.style.margin = "center";
    line.style.width = Math.max(Math.abs(x2 - x1), 2) + "px";
    line.style.height = Math.max(Math.abs(y2 - y1), 2) + "px";
    line.style.backgroundColor = "gray";
    if (this.showArrow)
        line.appendChild(this.createArrow(x1, x2, y1, y2));
    if (x1 != x2 && y1 != y2) {
        const x = Math.abs(x1 - x2);
        const y = Math.abs(y1 - y2);
        line.style.height = Math.sqrt(x * x + y * y) + "px";
        line.style.width = "2px";
        let angle = (Math.atan(x / y) * 180) / Math.PI;
        if ((x2 > x1 && y2 > y1) || (x2 < x1 && y2 < y1))
            angle = "-" + angle;
        line.style.transform = `rotate(${angle}deg)`;
        line.style.transformOrigin = "left top";
        if (y2 > y1) p1.appendChild(line);
        else p2.appendChild(line);
    } else if (x2 > x1 || y2 > y1) {
        p1.appendChild(line);
    } else {
        p2.appendChild(line);
    }
    return line;
},

由上面代碼我們可以看到，在連線的繪制中，我們使用到了css中的旋轉(zhuǎn)屬性，其旋轉(zhuǎn)角度是使用Math.atan計(jì)算出來的，所以我們需要先對(duì)三角函數(shù)進(jìn)行一定了解。

javascript中計(jì)算三角函數(shù)

三角函數(shù)的定義

正弦（sin）      sinA = a / c       sinθ = y / r
余弦（cos）     cosA = b / c      cosθ = y / r
正切（tan）      tanA = a / b      tanθ = y / x
余切（cot）      cotA = b / a      cotθ = x / y
js中計(jì)算三角函數(shù)用Math.sin()等靜態(tài)方法，參數(shù)為弧度

角度與弧度都是角的度量單位

角度：兩條射線從圓心向圓周射出，形成一個(gè)夾角和夾角正對(duì)的一段弧。當(dāng)這段弧長(zhǎng)正好等于圓周長(zhǎng)的360分之一時(shí)，兩條射線的夾角的大小為1度。
弧度：兩條射線從圓心向圓周射出，形成一個(gè)夾角和夾角正對(duì)的一段弧。當(dāng)這段弧長(zhǎng)正好等于圓的半徑時(shí)，兩條射線的夾角大小為1弧度。

1弧度時(shí)，弧長(zhǎng)等于半徑，那弧長(zhǎng)是半徑的倍數(shù)就是弧度了
弧度 = 弧長(zhǎng) / 半徑
弧長(zhǎng) = 弧度 * 半徑
弧長(zhǎng) = （角度 / 360） * 周長(zhǎng)

角度與弧度換算

角度 = 弧長(zhǎng) / 周長(zhǎng) = 弧長(zhǎng)/(2πr) = 弧度*r/(2πr) = 弧度/(2π)
弧度 = 弧長(zhǎng) / 半徑 = [(角度 / 360) * 周長(zhǎng)] / 半徑 =[ (角度 / 360) * 2πr] / r = 角度 * π / 180

js計(jì)算三角函數(shù)

var sin30 = Math.sin(30 * Math.PI / 180)
console.log(sin30);  //0.49999999999999994

var cos60 = Math.cos(60 * Math.PI / 180)
console.log(cos60);  //0.5000000000000001

var tan45 = Math.tan(45 * Math.PI / 180)
console.log(tan45);  //0.9999999999999999

var asin30 = Math.round(Math.asin(sin30) * 180 / Math.PI)
console.log(asin30); //30

var acos60 = Math.round(Math.acos(cos60) * 180 / Math.PI)
console.log(acos60); //60

var atan45 = Math.round(Math.atan(tan45) * 180 / Math.PI)
console.log(atan45); //45

（8）圖案連線軌跡箭頭

我們只需要將箭頭元素添加到線段元素中，作為線段元素的子元素，我們便不用單獨(dú)對(duì)箭頭元素的旋轉(zhuǎn)角度進(jìn)行處理。

createArrow(x1, x2, y1, y2) {
    let arrow = document.createElement("span");
    arrow.classList.add("j-apps-lock-arrow");
    arrow.style.position = "relative";
    arrow.style.margin = "auto";
    arrow.style.fontSize = "1.5rem";
    arrow.style.zIndex = "10";
    arrow.style.display = "block";
    arrow.style.minWidth = "1.4rem";
    arrow.style.textAlign = "center";
    if (y1 === y2) {
        arrow.innerText = x1 > x2 ? "<" : ">";
        arrow.style.top = "-0.8rem";
    } else {
        arrow.innerText = y1 > y2 ? "∧" : "∨";
        arrow.style.left = "-0.65rem";
    }
    return arrow;
},

4.組件使用

<template>
    <div class="content">
        <j-apps-lock @commit="commit" size="4"></j-apps-lock>
    </div>
</template>
<script>
    export default {
        data() {
            return {
            }
        },
        methods:{
            commit(password) {
                this.$JToast(password);
            }
        }
    }
</script>