首页 > 其他分享 >uniapp使用canvas电子签名

uniapp使用canvas电子签名

时间:2023-08-26 16:14:16浏览次数:35  
标签:uniapp canvas touches flex res ctx draw 电子签名 mouseY

<template>
  <view class="draw-page">
    <view class="draw-content">
      <canvas
        style="width: 100%; height: 100%"
        ref="sign"
        canvas-id="sign"
        id="sign"
        disable-scroll
        @touchstart="touchstart"
        @touchmove="touchmove"
      ></canvas>
    </view>
    <view class="actions">
      <button @click="background()" type="warn">清空</button>
      <button @click="save" type="primary">保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      lineColor: "#000", //线条颜色
      lineWidth: 2, //线条宽度
    };
  },
  onReady() {
    const ctx = uni.createCanvasContext("sign");
    this.ctx = ctx;
    this.ctx.setStrokeStyle(this.lineColor);
    this.ctx.setLineWidth(this.lineWidth);

    // 获取canvas的宽高
    const query = uni.createSelectorQuery().in(this);
    query.select("#sign").boundingClientRect();
    query.exec((res) => {
      if (res && res.length) {
        this.width = res[0].width;
        this.height = res[0].height;
        this.background();
      }
    });
  },
  methods: {
    save() {
      uni.canvasToTempFilePath({
        canvasId: "sign",
        success(res) {
          // h5 tempFilePath是base64
          const url = res.tempFilePath;
          console.log(url);
        },
        fail(err) {
          console.error(err);
        },
      });
    },
    /**设置背景色 */
    background(color = "#f8f8f8") {
      this.ctx.fillStyle = color;
      this.ctx.fillRect(0, 0, this.width, this.height);
      this.ctx.draw();
    },
    touchstart(e) {
      if (e.touches && e.touches.length) {
        const t = e.touches[0];
        this.mouseX = t.x;
        this.mouseY = t.y;
        this.pmouseX = this.mouseX;
        this.pmouseY = this.mouseY;
      }
    },
    /**触摸移动 */
    touchmove(e) {
      if (e.touches && e.touches.length) {
        const t = e.touches[0];
        this.pmouseX = this.mouseX;
        this.pmouseY = this.mouseY;
        this.mouseX = t.x;
        this.mouseY = t.y;
        this.draw();
      }
    },
    draw() {
      this.ctx.moveTo(this.pmouseX, this.pmouseY);
      this.ctx.lineTo(this.mouseX, this.mouseY);
      this.ctx.stroke();
      this.ctx.draw(true);
    },
  },
};
</script>

<style lang="scss">
.draw-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.draw-content {
  flex: 1;
}

.actions {
  display: flex;

  button {
    flex: 1;
  }
}
// #sign {
//   box-sizing: border-box;
//   border: 1px solid red;
// }
</style>

标签:uniapp,canvas,touches,flex,res,ctx,draw,电子签名,mouseY
From: https://www.cnblogs.com/ajanuw/p/17628470.html

相关文章

  • 暂告一段落的vue学习以及uniapp的开始
    最近学习了VUE并且参照其他开源项目做了一个大致的框架,只余部分还需要改成自己的东西,但是这个要到一段落了,开始了小程序项目之旅,首先还是到uniapp官网查看官方资料当然了,还是要从vue3的部分开始学起跟着官方视频做了一个试例,感觉还不错,很简单然后项目正式开始了~~终于开始了......
  • 知识付费uniapp源码,知识付费的鼻祖,传承文化的智者
    在如今知识付费如火如荼的时代,似乎这个概念是新近的发展。然而,在中国的历史长河中,早就有知识付费的先驱者,其中一个重要人物便是孟子。他是古代儒家思想的代表,也是知识付费的鼻祖之一。 孟子的身份显赫,生活富足,周围充斥着车马等奢华的生活元素。有一天,他的一位学生问他一个问题......
  • 在uniapp - uni.navigateBack携带参数跳转
    子页面letpages=getCurrentPages();//当前页页⾯实例letnowPage=pages[pages.length-1];//当前页⾯实例letprevPage=pages[pages.length-2];//上一页面实例//需要返回上一页的数据Objectletobject={ id:'23456765432'};prevPage.$vm.prevDateFun(ob......
  • uniapp路由跳转后通过uni.$emit和uni.$on页面通讯后,接收到数据但是却赋值不了
    原因:跳转到未渲染过的页面时,页面还没渲染就进行赋值操作,所以赋值不上去。      如果往后跳转,可以使用uni.$emit和uni.$on页面传值。即uni.navigateBack({delta:1}),尽量不要使用uni.navigateTo(会造成页面重叠)。能够接收到数据并赋值。解决办法:使用EventChannel代码......
  • uniapp 常见bug 解决方法
    Uniapp是一款基于Vue.js开发的跨平台框架,可以同时开发多个平台的应用程序,包括微信小程序、支付宝小程序、H5、APP等。然而,在开发过程中,我们可能会遇到一些常见的错误,这些错误可能会影响我们的开发进度和应用程序的质量。本篇博客将介绍一些在Uniapp开发过程中常见的错误,并提......
  • uniapp专栏——屏幕安全区域
    写在前面这些内容是在通过cli搭建的uniapp中,使用了vite4,ts4.9,vue3(组合式API,setup语法糖)。如果有版本不一致,请谨慎参考。正文css方式UNI提供的安全区CSS常量获取上安全距离(安全区域距离顶部边界的距离):env(safe-area-inset-top)获取左安全距离(安全区域距离左边边界的......
  • 详情讲解canvas实现电子签名
    签名的实现功能我们要实现签名:1.我们首先要鼠标按下,移动,抬起。经过这三个步骤。我们可以实现一笔或者连笔。按下的时候我们需要移动画笔,可以使用moveTo来移动画笔。e.pageX,e.pageY来获取坐标位置移动的时候我们进行绘制ctx.lineTo(e.pageX,e.pageY)ctx.stroke()......
  • 在uniapp中如何使用echarts
    前言当今,数据可视化已经成当今,随着数据的日益增长,数据可视化变得越来越重要。ECharts是一个强大的数据可视化工具,它提供了丰富的图表类型和交互方式,可以帮助我们更好地理解和分析数据。当今的数据可视化已成为数据分析和决策制定的重要工当今时代,数据分析和可视化已经成为了各行......
  • canvas实现签名
    在开源项目中发现canvas实现签名功能以此记录:http://www.youlai.tech/pages/52d5c3/HTML:<divclass="canvas-dom"><el-buttonplaintype="text"style="margin-left:20px;margin-top:20px;font-size:18px;"@click="back">返回<......
  • uniapp保存服务器端sessionID方案
    我们知道,uniapp,小程序都不支持cookie,那么每次调用服务端api接口时,服务端提供的Set-Cookie无法自动保存,导致每次都请求都是一个新sessionID,无法完成一些正常的校验,想要解决这个问题,可以让uniapp首次加载请求时保存服务器传过来的sessionID,在之后的请求中都在header中携带着这个coo......