<template>
<div class="boardBox" ref="boardBox">
<canvas ref="board"
@mousedown="pcStart"
@mousemove="pcMove"
@mouseup="pcEnd">
</canvas>
<div class="sign-btn">
<div class="clear" @click="clear">
清空
</div>
<div class="save" @click="save">
保存
</div>
</div>
</div>
</template>
<script>
export default {
name: "signatureLine",
components: {},
data() {
return {
ctx: null,
point: {
x: 0,
y: 0
},
moving: false, // 是否正在繪制中且移動
board: "",
flg:false,//識別用戶是否畫了
};
},
mounted() {
this.board = this.$refs.board; // 獲取DOM
this.board.width = this.$refs.boardBox.offsetWidth; // 設(shè)置畫布寬
this.board.height = this.$refs.boardBox.offsetHeight; // 設(shè)置畫布高
console.log(this.board.width,this.board.height)
this.ctx = this.board.getContext("2d"); // 二維繪圖
this.ctx.strokeStyle = "#000000"; // 顏色
this.ctx.lineWidth = 3; // 線條寬度
},
methods: {
// 鼠標(biāo)按下(開始)
pcStart(e) {
let x = e.offsetX,
y = e.offsetY; // 獲取鼠標(biāo)在畫板(canvas)的坐標(biāo)
this.point.x = x;
this.point.y = y;
this.ctx.beginPath();
this.moving = true;
},
// 鼠標(biāo)移動(移動中...)
pcMove(e) {
this.flg = true
if (this.moving) {
let x = e.offsetX,
y = e.offsetY; // 獲取鼠標(biāo)在畫板(canvas)的坐標(biāo)
this.ctx.moveTo(this.point.x, this.point.y); // 把路徑移動到畫布中的指定點歧寺,不創(chuàng)建線條(起始點)
this.ctx.lineTo(x, y); // 添加一個新點部逮,然后創(chuàng)建從該點到畫布中最后指定點的線條哮幢,不創(chuàng)建線條
this.ctx.stroke(); // 繪制
(this.point.x = x), (this.point.y = y); // 重置點坐標(biāo)為上一個坐標(biāo)
}
},
// 鼠標(biāo)松開(結(jié)束)
pcEnd() {
if (this.moving) {
this.ctx.closePath(); // 停止繪制
this.moving = false; // 關(guān)閉繪制開關(guān)
}
},
clear() {
this.flg=false
this.ctx.clearRect(0, 0, this.board.width, this.board.height);
},
save() {
if(this.flg){
const imgBase64 = this.$refs.board.toDataURL();
// console.log(imgBase64);
console.log('畫了')
}else{
console.log('沒有畫')
}
}
}
};
</script>
<style scoped lang="scss">
.boardBox {
margin: 100px auto 20px;
// width: 80vw;
// height: 35vh;
width: 200px;
height: 80px;
background: #eee;
canvas {
border: 1px solid #298cff;
}
}
.sign-btn div {
width: 175px;
text-align: center;
height: 70px;
line-height: 70px;
color: #ffffff;
}
.sign-btn div:active {
background-color: #cccccc;
color: #333333;
}
.sign-btn .clear {
background-color: #ff8f58;
}
.sign-btn .save {
background-color: #0599d7;
}
</style>
canvas手動簽名vue組件
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門备埃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來姓惑,“玉大人,你說我怎么就攤上這事按脚∮诒校” “怎么了?”我有些...
- 文/不壞的土叔 我叫張陵乘寒,是天一觀的道長望众。 經(jīng)常有香客問我,道長伞辛,這世上最難降的妖魔是什么烂翰? 我笑而不...
- 正文 為了忘掉前任,我火速辦了婚禮蚤氏,結(jié)果婚禮上甘耿,老公的妹妹穿的比我還像新娘。我一直安慰自己竿滨,他們只是感情好佳恬,可當(dāng)我...
- 文/花漫 我一把揭開白布捏境。 她就那樣靜靜地躺著,像睡著了一般毁葱。 火紅的嫁衣襯著肌膚如雪垫言。 梳的紋絲不亂的頭發(fā)上,一...
- 文/蒼蘭香墨 我猛地睜開眼坯癣,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了最欠?” 一聲冷哼從身側(cè)響起示罗,我...
- 正文 年R本政府宣布摄乒,位于F島的核電站,受9級特大地震影響残黑,放射性物質(zhì)發(fā)生泄漏馍佑。R本人自食惡果不足惜,卻給世界環(huán)境...
- 文/蒙蒙 一梨水、第九天 我趴在偏房一處隱蔽的房頂上張望拭荤。 院中可真熱鬧,春花似錦疫诽、人聲如沸舅世。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽雏亚。三九已至缨硝,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間罢低,已是汗流浹背追葡。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- github項目地址:https://github.com/wuhaoran0409/vue-water-mark...
- 上節(jié)回顧 上篇文章手動封裝多項選擇器組件(一)酿炸,大概講述了整體設(shè)計思路,以及MultiPicker的設(shè)計編碼涨冀,同時...
- 組件效果演示 多項選擇器是移動端常見的通用組件填硕,比如多級分類、多級菜單的展示都離不開它鹿鳖,它還可以進一步擴展為時間選...