基于Vue實現(xiàn)手勢簽名

更新時間：2022年08月29日 16:48:27 作者：qq_38192105

這篇文章主要為大家詳細介紹了基于Vue實現(xiàn)手勢簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了基于Vue實現(xiàn)手勢簽名的具體代碼，供大家參考，具體內容如下

廢話不多說，直接上效果圖&源碼

代碼如下

1. template

<template>
? <main class="hand-sign-page">
? ? <header class="sign-head">請在下方區(qū)域內簽名</header>
? ? <div id="signContain" :style="{'--back': background}"></div>
? ? <footer class="sign-foot">
? ? ? <button @click="clearCanvas">清除</button>
? ? ? <button @click="saveCanvas">保存</button>
? ? </footer>
? ? <img v-show="vaildSign" class="sign-img" :src="vaildSign" alt=" "/>
? </main>
</template>

2. js

<script>
? export default {
? ? name: "hand-sign",
? ? data() {
? ? ? return {
? ? ? ? domEl: null,//繪制canvas的父級div
? ? ? ? canvas: null,//畫布
? ? ? ? cxt: null,//繪畫環(huán)境
? ? ? ? linewidth:1,//線條粗細，選填
? ? ? ? color:"black",//線條顏色，選填
? ? ? ? background:"aliceblue",//線條背景，選填
? ? ? ? vaildSign: null
? ? ? }
? ? },
? ??
? ? mounted() {
? ? ? this.initCanvas();
? ? },

? ? methods: {
? ? ? initCanvas() {
? ? ? ? this.domEl = document.getElementById("signContain");
? ? ? ? this.canvas = document.createElement("canvas");
? ? ? ? this.domEl.appendChild(this.canvas);
? ? ? ? this.cxt = this.canvas.getContext("2d");
? ? ? ? this.canvas.width = this.domEl.clientWidth;
? ? ? ? this.canvas.height = this.domEl.clientHeight;
? ? ? ? this.cxt.fillStyle = this.background;
? ? ? ? this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.height);
? ? ? ? this.cxt.strokeStyle = this.color;
? ? ? ? this.cxt.lineWidth = this.linewidth;
? ? ? ? //this.cxt.lineCap = "round";
? ? ? ? this.clearCanvas();//先清理下

? ? ? ? //開始繪制
? ? ? ? this.canvas.addEventListener("touchstart", (e) => {
? ? ? ? ? this.cxt.beginPath();
? ? ? ? ? this.cxt.moveTo(e.changedTouches[0].pageX - e.target.offsetLeft, e.changedTouches[0].pageY - e.target.offsetTop);
? ? ? ? }, false);

? ? ? ? //繪制中
? ? ? ? this.canvas.addEventListener("touchmove", (e)=> {
? ? ? ? ? this.cxt.lineTo(e.changedTouches[0].pageX - e.target.offsetLeft, e.changedTouches[0].pageY - e.target.offsetTop);
? ? ? ? ? this.cxt.stroke();
? ? ? ? }, false);
? ? ? ??
? ? ? ? //結束繪制
? ? ? ? this.canvas.addEventListener("touchend", (e)=> {
? ? ? ? ? this.cxt.closePath();
? ? ? ? }, false);
? ? ? },

? ? ? //清除畫布
? ? ? clearCanvas() {
? ? ? ? this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
? ? ? },

? ? ? //保存畫布
? ? ? saveCanvas() {
? ? ? ? console.log(this.blankCanvas());//檢查畫布是否為空白
? ? ? ? if(this.blankCanvas()) {
? ? ? ? ? window.alert('請簽名');
? ? ? ? }else {
? ? ? ? ? this.vaildSign = this.canvas.toDataURL();
? ? ? ? }
? ? ? },

? ? ? //canvas非空驗證
? ? ? blankCanvas() {
? ? ? ? let blank = document.createElement('canvas');//系統(tǒng)獲取一個空canvas對象
? ? ? ? blank.width = this.canvas.width;
? ? ? ? blank.height = this.canvas.height;
? ? ? ? return this.canvas.toDataURL() == blank.toDataURL();//比較值相等則為空
? ? ? },

? ? }
? }
</script>

3. css

<style lang="less" scoped>
? .hw(@h, @w: @h) {
? ? height: @h;
? ? width: @w
? }

? .hand-sign-page{
? ? background-color: #fff;
? ? .sign-head {
? ? ? text-align: center;
? ? ? padding: 10px;
? ? ? border-bottom: 1px solid #ebebeb;
? ? ? color: #666;
? ? ? font-size: 14px;
? ? }

? ? #signContain {
? ? ? .hw(400px, 100%);
? ? ? background-color: var(--back);
? ? }

? ? .sign-foot{
? ? ? display: flex;
? ? ? justify-content: center;
? ? ? margin: 15px;

? ? ? button {
? ? ? ? margin: 0 15px;
? ? ? ? padding: 10px 20px;
? ? ? ? background-color: #ddd;
? ? ? ? border-radius: 5px;

? ? ? ? &:active {
? ? ? ? ? background-color: #efefef;
? ? ? ? }
? ? ? }
? ? }

? ? .sign-img {
? ? ? .hw(100px, 200px);
? ? ? display: block;
? ? ? margin: 10px auto;
? ? }
? }

</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: