当前位置：首页 > news >正文

java个人网站开发新闻软文发稿平台

news 2025/7/27 5:56:22

java个人网站开发,新闻软文发稿平台,CC wordpress 攻击,互动吧网站模板写电子签名一定要注意的是一切全部按照手机上的适配来，为啥这么说呢，因为你在微信开发者工具中调试的时候认为是好的，正常的非常nice,当你发布版本的时候你会发现问题出来了。我下边的写法你可以直接用很简单。就是要记住canvas的几个属性和用…

写电子签名一定要注意的是一切全部按照手机上的适配来，为啥这么说呢，因为你在微信开发者工具中调试的时候认为是好的，正常的非常nice,当你发布版本的时候你会发现问题出来了。我下边的写法你可以直接用很简单。就是要记住canvas的几个属性和用法。

直接上干货

1.签名样式页面

<!-- 签名 --><view class="wrapper n-sign"><view class="h3">人员签字</view><view class="handCenter"><canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"canvas-id="handWriting"></canvas></view><view class="footer"><view :class="{ button: 1, 'n-sign-disabled': (startX == null && startY == null) }" @tap="retDraw">清除</view><view :class="{ button: 1, 'n-sign-disabled': (startX == null && startY == null) }" @tap="saveCanvasAsImg">提交</view></view></view>

2.记得定义

  data() {return {canvasName: 'handWriting',ctx: '',startX: null,startY: null,canvasWidth: 0,canvasHeight: 0,selectColor: 'black',lineColor: '#1A1A1A', // 颜色lineSize: 5, // 笔记倍数name: '', //用来区分多个签字};},

3.事件

methods: {
// 笔迹开始uploadScaleStart(e) {this.startX = e.changedTouches[0].xthis.startY = e.changedTouches[0].y//设置画笔参数//画笔颜色this.ctx.setStrokeStyle(this.lineColor)//设置线条粗细this.ctx.setLineWidth(this.lineSize)//设置线条的结束端点样式this.ctx.setLineCap("round") //'butt'、'round'、'square'//开始画笔this.ctx.beginPath()},// 笔迹移动uploadScaleMove(e) {//取点let temX = e.changedTouches[0].xlet temY = e.changedTouches[0].y//画线条this.ctx.moveTo(this.startX, this.startY)this.ctx.lineTo(temX, temY)this.ctx.stroke()this.startX = temXthis.startY = temYthis.ctx.draw(true)},/*** 重写*/retDraw() {if (this.startX == null && this.startY == null) {return;}this.ctx.clearRect(0, 0, 700, 730);this.ctx.draw();//设置canvas背景this.setCanvasBg('#fff');this.startX = null;this.startY = null;},//生成图片async saveCanvasAsImg() {if (this.startX == null && this.startY == null) {return;}uni.showLoading({mask: true})var res = await uni.canvasToTempFilePath({canvasId: 'handWriting',fileType: 'png',quality: 1, //图片质量});for (var i = 0; i < res.length; i++) {if (res[i] && res[i].tempFilePath) {res = await this.nupload(res[i].tempFilePath, 14);break;}}// res = await this.nupload(path, 13);uni.hideLoading();uni.showToast({ title: "已上传" })},//设置canvas背景色  不设置  导出的canvas的背景为透明//@params：字符串  colorsetCanvasBg(color) {/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 *///rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度//这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);// ctx.setFillStyle('red')this.ctx.setFillStyle(color);this.ctx.fill(); //设置填充this.ctx.draw(); //开画},// 上传图片并返回上传结果async nupload(filePath, imgType) {if (!filePath) return; //如果 filePath 不存在，直接返回// 调用 postWaitWorkImage 方法发送 POST 请求上传图片，并传递了文件路径、参数等信息。// 若上传成功，将返回结果解析为 JSON 格式（如果不是JSON格式，则直接使用原始结果）。const res = await postWaitWorkImage({filePath,name: "file",params: { imgType, id: this.merInfo.id, },}).catch((e) => (console.log(e), false));let res_;try {res_ = JSON.parse(res);} catch {res_ = res;}if (res_.code === 200) {return res_;} else {uni.showToast({ title: "上传失败", icon: "error" });return false;}},},

4.页面触发

onReady() {this.$nextTick(() => {this.name = 'handWriting1'this.ctx = uni.createCanvasContext("handWriting");this.$nextTick(() => {uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {this.canvasWidth = rect.width;this.canvasHeight = rect.height;/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */this.setCanvasBg('#fff');}).exec();});})},

5.样式

.handWriting {background: #fff;width: 640rpx;height: 783rpx;border-radius: 20rpx;border: 1px solid #ff791c;overflow: hidden;
}.handCenter {margin-bottom: 36rpx;}

6.需要注意的是

实现签名我们用的是画布，不可能知道100%完美。所以这里我已经很合适的在设计了有啥问题可以留言。我把我的效果图看下看下希望对大家有帮助