vue+canvas实现手写签字画板

最新推荐文章于 2023-07-27 16:10:57 发布
最新推荐文章于 2023-07-27 16:10:57 发布
阅读量3.3k 收藏 21
点赞数 3
分类专栏： 前端 vue 组件开发 文章标签： vue canvas 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Twinkle_sone/article/details/121476250
版权
前端 同时被 3 个专栏收录
96 篇文章 5 订阅
订阅专栏
vue
44 篇文章 3 订阅
订阅专栏
组件开发
28 篇文章 1 订阅
订阅专栏

vue+canvas实现手写签字画板

效果

在这里插入图片描述

预览

体验地址

用途

  • 涂鸦画板
  • 签名板

实现

使用canvas，通过监听鼠标动作来进行绘图。
关键代码如下：

drawing(event){
    if(!this.penClick) return;//鼠标按下状态
	const canvas = document.getElementById('canvas'); //获取canvas标签
	const ctx = canvas.getContext("2d");//创建 contextconst canvas = document.getElementById('canvas');  对象
    const stopAxisX = event.pageX;//当前鼠标x坐标
    const stopAxisY = event.pageY;//当前鼠标y坐标
	const left = document.getElementById('leftMenu');//可忽略
	const lw = left && left.offsetWidth ? (left.offsetWidth || 0) / 2 : 0;
    ctx.beginPath();//是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。 当你想创建一个新的路径时，调用此方法。
	const wsaW = window.screen.availWidth;
	const cl = canvas.offsetLeft;
	const ct = canvas.offsetTop;
    ctx.moveTo(this.startAxisX-cl,this.startAxisY - ct);//moveTo(x,y) 定义线条开始坐标
    ctx.lineTo(stopAxisX-cl,stopAxisY - ct	);//lineTo(x,y) 定义线条结束坐标
    ctx.strokeStyle = this.penColor;
    ctx.lineWidth = this.penWidth;
    ctx.lineCap = "round";
    ctx.stroke();// stroke() 方法来绘制线条
    this.startAxisX = stopAxisX;
    this.startAxisY = stopAxisY;
}

代码

JCanvasBroad.vue
<template>
	<div id="canvas-broad">
	    <canvas id="canvas" :width="width" :height="height">浏览器不支持canvas<!-- 如果不支持会显示这段文字 --></canvas>
	    <j-tab-bar v-if="toolsTabList"
				:tabList="tabList"
				:showTab="showTab">
			<template v-slot:back-ground-color>
				<div class="section">
				    <span class="info">设置背景颜色：</span>
					<input class="btn input-color" type="color" v-model="brackGroudColor" />
				</div>
			</template>
			<template v-slot:pen-color>
				<div class="section">
				    <span class="info">选择画笔颜色：</span>
					<input class="btn input-color" type="color" v-model="penColor" />
				</div>
			</template>
			<template v-slot:eraser>
				<div class="section">
				    <span class="info">选择橡皮擦：</span>
				    <button class="btn colorBtn" :style="'background-color:' + brackGroudColor + ';'" @click='setPenColor();'>{{brackGroudColor}}</button>
				</div>
				<div class="section">
					<button class="btn" @click="setBackGround()">清空画布</button>
				</div>
			</template>
			<template v-slot:pen-size>
				<div class="section">
					<span class="info">选择画笔大小：</span>
					<progress :value="progressValue" 
							style="cursor: pointer;"
							id="progress"
							max="1" 
							:title="progressValue * 100 +'%'"
							@click="setPenWidth">
					</progress>
					<span style="margin-left: 0.3125rem;">{{20 * progressValue}}px</span>
				</div>
			</template>
			<template v-slot:export>
				<div class="section">
					<span class="info">输出画板内容到下面的图片：</span>
					<button class="btn" @click="createImage();">EXPORT</button>
				</div>
				<img id="image_png">
			</template>
		</j-tab-bar>
		<template v-if="!toolsTabList">
			<div class="section">
				<button class="btn" @click="setBackGround()">清空画布</button>
			</div>
			<div class="section">
				<span class="info">选择画笔颜色：</span>
				<input class="input-color" type="color" v-model="penColor" />
			</div>
			<div class="section">
				<span class="info">设置背景颜色：</span>
				<input class="input-color" type="color" v-model="brackGroudColor" />
			</div>
			<div class="section">
				<span class="info">选择橡皮擦：</span>
				<button class="btn colorBtn" :style="'background-color:' + brackGroudColor + ';'" @click='setPenColor();'>{{brackGroudColor}}</button>
			</div>
			<div class="section">
				<span class="info">选择画笔大小：</span>
				<progress :value="progressValue" 
						style="cursor: pointer;"
						id="progress"
						max="1" 
						:title="progressValue * 100 +'%'"
						@click="setPenWidth">
				</progress>
				<span style="margin-left: 0.3125rem;">{{20 * progressValue}}px</span>
			</div>
			<div class="section">
				<span class="info">输出画板内容到下面的图片：</span>
				<button class="btn" @click="createImage();">EXPORT</button>
			</div>
			<img id="image_png">
		</template>
	</div>
</template>

<script>
	import JTabBar from '../../pagesTools/JTabBar.vue';
	export default{
		name:'JCanvasBroad',
		props:{
			height:{
				type:Number,
				default:-1
			},
			width:{
				type:Number,
				default:-1
			},
			defaultPenColor:{
				type:String,
				default:'#000000'
			},
			defaultPenSize:{
				type:Number,
				default:4
			},
			defaultBackGroundColor:{
				type:String,
				default:"#ffffff"
			},
			toolsTabList:{
				type:Boolean,
				default:false
			}
		},
		components:{
			JTabBar
		},
		watch:{
			brackGroudColor:{
				handler(newVal,oldVal){
					this.setBackGround();
				}
			}
		},
		data() {
			return{
				penColor:"#000000",
				penWidth:4,
				penClick:false,
				startAxisX:0,
				startAxisY:0,
				brackGroudColor:"#ffffff",
				progressValue:0.2,
				tabList:[{
					label:'背景颜色',
					id:'back-ground-color'
				},{
					label:'画笔颜色',
					id:'pen-color'
				},{
					label:'橡皮擦',
					id:'eraser'
				},{
					label:'画笔大小',
					id:'pen-size'
				},{
					label:'导出图片',
					id:'export'
				}],
				showTab:0
			}
		},
		created(){
			
		},
		mounted() {
			this.init();
		},
		methods:{
			//页面初始化
			init(){
				let height = this.height;
				let width = this.width;
				if(width == -1){
					const cbw = document.getElementById('canvas-broad');
					width = cbw.offsetWidth * 0.9;
					height = cbw.offsetHeight * 0.6;
					this.width = width;
					this.height = height;
				}
				this.penColor = this.defaultPenColor;
				this.brackGroudColor = this.defaultBackGroundColor;
				this.penWidth = this.defaultPenSize;
				
				let canvas = document.getElementById('canvas'); //获取canvas标签
				let ctx = canvas.getContext("2d");//创建 context 对象
				ctx.fillStyle = this.brackGroudColor;//画布背景色
				ctx.fillRect(0,0,width,height);//在画布上绘制 width * height 的矩形，从左上角开始 (0,0)
				canvas.addEventListener("mousemove",this.drawing); //鼠标移动事件
				canvas.addEventListener("mousedown",this.penDown); //鼠标按下事件
				canvas.addEventListener("mouseup",this.penUp); //鼠标弹起事件
			},
			getWidthSelect(width){
				if(width == this.penWidth){
					return "btn bg penBtn fw"
				}
				return "btn bg penBtn"
			},
			getColorSelect(color){
				if(color == this.penColor){
					return 'btn colorBtn fw'
				}
				return 'btn colorBtn';
			},
			setBackGround(){
				const canvas = document.getElementById('canvas'); //获取canvas标签
				const ctx = canvas.getContext("2d");//创建 context 对象
				ctx.fillStyle = this.brackGroudColor;//画布背景色
				ctx.fillRect(0,0,this.width,this.height);//在画布上绘制 600x300 的矩形，从左上角开始 (0,0)
			},
			setPenWidth(event){
				const progress = document.getElementById('progress');
				this.progressValue = (event.pageX - progress.offsetLeft) / progress.offsetWidth;
				this.penWidth = 20 * this.progressValue;
			},
			//设置画笔颜色
			setPenColor(color = ''){
				if(color == '') this.penColor = this.brackGroudColor;
			    else this.penColor = color;
			},
			penDown(event){
			    this.penClick = true;
			    this.startAxisX = event.pageX;
			    this.startAxisY = event.pageY;
			},
			penUp(){
			    this.penClick = false;
			},
			drawing(event){
			    if(!this.penClick) return;
				const canvas = document.getElementById('canvas'); //获取canvas标签
				const ctx = canvas.getContext("2d");//创建 contextconst canvas = document.getElementById('canvas');  对象
			    const stopAxisX = event.pageX;
			    const stopAxisY = event.pageY;
				const left = document.getElementById('leftMenu');
				const lw = left && left.offsetWidth ? (left.offsetWidth || 0) / 2 : 0;
			    ctx.beginPath();
				const wsaW = window.screen.availWidth;
				const cl = canvas.offsetLeft;
				const ct = canvas.offsetTop;
			    ctx.moveTo(this.startAxisX-cl,this.startAxisY - ct);//moveTo(x,y) 定义线条开始坐标
			    ctx.lineTo(stopAxisX-cl,stopAxisY - ct	);//lineTo(x,y) 定义线条结束坐标
			    ctx.strokeStyle = this.penColor;
			    ctx.lineWidth = this.penWidth;
			    ctx.lineCap = "round";
			    ctx.stroke();// stroke() 方法来绘制线条
			    this.startAxisX = stopAxisX;
			    this.startAxisY = stopAxisY;
			},
			createImage() {
				const canvas = document.getElementById('canvas'); //获取canvas标签
			    const img_png_src = canvas.toDataURL("image/png"); //将画板保存为图片格式的函数
			    document.getElementById("image_png").src = img_png_src;
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	*{
	    margin: 0;
	    padding: 0;
	}
	#canvas-broad{
	    margin: 0 auto;
	    /*text-align: center;*/
	}
	#canvas{
	    border: 2px solid #ff6700;
	    cursor:crosshair;
	    /*不能用这种方式给canvas设置宽高*/
	    /*width: 600px;*/
	    /*height: 300px;*/
	}
	.btn{
	    width:70px;
	    height: 40px;
	    border-radius: 10px;
	    border: 1px solid #aaa;/*去掉<button>默认边框*/
	    outline:none;/*去掉<button>选中时的默认边框*/
		cursor: pointer;
	}
	.input-color{
	    width:70px;
	    height: 40px;
	    border-radius: 10px;
	    border: 0;/*去掉<button>默认边框*/
	    outline:none;/*去掉<button>选中时的默认边框*/
	}
	#image_png{
	    width: 300px;
	    height: 150px;
	    border:  2px solid #ff6700;
	    display: block;
	    margin: 10px auto;
	 }
	.section{
	    margin-top: 10px;
	}
	.info{
	    color: #f0f;
	    font-size: 14px;
	    line-height: 40px;
	}
	.bg{
	    background: #ff6700;
	}
	.fw{
	    font-weight: 700;
	}
</style>
JTabBar.vue
<template>
	<div class="j-tab-bar">
		<div class="bar-items">
			<div v-for="(item,index) in tabList"
				:key="item.id"
				:class="getBarClass(index,'bar-item')"
				:title="item.label"
				@click="barClick(index)">
				{{item.label}}
			</div>
		</div>
		<div v-for="(item,index) in tabList" 
			:key="item.id"
			>
			<slot v-if="item.id == tabList[showTab].id" 
				:name="item.id">
				
			</slot>
		</div>
	</div>
</template>

<script>
	export default{
		name:"JTabBar",
		props:{
			tabList:{
				type:Array,
				default:[
					{
						label:'tab',
						id:'tab'
					},
					{
						label:'tab1',
						id:'tab1'
					}
				]
			},
			defaultShowTab:{
				type:Number,
				default:0
			}
		},
		data() {
			return{
				showTab:0
			}
		},
		created() {
			this.init();
		},
		methods:{
			init(){
				this.showTab = this.defaultShowTab;
			},
			barClick(index){
				this.showTab = index;
				this.$emit('clickTab',index);
			},
			getBarClass(index,val=''){
				let res = '';
				if(index == this.showTab){
					res += 'active-tab';
				}
				return res + ' ' + val;
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.j-tab-bar{
		.bar-items{
			display: flex;
			flex-direction: row;
			line-height: 2rem;
			.bar-item{
				flex: 1;
				color: black;
				border: 1px solid deepskyblue;
				cursor: pointer;
			}
			.active-tab{
				color: cadetblue;
			}
		}
	}
</style>

npm引入

组件以上传到npm，可以直接install使用

1.安装
npm i @jyeontu/jvuewheel -S
2.引入
//引入组件库
import jvuewheel from '@jyeontu/jvuewheel'
//引入样式
import '@jyeontu/jvuewheel/lib/jvuewhell.css'
Vue.use(jvuewheel);
3.vue中引用组件
<j-canvas-broad class = "canvas-baroad" 
				:toolsTabList = "true">
</j-canvas-broad>

资源地址

组件文档

文档地址：http://120.79.163.94/JYeontuComponents/#/homePage

代码地址

Gitee：https://gitee.com/zheng_yongtao/jyeontu-component-warehouse/tree/master/JYeontuComponentWarehouse

canvas学习

MDN地址：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D

JYeontu
关注
  • 3
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 使用 canvas 实现手写电子签名
11-20
功能 兼容 PC 和 Mobile； 画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标偏移）； 自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色； 支持裁剪 （针对需求：有的签字需要裁剪掉四周空白）。 导出图片格式为 base64 ； 示例demo 安装 npm install vue-esign --save 使用 main.js 中引入 import vueEsign from 'vue-esign' Vue.use(vueEsign) 页面中使用 必须设置 ref ，用来调用组件的两个内置方法 reset() 和 generate
vue+canvas实现拼图小游戏
01-18
利用 vue+canvas 实现拼图小游戏，供大家参考，具体内容如下 思路步骤 一个拼图拼盘和一个原图参照 对原图的切割以及随机排序 通过W/A/D/S或上下左右进行移动 难度的自主选择 对拼图是否完成的判定 JS实现部分 数据分析 row：拼图的总行数；column：拼图的总列数。 (用来设置拼图难度，也是每个拼图块宽高的设置规则) pic[{x,y,row,column,index}]：小拼图的集合，其内元素为小拼图的数据结构。 (x、y：拼图块在canvas的绘制规则，初始化后不会进行改变；row、column：对原图进行切割并绘制的规则；index：用来判
vue+canvas绘制图形
01-09
文件中有封装好的绘制圆形、矩形以及不规则图形的方法，直接拿到适合自己的场合下用即可
vue2-drawboard:基于vue2.x的画板
05-26
vue2画板 介绍 这是基于vue2.x和canvas的绘图板工具。 通过此工具，您可以在图片上标记所需的信息并获取相应的数据。 此外，您还可以将其用作普通绘图板，在其中可以自由在其上绘制图形。 当前支持的类型为折线，矩形，多边形，点等。可以支持放大，缩小，旋转，平移和其他操作。此外，您还可以灵活地配置图形信息。 安装 npm install vue2-drawboard -S 用法 import DrawBoard from 'vue2-drawboard' import 'vue2-drawboard/lib/drawboard.css' Vue . use ( DrawBoard ) ; 例子 < template> < div xss=removed> < drawboard : url = " url " @ updateData = " updateData
vue+canvas实现移动端手写签名
12-28
本文实例为大家分享了vue+canvas实现移动端手写签名的具体代码，供大家参考，具体内容如下 <template> <div class=sign> <div class=header> <i class=el-icon-arrow-left click=goBack></i> <span class=title>个人签名</span> </div> <section class=signature> <div class=signatureBox> <div class=canvasBox
canvas画板_在vue项目中如何使用canvas制作画板
weixin_39772352的博客
11-28 714
用canvas做画板，效果如下直线矩形其他更多效果可以复制下面的demo尝试demo 直线 矩形 圆圈 铅笔 曲线 多边形 边数 橡皮 ...
vue3+canvas手写签名
Qdc_k的博客
03-20 307
【代码】vue3+canvas手写签名。
uniapp（vue3）cavans实现电子签名功能
cyhhjj的博客
03-16 1203
uniapp（vue3）+cavans实现电子签名功能
VUE项目开发，使用canvas实现图片签名编辑手写板功能
weixin_39277183的博客
10-11 2132
VUE项目开发，使用canvas实现图片签名编辑手写板功能
vue 生成海报，解决跨域问题 ，下载图片到本地
hflxia的博客
09-09 3368
// 获取图片元素 // 创建图片元素 var img = new Image(); //设置图片跨域 img.setAttribute("crossOrigin", "anonymous"); //设置图片路径 img.src = url; //下载图片 img.onload = function() { //创建画布 var can = document.createEleme...
canvas之手势锁屏
lbs311709000127的博客
03-27 714
这个是效果图 首先是创建canvasLock这个对象，并且设置width（画布的宽）、height（画布的高）、chooseType（每行1圆得数量）、pwd（解锁手势，用数字表示的字符串）属性 window.canvasLock=function(obj){ this.width=obj.width; this.height=obj.height; this...
vue中用canvas实现移动端手写板、电子签名功能
luoluo90的博客
12-19 9356
html部分： js部分： css部分： 
vue中canvas签名
weixin_42433708的博客
05-28 2066
vue用canvas横屏签名 最近遇到一个签名需求由于canvas一些特性，横屏签名不好控制，也是多方借鉴才解决，写真就是为了记录下，方便有需要的同学。 js代码如下： import Draw from "../../../libs/draw"; export default { name: "canvas", data() { return { degree...
vue3 电子签名
qq_40133610的博客
09-22 1140
vue3 电子签名
vue3实现电子签名
最新发布
zhangyizuishuai的博客
07-27 532
【代码】vue3实现电子签名。
canvas实现绘画板
yang_da_da的博客
09-02 2792
历时一周开发了一个简单的canvas实现的画板功能，这是在vue+elementui项目里开发的，支持画笔、橡皮擦、回退、清除、保存图片、切换颜色、设置宽度等。先看最终效果： 1.我们先创建创建一个canvas元素 <div class="canvas"> <canvas ref="canvas" id="canvas"></canvas> </d...
vue项目使用canvas画图 实现canvas带背景的橡皮擦 canvas转base64 canvas转file文件方法
蒲公英芽的博客
11-01 7687
用户手动在画板上进行绘制图案，绘制完成后，将绘制好的作品上传到服务器。 涉及到的功能点： 1. 项目的运行环境是在手机端，canvas 的尺寸单位是px，需要做好不同设备的适配。 2. 选择画笔颜色、大小后，笔触要跟随手指的移动画出图案。 3. 画板的橡皮擦功能，带有背景图片的canvas，实现橡皮擦功能。 4.canvas的一键清除画布功能。 5. 上传图片到服务器，将用户画好的作品上传到服务器。
使用vue+element-ui+canvas实现一个画板的功能，可以调节画笔的颜色
jsmeng626的博客
05-18 1707
这样，我们就完成了一个简单的画板功能，并且可以通过element-ui的颜色选择器来调节画笔的颜色。
Vue趣味【Vue3+Element Plus+Canvas实现一个简易画板；支持导出为图片】
商务合作/软件定制/学习交流
03-23 3884
Vue3+Element-Plus+Canvas实现简易画板
vue3+canvas实现拓扑图
05-23
实现拓扑图可以使用 Vue3 和 Canvas 结合来完成。下面是一个简单的实现过程： 1. 首先，需要安装 Vue3 和 Canvas 库： ``` bash npm install vue@next npm install canvas --save ``` 2. 在 Vue3 中创建一个组件，用于渲染拓扑图。在组件中引入 Canvas 库： ``` javascript <template> <canvas ref="canvas"></canvas> </template> <script> import { onMounted, ref } from 'vue' import Canvas from 'canvas' export default { setup() { const canvasRef = ref(null) onMounted(() => { const canvas = canvasRef.value const ctx = canvas.getContext('2d') // 在这里进行绘制 }) return { canvasRef } } } </script> ``` 3. 在组件的 `onMounted` 钩子函数中，获取 Canvas 的上下文对象 `ctx`，并进行绘制。可以使用 Canvas 的 API 画出线条、圆形等形状，也可以使用外部库来绘制更复杂的图形。 4. 在绘制时，可以将节点和线条信息存储在数组中，以方便后续的更新和交互。例如： ``` javascript // 存储节点和线条信息的数组 const nodes = [ {x: 100, y: 100, r: 20, color: '#ff0000'}, {x: 200, y: 200, r: 30, color: '#00ff00'} ] const links = [ {source: 0, target: 1}, {source: 1, target: 2} ] // 绘制节点 nodes.forEach(node => { ctx.beginPath() ctx.arc(node.x, node.y, node.r, 0, Math.PI * 2) ctx.fillStyle = node.color ctx.fill() }) // 绘制线条 links.forEach(link => { const source = nodes[link.source] const target = nodes[link.target] ctx.beginPath() ctx.moveTo(source.x, source.y) ctx.lineTo(target.x, target.y) ctx.stroke() }) ``` 以上就是一个简单的 Vue3 和 Canvas 实现拓扑图的过程。需要注意的是，Vue3 的模板中不能直接使用 Canvas，需要通过 `ref` 引用实现。另外，绘制时需要注意节点和线条的位置信息，以及 Canvas 的坐标系。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JYeontu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值