【uni-app】Используйте WordPad для реализации рукописной подписи ---- версия для прямого использования

внешний интерфейс uni-app
【uni-app】Используйте WordPad для реализации рукописной подписи ---- версия для прямого использования

необходимость

Пользователь долженAPPили小程序Распишитесь или распишитесь от руки

banner.jpg

Изображение эффекта

微信截图_20210813155247.png

Метод реализации

  1. Инкапсулирован в вызов компонента（推荐）, если вы хотите узнать, как его использовать, вы можете нажать, чтобы перейти к---【Упакованная версия компонента】
  2. Он используется непосредственно на используемой странице, текущий учебник используется напрямую и не инкапсулируется в компонент.

использовать

Шаг 1. Используйте страницу, например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 метода

имя метода интерпретация метода
@touchstart Коснитесь почерка, чтобы начать, добраться до отправной точки
@touchmove Коснитесь почерка, чтобы двигаться, получить путевую точку
@touchend почерк сенсорный конец

Шаг 2: Определите необходимые данные

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

Третий шаг: способ привязки, написание логики

  1. создатьхолст()----该方法主要是创建了画布
  2. сенсорный запуск()----触摸开始，获取到起点
  3. сенсорный ход()----触摸移动，获取到路径点
  4. прикоснуться()----触摸结束，将未绘制的点清空防止对后续路径产生干扰
  5. рисовать()----绘制笔迹
  6. чистый()----清空画布
  7. финиш()----完成绘画并保存到本地 
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Это сгенерированная подпись, которую можно использовать для остальных бизнес-операций.

Категории