标签：draw 写字板 res app ctx ---- points let 使用版

需求

用户需在 APP 或 小程序 使用手写的方式签字或签名

效果图片 

实现方式

1. 封装成组件调用（推荐），如需了解使用可点击前往---【封装组件版】
2. 使用的页面内直接使用，目前的教程就是直接使用的，未封装成组件

使用

第一步：使用的页面，如 index.vue

<!-- canvas -->
<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>

<!-- 底部操作按钮 -->
<view class="footer">
        <view class="left" @click="finish">保存</view>
        <view class="right" @click="clear">清除</view>
        <view class="close" @click="close">关闭</view>
</view>


<view @click='createCanvas()'>点击触发写字板</view>

上面的canvas共绑定了3个方法

第二步：定义所需数据

export default {
	data() {
		return {
                    //绘图图像
                    ctx: '', 
                    //路径点集合
                    points: [], 
                    //签名图片
                    SignatureImg: ''
                }
              }
           }

第三步：绑定方法，书写逻辑

• createCanvas（）----  该方法主要是创建了画布
• touchstart（）----  触摸开始，获取到起点
• touchmove（）----  触摸移动，获取到路径点
• touchend（）----  触摸结束，将未绘制的点清空防止对后续路径产生干扰
• draw（）----  绘制笔迹
• clear（）----  清空画布
• finish（）----  完成绘画并保存到本地

methods: {
    createCanvas() {
        //创建绘图对象
        this.ctx = uni.createCanvasContext('mycanvas', this);
        //设置画笔样式
        this.ctx.lineWidth = 4;
        this.ctx.lineCap = 'round';
        this.ctx.lineJoin = 'round';
        },
    touchstart(e) {
        let startX = e.changedTouches[0].x;
        let startY = e.changedTouches[0].y;
        let startPoint = { X: startX, Y: startY };
        this.points.push(startPoint);
        //每次触摸开始，开启新的路径
        this.ctx.beginPath();
	},
   touchmove(e) {
        let moveX = e.changedTouches[0].x;
        let moveY = e.changedTouches[0].y;
        let movePoint = { X: moveX, Y: moveY };
        this.points.push(movePoint); //存点
        let len = this.points.length;
        if (len >= 2) {
                this.draw(); //绘制路径
        }
	},
   touchend() {
        this.points = [];
	},
   draw() {
        let point1 = this.points[0];
        let point2 = this.points[1];
        this.points.shift();
        this.ctx.moveTo(point1.X, point1.Y);
        this.ctx.lineTo(point2.X, point2.Y);
        this.ctx.stroke();
        this.ctx.draw(true);
        },
   clear() {
        let that = this;
        uni.getSystemInfo({
                success: function(res) {
                    let canvasw = res.windowWidth;
                    let canvash = res.windowHeight;
                    that.ctx.clearRect(0, 0, canvasw, canvash);
                    that.ctx.draw(true);
                }
        });
        },
   finish() {
        let that = this;
        uni.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success: function(res) {
                     //这里的res.tempFilePath就是生成的签字图片
                    console.log(res.tempFilePath);
            }
        });
   }
}

上面 finish() 方法得到的 res.tempFilePath 就是生成出来的签名，可用于做余下的业务操作 

标签：draw,写字板,res,app,ctx,----,points,let,使用版
来源： https://blog.csdn.net/weixin_42232156/article/details/120361525

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。