特价网站源码,psd素材免费下载网址,加盟创业商机网,欧卡乐网站建设1.从接口获取手写内容#xff0c;处理成由单个字组成的数组#xff08;包括符号#xff09; 2.合成所有图的时候#xff0c;会闪现outputCanvas合成的图#xff0c;注意隐藏 3.可以进行多个手写内容切换 4.基于uniapp的
templateview classcontent处理成由单个字组成的数组包括符号 2.合成所有图的时候会闪现outputCanvas合成的图注意隐藏 3.可以进行多个手写内容切换 4.基于uniapp的
templateview classcontent!-- 头部 --view classnavBarBox!-- 头部导航 --u-navbar height120rpxview classu-nav-slot slotleftview classflex alignCenterClass flexBetween click_closeview classleftBoximg srcstatic/imgs/leftIcon.png alt //view/view/viewview classcenterBox slotcenterview classtitle 批注声明 /viewu--texttypeerrortext请您在区域内逐字手写以下文字全部写完后点击保存size30rpxaligncenter/u--text/viewview classu-nav-slot flex slotrightviewclassbtn-box signerBoxv-ifisCompleteclick_submitDrawtext 完成 /textu-icon namecheckmark color#fff size26/u-icon/view/view/u-navbar/viewview classcontent-modelview classmodel-leftviewv-for(item, index) in docNoteListclassnote-item:keyitem.codeclick_checkNotes(item, click)viewclassnote-btn btn-box:classcurNode.code item.code ? actice-node : text批注{{ index 1 }}/textu-iconv-ifcurNode.code item.codenameedit-pencolor#fffsize28/u-icon/viewu-iconv-ifitem.isDonenamecheckmark-circlecolor#087e6asize26/u-icon/view/viewview classcontainerview classnotes-listscroll-viewscroll-ytruestyleheight: 600rpxclassscroll-view_wenable-flextruescroll-with-animationtrueview classnote-boxviewv-foritem in curNode.notesListclick_checkItem(item):keyitem.indexclassnotes-item:classactiveItem.index item.index ? active : view classnote-label{{ item.label }}/view!-- 展示写好的字 --view classnote-imgimg v-ifitem.imgSrc :srcitem.imgSrc alt //view/view/view/scroll-view/viewview classmain-modelview classshow-canvas!-- canvas背景字 --view classbg-texttext{{ activeItem.label }}/text/view!-- 当前需要手写的字的canvas --view classcanvas-containercanvascanvas-idinputCanvasclassinput-canvastouchstarthandleTouchStarttouchmovehandleTouchMovetouchendhandleTouchEnd/canvas/view/view/view!-- 将单个字的图片合并章所用的canvas --view classshow-resultcanvas:style{ height: outputHeight, width: outputWidth }canvas-idoutputCanvasclassoutput-canvas/canvas/view/view/view/view
/templatescript
import { pathToBase64 } from ../../utils/image-tools/index.js;
import { addNoteImg, getDocData } from /utils/api.js;
export default {components: {},data() {return {show: true,isDrawing: false,startX: 0,startY: 0,strokes: [],charObjects: [],timer: null,delay: 500, // 写完后的延迟fj: ,outputHeight: 100px,outputWidth: 100px,tempFilePath: , //当前显示的图片activeItem: {}, //当前的批注文字document: ,docNoteList: [], //所有批注列表curNode: {notesList: [],}, //当前批注isComplete: false, //当前文档所有批注书否全部写完控制完成按钮的显示tempPathObj: {},showImg: , //批注合成图};},computed: {},methods: {// 返回上一页_close() {uni.redirectTo({url: /pages/index/fileEdit?documentId this.document.documentId,});},_checkItem(val) {this.activeItem { ...val };this.tempFilePath val.imgSrc || ;},handleTouchStart(e) {e.preventDefault(); // 阻止默认滚动行为if (this.timer) {clearTimeout(this.timer);this.timer null;}const touch e.touches[0];this.isDrawing true;this.startX touch.x;this.startY touch.y;this.strokes.push({x: touch.x,y: touch.y,});},handleTouchMove(e) {e.preventDefault(); // 阻止默认滚动行为if (!this.isDrawing) return;const touch e.touches[0];const context uni.createCanvasContext(inputCanvas, this);context.setStrokeStyle(#000);context.setLineWidth(15);context.setLineJoin(round);context.setLineCap(round);context.moveTo(this.startX, this.startY);context.lineTo(touch.x, touch.y);context.stroke();context.draw(true);this.startX touch.x;this.startY touch.y;this.strokes.push({x: touch.x,y: touch.y,});},handleTouchEnd(e) {e.preventDefault(); // 阻止默认滚动行为this.isDrawing false;// 写完后延迟清空Canvas获取手写图this.timer setTimeout(this.addChar, this.delay);},addChar() {const inputContext uni.createCanvasContext(inputCanvas, this);uni.canvasToTempFilePath({canvasId: inputCanvas,success: (res) {// 清空 inputCanvas 上的内容inputContext.clearRect(0, 0, 700, 700);inputContext.draw();this._pathToBase64(res.tempFilePath, show);},});},//批注合成处理_drawImage(notesList, imgCode) {this.showImg ;let outputContext ;outputContext uni.createCanvasContext(outputCanvas, this);const charSize 40; // 调整字符大小const maxCharsPerRow 20; // 每行最大字符数// 动态设置高度const numRows Math.ceil(notesList.length / maxCharsPerRow); // 计算行数this.outputHeight ${numRows * charSize}px; // 动态计算输出画布的高度this.outputWidth ${maxCharsPerRow * charSize}px; // 动态计算输出画布的宽度// 绘制字符let rowSpacing ;let colSpacing ;notesList.forEach((item, index) {const rowIndex Math.floor(index / maxCharsPerRow); // 当前字符的行索引const colIndex index % maxCharsPerRow; // 当前字符的列索引rowSpacing rowIndex * charSize;colSpacing colIndex * charSize;outputContext.drawImage(item.tempFilePath,colSpacing,rowSpacing,charSize,charSize);});setTimeout(() {outputContext.draw(false, () {uni.canvasToTempFilePath({canvasId: outputCanvas,success: (result) {uni.compressImage({//压缩图片src: result.tempFilePath,success: (res) {pathToBase64(res.tempFilePath).then((base64) {//赋值const _nodeImg this.filterBase64(base64);this.tempPathObj[imgCode] _nodeImg;console.log(tempPathObj, this.tempPathObj);this.showImg _nodeImg;// 清空 outputContext 上的内容outputContext.clearRect(0,0,colSpacing charSize * charSize,rowSpacing numRows * charSize);outputContext.draw();}).catch((error) {console.error(error);});},});},});});}, 500);},_checkNotePass() {let isComplete true; //是否全部批注都写完默认都写完了const _curNode this.curNode;this.docNoteList.map((item) {if (item.code _curNode.code) {item.isDone _curNode.notesList.every((item) {return item.imgSrc ! ;});if (item.isDone) {this._drawImage(_curNode.notesList, _curNode.imgCode);}}if (!item.isDone) {//如有未完成的isComplete false;}});this.isComplete isComplete;},_pathToBase64(val, code) {uni.compressImage({//压缩图片src: val,success: (res) {pathToBase64(res.tempFilePath).then((base64) {const _notesList this.curNode.notesList;const signImg this.filterBase64(base64);// 手写处理_notesList.map((item) {if (item.index this.activeItem.index) {item.imgSrc signImg;item.tempFilePath res.tempFilePath;}});this.tempFilePath signImg;this._checkNotePass();// 自动轮下一个if (this.activeItem.index _notesList.length - 1) {this._checkItem(_notesList[this.activeItem.index 1]);}}).catch((error) {console.error(error);});},});},// 过滤base64太长有换行字符方法filterBase64(codeImages) {return codeImages.replace(/[\r\n]/g, );},// 保存更新async _submitDraw() {let documentData {...this.document.documentData,};for (const key in this.tempPathObj) {documentData[key] this.tempPathObj[key];}const query {documentId: this.document.documentId,documentData: JSON.stringify(documentData),};await addNoteImg(query).then(({ data: res }) {if (res.code 0) {uni.showToast({icon: success,title: 保存成功,});uni.redirectTo({url: /pages/index/fileEdit?documentId this.document.documentId,});}});},// 获取文书详情async _getDocData(documentId) {await getDocData({ documentId }).then(({ data: res }) {const _documentData JSON.parse(res.data.documentData);this.document {documentId: res.data.documentId,documentData: _documentData,};this._checkDocData(_documentData);});},// 处理批注形成列表_checkDocData(data) {let docNote [];for (const key in data) {const element data[key];//根据实际需求处理这一步if (key.includes(note_text)) {let notesList [];// 处理批注内容const _text element.split();for (let i 0; i _text.length; i) {const ele _text[i];notesList.push({label: ele,imgSrc: ,index: i,tempFilePath: ,code: key,});}const _key key.split(note_text)[1] || ;const _imgCode note_img _key;docNote.push({code: key,imgCode: _imgCode,label: element,nodeImg: , //最终合成的图片isDone: false, //当前批注是否已写完notesList, //所有批注问字});this.$set(this.tempPathObj, _imgCode, );}}console.log(docNote, 142545);this.docNoteList docNote;this.curNode { ...docNote[0] };this._checkItem(this.curNode.notesList[0]);},// 处理当前批注数据_checkNotes(value) {this.curNode { ...value };this.showImg this.tempPathObj[value.imgCode];this._checkItem(this.curNode.notesList[0]);},},beforeDestroy() {},onLoad(option) {this._getDocData(option.documentId);},created() {},
};
/scriptstyle scoped langscss
.content {height: 100vh;
}
.content-model {width: 100%;margin-top: 80rpx;display: flex;justify-content: space-around;align-items: flex-start;.model-left {width: 12%;.note-item {display: flex;justify-content: space-between;align-items: center;}.note-btn {margin-bottom: 30rpx;background-color: #ee7c36;}.actice-node {background-color: $mainColor;}}
}
.centerBox {text-align: center;
}
.signerBox {background-color: $mainColor;
}
.btn-box {display: flex;justify-content: space-around;align-items: center;color: #fff;padding: 12rpx 50rpx;border-radius: 40rpx;font-size: 40rpx;
}
.navBarBox {.leftBox {width: 40rpx;height: 40rpx;margin-right: 40rpx;margin-top: -20rpx;img {width: 100%;height: 100%;}}
}.container {display: flex;flex-direction: column;align-items: center;width: 87%;.show-result {position: fixed;bottom: -200prx;width: 40%;z-index: 1;background-color: #ee7c36;}.notes-list {width: 100%;display: flex;flex-direction: column;justify-content: center;flex-wrap: wrap;// background-color: rgba(223, 220, 219,0.2);background-color: #fff;margin-bottom: 25rpx;position: relative;z-index: 999;.scroll-view_w {width: 100% !important;}.note-box {width: 100%;display: flex;flex-direction: row;justify-content: center;flex-wrap: wrap;}.note-label,.note-img {width: 120rpx;height: 120rpx;line-height: 120rpx;text-align: center;margin-right: 5rpx;margin-bottom: 3rpx;border: 2rpx solid #999;background-color: #fff;font-size: 100rpx;img {width: 100%;height: 100%;}}.active {.note-label,.note-img {border: 2rpx solid rgba(212, 21, 53, 0.9);}}}
}
.main-model {display: flex;justify-content: center;width: 100%;.show-img,.show-canvas {position: relative;width: 700rpx;height: 700rpx;border: 8rpx dashed #dddee1;}.show-img img {z-index: 999;}.show-canvas .bg-text {position: absolute;top: -30rpx;left: 0;width: 100%;height: 100%;font-size: 300px;line-height: 700rpx;text-align: center;color: rgba(153, 153, 153, 0.1);}.canvas-container {width: 100%;height: 100%;.input-canvas {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 10rpx;touch-action: none;// background-color: #ee7c36;/* 禁止默认触摸动作 */}}
}
.temp-img {width: 300rpx;height: 100rpx;img {width: 100%;height: 100%;}border: 2rpx solid #dddee1;
}
/style
效果图
