专业网站建设服务,大连建设工程信息网(官网),网站开发语言更换,花生壳做的网站文章标题 01 功能说明02 效果预览2.1 横版2.2 竖版 03 使用方式04 横向签名组件源码4.1 html 代码4.2 业务 Js4.3 样式 Css 05 竖向签名组件源码5.1 布局 Html5.2 业务 Js5.3 样式 Css 01 功能说明
技术栈#xff1a;uniapp、vue、canvas 2d
需求#xff1a;
实现横版的全… 文章标题 01 功能说明02 效果预览2.1 横版2.2 竖版 03 使用方式04 横向签名组件源码4.1 html 代码4.2 业务 Js4.3 样式 Css 05 竖向签名组件源码5.1 布局 Html5.2 业务 Js5.3 样式 Css 01 功能说明
技术栈uniapp、vue、canvas 2d
需求
实现横版的全名字帖式米字格签名组件竖版逐字的字帖式米字格签名组件支持配置文字描述、画笔颜色、画笔大小等提供 submit 事件当点击提交按钮时触发回调参数是canvas转化为图片的地址
02 效果预览
2.1 横版 2.2 竖版 03 使用方式
// 使用横向签名------------------------
templateHorizontalSign signText赵钱孙 submithandleSubmit /
/templatescript
import HorizontalSign from /components/HorizontalSign.vue;export default {components: { HorizontalSign },methods: {handleSubmit(imagePath) {console.log(--image--, imagePath);},},
}
script // 使用竖向签名------------------------
templateVerticalSign signText赵钱孙 submithandleSubmit /
/templatescript
import VerticalSign from /components/VerticalSign.vue;export default {components: { VerticalSign },methods: {handleSubmit(imagePath) {console.log(--image--, imagePath);},},
}
script 04 横向签名组件源码
4.1 html 代码
templateview classwrapping!-- header 定位后以左上角顺时针旋转 90° --view classheader-title flex col-center!-- text 签名/text --!-- 预览图片图片本身是正向的但由于父元素旋转了90°所以正好能横向观看 --!-- image :srcpreviewImage modeaspectFit classsmall-preview / --text classdesc-text{{ description }}/text/view!-- 实际保持直立正向 canvas 容器 --view classcanvas-wrapper!-- 只展示限制数量文字的米字格超过配置数量文字则不展示 --view classchar-group flex-col flex-center v-ifsignText signText.length riceGridLimitview classchar-box v-for(item, index) in signText :keyindex{{ item }}/view/viewcanvasidsignatureCanvastype2dclasssignature-canvastouchstarthandleTouchStarttouchmovehandleTouchMovetouchendhandleTouchEndtouchcancelhandleTouchEnddisable-scroll/canvas/view!-- footer 定位后以右下角顺时针旋转 90° --view classfooter-btn flexview classaction-btn clickresetCanvas重签/viewview classaction-btn submit-btn clickhandleSubmit{{ submitText }}/view/view!--用于绘制并生成旋转为正向签名图片的 canvas 容器--canvas idpreviewCanvas type2d classpreview-canvas/canvas/view
/template4.2 业务 Js
script
export default {props: {description: {type: String,default: 请使用正楷字体逐字签写, // 文字描述},submitText: {type: String,default: 提交, // 提交按钮文字},dotSize: {type: Number,default: 4, // 签名笔大小},penColor: {type: String,default: #000000, // 签名笔颜色},signText: {type: String,default: , // 签名文字},riceGridLimit: {type: Number,default: 3, // 米字格展示字数最大限制},},data() {return {mainCtx: null,mainCanvas: null,isDrawing: false,touchPoints: [],signIsMove: false,previewImage: ,canvasRatio: 1,};},mounted() {this.canvasRatio uni.getWindowInfo().pixelRatio ?? 1;this.initCanvas();},methods: {initCanvas() {const domItem uni.createSelectorQuery().in(this).select(#signatureCanvas);domItem.fields({ node: true, size: true }).exec((res) {// Canvas 对象this.mainCanvas res[0]?.node;// 渲染上下文this.mainCtx this.mainCanvas.getContext(2d);// Canvas 画布的实际绘制宽高const width res[0].width;const height res[0].height;// 初始化画布大小this.mainCanvas.width width * this.canvasRatio;this.mainCanvas.height height * this.canvasRatio;this.mainCtx.scale(this.canvasRatio, this.canvasRatio);this.setPen();});},setPen() {this.mainCtx.strokeStyle this.penColor;this.mainCtx.lineWidth this.dotSize;this.mainCtx.lineCap round;this.mainCtx.lineJoin round;},handleTouchStart(e) {const point {x: e.changedTouches[0].x,y: e.changedTouches[0].y,};this.touchPoints.push(point);this.isDrawing true;},handleTouchMove(e) {if (!this.isDrawing) return;const point {x: e.touches[0].x,y: e.touches[0].y,};this.touchPoints.push(point);const len this.touchPoints.length;if (len 2) {const prevPoint this.touchPoints[len - 2];const currentPoint this.touchPoints[len - 1];this.mainCtx.beginPath();this.mainCtx.moveTo(prevPoint.x, prevPoint.y);this.mainCtx.lineTo(currentPoint.x, currentPoint.y);this.mainCtx.stroke();this.signIsMove true;}},handleTouchEnd() {this.isDrawing false;this.touchPoints [];},resetCanvas() {if (!this.signIsMove) {return;}this.mainCtx.clearRect(0, 0, 1000, 1000);this.setPen();this.touchPoints [];this.previewImage ;this.signIsMove false;},async handleSubmit() {if (!this.signIsMove) {uni.showToast({ title: 请先完成签名, icon: none });return;}try {const _this this;uni.canvasToTempFilePath({canvas: this.mainCanvas,quality: 1,fileType: png,success: (res) {let path res.tempFilePath;_this.handlePreviewImage(path);},fail: (res) {uni.showToast({ title: 提交失败请重新尝试, icon: none });},});} catch (err) {uni.showToast({ title: 签名失败请重试, icon: none });} finally {uni.hideLoading();}},handlePreviewImage(imagePath) {const _this this;const previewDom uni.createSelectorQuery().in(_this).select(#previewCanvas);previewDom.fields({ node: true, size: true }).exec((res) {// Canvas 对象const canvas res[0]?.node;// 渲染上下文const previewCtx canvas.getContext(2d);const image canvas.createImage();image.src imagePath;image.onload () {let { width, height } image;// 获取图片的宽高初始画布canvas交换宽高canvas.width height;canvas.height width;// 设置白色背景previewCtx.fillStyle #FFFFFF;previewCtx.fillRect(0, 0, height, width);// 图片逆时针旋转90度且换为弧度previewCtx.rotate((-90 * Math.PI) / 180);// 旋转后调整绘制的位置下移一个宽度的距离previewCtx.drawImage(image, -width, 0);};// 最终导出setTimeout(() {uni.canvasToTempFilePath({canvas,fileType: png, // 指定文件类型quality: 1, // 最高质量success: (res) {_this.previewImage res.tempFilePath;uni.previewImage({ urls: [res.tempFilePath], current: 0 });_this.$emit(submit, res.tempFilePath);},fail: (err) {uni.showToast({ title: 合成失败请重试, icon: none });},},_this);}, 300); // 增加最终导出前的延迟});},},
};
/script4.3 样式 Css
style scoped
.wrapping {position: relative;padding: 20rpx;margin: 20rpx;background-color: #fff;box-sizing: border-box;
}.header-title {position: absolute;right: 20rpx;top: 20rpx;height: 50rpx;z-index: 1000;transform-origin: top left;transform: translateX(100%) rotate(90deg);font-size: 32rpx;color: #333;
}.desc-text {color: #969799;
}.small-preview {width: 100rpx;height: 50rpx;border-bottom: 1px solid #333;
}.canvas-wrapper {position: relative;margin: auto;width: 60%;height: 80vh;background: #f7f8fa;
}.char-group {position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;pointer-events: none;user-select: none;z-index: 1;gap: 20rpx;
}.char-box {padding: 36rpx;width: 30vw;height: 30vw;transform: rotate(90deg);font-size: 30vw;line-height: 30vw;text-align: center;color: #eeeeee;/* 使用虚线边框框住字体 *//* border: 1px dashed #ccc; *//* 使用米字格照片当背景图 */background: url(https://img1.baidu.com/it/u2622499137,3527900847fm253fmtautoapp138fJPEG?w500h500) no-repeat;background-size: 100%;text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
}.signature-canvas {position: relative;width: 100%;height: 100%;z-index: 2;
}.footer-btn {position: absolute;left: 20rpx;bottom: 20rpx;transform-origin: bottom right;transform: translateX(-100%) rotate(90deg);z-index: 1000;gap: 32rpx;
}.action-btn {text-align: center;width: 200rpx;height: 96rpx;border-radius: 100rpx;font-size: 32rpx;line-height: 96rpx;color: #3874f6;border: 2rpx solid #3874f6;background: #fff;
}.submit-btn {color: #fff;border: 2rpx solid #3874f6;background: #3874f6;
}.preview-canvas {visibility: hidden;position: fixed;/* 将画布移出展示区域 */top: 100vh;left: 100vw;opacity: 0;z-index: 0;
}
/style05 竖向签名组件源码
5.1 布局 Html
templateview classsignature-containerview classdesc-text{{ description }}/viewview classsignature-areaview classcanvas-wrapper!-- 逐字展示文字 --view classchar-box v-ifsignText currentCharIndex signText.length{{ signText[currentCharIndex] }}/viewcanvasidsignatureCanvasclasssignature-canvastype2dtouchstarthandleTouchStarttouchmovehandleTouchMovetouchendhandleTouchEndtouchcancelhandleTouchEnddisable-scroll/canvas/viewview classaction-boxview classaction-btn v-ifcurrentCharIndex 0 clickprevChar上一字/viewview classaction-btn clickresetCanvas清空画板/viewview classaction-btn v-ifcurrentCharIndex signText.length clicknextChar{{ currentCharIndex signText.length - 1 ? 下一字 : 确认 }}/view/view/viewview classpreview-title逐字预览/viewview classpreview-contentimage v-for(img, index) in previewImages :keyindex :srcimg modeaspectFit classpreview-char //viewview classaction-boxview classaction-btn submit-btn clickresetAllRecord全部重签/viewview classaction-btn submit-btn clickhandleSubmit{{ submitText }}/view/view!--用于拼接合并为完整签名图片的 canvas 容器--canvas idpreviewCanvas type2d classpreview-canvas/canvas/view
/template5.2 业务 Js
script
export default {props: {description: {type: String,default: 请使用正楷字体逐字签写, // 文字描述},submitText: {type: String,default: 提交, // 提交按钮文字},dotSize: {type: Number,default: 4, // 签名笔大小},penColor: {type: String,default: #000000, // 签名笔颜色},signText: {type: String,default: , // 签名文字},},data() {return {mainCtx: null,mainCanvas: null,isDrawing: false,touchPoints: [],allTouchPoints: [],signIsMove: false,currentCharIndex: 0,canvasRatio: 1,previewImages: [],};},mounted() {this.canvasRatio uni.getWindowInfo().pixelRatio ?? 1;this.initCanvas();},methods: {initCanvas() {const domItem uni.createSelectorQuery().in(this).select(#signatureCanvas);domItem.fields({ node: true, size: true }).exec((res) {// Canvas 对象this.mainCanvas res[0]?.node;// 渲染上下文this.mainCtx this.mainCanvas.getContext(2d);// Canvas 画布的实际绘制宽高const width res[0].width;const height res[0].height;// 初始化画布大小this.mainCanvas.width width * this.canvasRatio;this.mainCanvas.height height * this.canvasRatio;this.mainCtx.scale(this.canvasRatio, this.canvasRatio);this.setPen();});},setPen() {this.mainCtx.strokeStyle this.penColor;this.mainCtx.lineWidth this.dotSize;this.mainCtx.lineCap round;this.mainCtx.lineJoin round;},handleTouchStart(e) {const point {x: e.changedTouches[0].x,y: e.changedTouches[0].y,};this.touchPoints.push(point);this.allTouchPoints.push(point);this.isDrawing true;},handleTouchMove(e) {if (!this.isDrawing) return;const point {x: e.touches[0].x,y: e.touches[0].y,};this.touchPoints.push(point);this.allTouchPoints.push(point);const len this.touchPoints.length;if (len 2) {const prevPoint this.touchPoints[len - 2];const currentPoint this.touchPoints[len - 1];this.mainCtx.beginPath();this.mainCtx.moveTo(prevPoint.x, prevPoint.y);this.mainCtx.lineTo(currentPoint.x, currentPoint.y);this.mainCtx.stroke();this.signIsMove true;}},handleTouchEnd() {this.isDrawing false;this.touchPoints [];},getRectangle(points) {// 计算每个字符的实际大小let minX Number.POSITIVE_INFINITY;let minY Number.POSITIVE_INFINITY;let maxX Number.NEGATIVE_INFINITY;let maxY Number.NEGATIVE_INFINITY;for (let point of points) {minX Math.min(minX, point.x);minY Math.min(minY, point.y);maxX Math.max(maxX, point.x);maxY Math.max(maxY, point.y);}return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };},prevChar() {if (this.previewImages.length 0) {this.previewImages.pop();this.currentCharIndex--;this.resetCanvas();}},nextChar() {if (!this.signIsMove) {uni.showToast({ title: 请先完成签名, icon: none });return;}try {const { x, y, width, height } this.getRectangle(this.allTouchPoints);const offset 10;const _this this;uni.canvasToTempFilePath({canvas: this.mainCanvas,x: x - offset,y: y - offset,width: width offset * 2,height: height offset * 2,success: (res) {_this.previewImages.push(res.tempFilePath);_this.currentCharIndex;_this.resetCanvas();},fail: () {uni.showToast({ title: 提交失败请重新尝试, icon: none });},},_this);} catch (err) {uni.showToast({ title: 保存失败请重试, icon: none });}},resetCanvas() {this.mainCtx.clearRect(0, 0, 1000, 1000);this.setPen();this.touchPoints [];this.allTouchPoints [];this.signIsMove false;},resetAllRecord() {this.previewImages [];this.currentCharIndex 0;this.resetCanvas();},async handleSubmit() {if (this.previewImages.length 0) {uni.showToast({ title: 请至少签写一个字, icon: none });return;}try {this.handlePreviewImage();} catch (err) {uni.showToast({ title: 合成失败请重试, icon: none });}},handlePreviewImage() {const _this this;const previewDom uni.createSelectorQuery().in(_this).select(#previewCanvas);previewDom.fields({ node: true, size: true }).exec((res) {// Canvas 对象const canvas res[0]?.node;// 渲染上下文const previewCtx canvas.getContext(2d);// 计算总宽度和单个字的尺寸const charWidth 300 / this.previewImages.length;const charHeight 300 / this.previewImages.length;const totalWidth charWidth * this.previewImages.length;// 设置白色背景previewCtx.fillStyle #FFFFFF;previewCtx.fillRect(0, 0, totalWidth, charHeight);// 按顺序绘制每个图片for (let i 0; i this.previewImages.length; i) {const image canvas.createImage();image.src this.previewImages[i];image.onload () {const x i * charWidth;// 绘制当前图片previewCtx.drawImage(image, x, 0, charWidth, charHeight);};}// 最终导出setTimeout(() {uni.canvasToTempFilePath({canvas,x: 0,y: 0,width: totalWidth,height: charHeight,fileType: png, // 指定文件类型quality: 1, // 最高质量success: (res) {uni.previewImage({ urls: [res.tempFilePath], current: 0 });_this.$emit(submit, res.tempFilePath);},fail: (err) {uni.showToast({ title: 合成失败请重试, icon: none });},},_this);}, 300); // 增加最终导出前的延迟});},},
};
/script5.3 样式 Css
style scoped
.signature-container {padding: 0 20rpx 40rpx 20rpx;background-color: #f5f5f5;box-sizing: border-box;
}.signature-area {padding: 50rpx;background-color: #fff;box-sizing: border-box;
}.desc-text {padding: 20rpx 0;font-size: 32rpx;color: #333;text-align: center;box-sizing: border-box;
}.canvas-wrapper {position: relative;width: 100%;/* 保持宽高比 */aspect-ratio: 1;/* height: 600rpx; */background: #fff;/* 使用虚线边框框住字体 *//* border: 1px dashed #ccc; *//* 使用米字格照片当背景图 */background: url(https://img1.baidu.com/it/u2622499137,3527900847fm253fmtautoapp138fJPEG?w500h500) no-repeat;background-size: 100%;
}.char-box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 400rpx;text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;color: #eeeeee;pointer-events: none;user-select: none;z-index: 1;
}.signature-canvas {position: relative;width: 100%;height: 100%;z-index: 2;
}.action-box {display: flex;margin-top: 32rpx;gap: 20rpx;
}.action-btn {flex: 1;text-align: center;padding: 16rpx 30rpx;font-size: 28rpx;color: #3874f6;border: 2rpx solid #3874f6;border-radius: 80rpx;box-sizing: border-box;
}.submit-btn {background: #3874f6;color: #fff;
}.preview-title {margin-top: 32rpx;width: 100%;text-align: center;font-size: 28rpx;color: #666;
}.preview-content {display: flex;flex-wrap: wrap;margin-top: 20rpx;background-color: #fff;padding: 20rpx 20rpx 0 20rpx;min-height: 190rpx;box-sizing: border-box;
}.preview-char {width: 150rpx;height: 150rpx;margin-right: 19rpx;margin-bottom: 20rpx;
}.preview-canvas {position: fixed;left: -2000px;width: 300px;height: 300px;
}
/style
