<template>
? <div class="sign">
? ? <div class="content">
? ? ? <canvas id="canvas" :width="width" :height="height"/>
? ? </div>
? ? <div class="btn">
? ? ? <button @click="clearCanvas()">清除</button>
? ? ? <button @click="save()">保存</button>
? ? </div>
? </div>
</template>
?
<script>
export default {
? name: 'App',
? data () {
? ? return {
? ? };
? },
? props: {
? ? // 畫(huà)布寬度
? ? width: {
? ? ? type: Number,
? ? ? default: window.innerWidth
? ? },
? ? // 畫(huà)布高度
? ? height: {
? ? ? type: Number,
? ? ? default: 500
? ? },
? ? // 筆觸半徑
? ? radius: {
? ? ? type: Number,
? ? ? default: 10
? ? },
? ? // 筆觸顏色
? ? color: {
? ? ? type: String,
? ? ? default: '#000'
? ? },
? ? // 畫(huà)布填充背景
? ? fillStyle: {
? ? ? type: String,
? ? ? default: '#ccc'
? ? }
? },
? created () {
? },
? mounted () {
? ? this.int();
? },
? methods: {
? ? // 繪制涂擦效果圓形
? ? // @param { integer } 圓心的x坐標(biāo)
? ? // @param { integer } 圓心的y坐標(biāo)
? ? // @param { integer } 圓心半徑
? ? // @param { string } 填充的顏色
? ? fillCircle (ctx, x, y, radius, fillColor) {
? ? ? ctx.fillStyle = fillColor || this.color;
? ? ? ctx.beginPath();
? ? ? ctx.moveTo(x, y);
? ? ? ctx.arc(x, y, radius, 0, Math.PI * 2, false); // 標(biāo)準(zhǔn)畫(huà)圓
? ? ? ctx.fill();
? ? },
? ? // 保存圖片
? ? save (name = '簽名圖片') {
? ? ? let imgBase64 = this.canvas.toDataURL('image/png'); // 獲取截圖base64, 1表示質(zhì)量(無(wú)損壓縮)
? ? ? let a = document.createElement('a');
? ? ? a.download = name + '.png'; // 必須要設(shè)置download屬性才能夠直接下載base64圖片
? ? ? a.href = imgBase64;
? ? ? a.click(); // 觸發(fā)點(diǎn)擊，起到下載效果
? ? },
? ? // 清除畫(huà)布
? ? clearCanvas () {
? ? ? let canvas = this.canvas;
? ? ? canvas.getContext('2d').fillStyle = this.fillStyle;
? ? ? canvas.getContext('2d').fillRect(0, 0, this.width, this.height);
? ? },
? ? // 數(shù)據(jù)初始化
? ? int () {
? ? ? this.canvas = document.querySelector('#canvas');
? ? ? let ctx = this.canvas.getContext('2d');
? ? ? let move = false; // 按下標(biāo)識(shí)
? ? ? ctx.fillStyle = this.fillStyle;
? ? ? ctx.fillRect(0, 0, this.width, this.height);
? ? ? // 事件兼容PC 移動(dòng)端
? ? ? let eventStart = 'ontouchstart' in document ? 'touchstart' : 'mousedown';
? ? ? let eventMove = 'ontouchmove' in document ? 'touchmove' : 'mousemove';
? ? ? let eventEnd = 'ontouchend' in document ? 'touchend' : 'mouseup';
? ? ? this.canvas.addEventListener(eventStart, (e) => {
? ? ? ? console.log(e);
? ? ? ? let sx = e.touches ? e.touches[0].pageX : e.pageX;
? ? ? ? let sy = e.touches ? e.touches[0].pageY : e.pageY;
? ? ? ? move = true;
? ? ? ? this.fillCircle(ctx, sx, sy, this.radius);
? ? ? }, false);
? ? ? this.canvas.addEventListener(eventMove, (e) => {
? ? ? ? let sx = e.touches ? e.touches[0].pageX : e.pageX;
? ? ? ? let sy = e.touches ? e.touches[0].pageY : e.pageY;
? ? ? ? move && this.fillCircle(ctx, sx, sy, this.radius);
? ? ? }, false);
? ? ? this.canvas.addEventListener(eventEnd, (e) => {
? ? ? ? move = false;
? ? ? }, false);
? ? }
? }
};
</script>
<style lang="less" scoped>
.sign{
? .btn {
? ? padding:10px;
? ? button {
? ? ? height: 50px;
? ? ? width:100%;
? ? ? margin-bottom:10px;
? ? ? font-size: 20px;
? ? }
? }
}
</style>