微信小程序最新canvas2d手写签名

最新推荐文章于 2024-04-19 17:47:16 发布

原创

最新推荐文章于 2024-04-19 17:47:16 发布 · 1.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #canvas

本文介绍了一个基于canvas2d的手写签名应用实现方案，包括如何利用贝塞尔曲线平滑笔迹、调整笔迹粗细和颜色等功能。

canvas2d

在这里插入图片描述

效果

在这里插入图片描述

注意

canvas2d其实和web的canvas一样，可以参考web的canvas的api
canvas 2d 没有draw() 方法
清空笔记可以使用clearRect()方法
没有setFillStyle方法,只有fillStyle属性
没有setStrokeStyle方法,只有strokeStyle属性
没有setGlobalAlpha方法,只要有globalAlpha属性
canvas初始化建议要设置宽、高，虽然有默认值但是实际需求不一定是这样

源码（mpx框架）

<template>
  <view class="wrapper">
    <view class="handBtn">
      <!-- 黑笔 -->
      <image
        catchtap="selectColorEvent"
        wx:if="{
   
   {selectColor === 'black'}}"
        src="../assets/images/color_black_selected.png"
        class="{
   
   { selectColor === 'black' ? 'color_select' : '' }} black-select"
        data-color="black"
        data-color-value="#1A1A1A"
      />
      <image
        catchtap="selectColorEvent"
        wx:if="{
   
   {selectColor !== 'black'}}"
        src="../assets/images/color_black.png"
        class="{
   
   { selectColor === 'black' ? 'color_select' : '' }} black-select"
        data-color="black"
        data-color-value="#1A1A1A"
      />
      <!-- 红笔 -->
      <image
        catchtap="selectColorEvent"
        wx:if="{
   
   {selectColor === 'red'}}"
        src="../assets/images/color_red_selected.png"
        class="{
   
   { selectColor === 'red' ? 'color_select' : '' }} red-select"
        data-color="red"
        data-color-value="#ca262a"
      />
      <image
        wx:if="{
   
   {selectColor !== 'red'}}"
        catchtap="selectColorEvent"
        src="../assets/images/color_red.png"
        class="{
   
   { selectColor === 'red' ? 'color_select' : '' }} red-select"
        data-color="red"
        data-color-value="#ca262a"
      />
      <button catchtap="retDraw" class="delBtn">重写</button>
      <button catchtap="subCanvas" class="subBtn">完成</button>
    </view>
    <view class="handCenter">
      <canvas
        class="handWriting"
        disable-scroll="true"
        bindtouchstart="uploadScaleStart"
        bindtouchmove="uploadScaleMove"
        bindtouchend="uploadScaleEnd"
        type="2d"
        id="myCanvas"
      ></canvas>
    </view>
    <view class="handRight">
      <view class="handTitle">手写板</view>
    </view>
  </view>
</template>
<script>
import {
   
    createPage } from '@mpxjs/core'
const app = getApp()
/*
 * canvas 2d 没有draw() 方法
 * 清空笔记可以使用clearRect()方法
 * 没有setFillStyle方法,只有fillStyle属性
 * 没有setStrokeStyle方法,只有strokeStyle属性
 * 没有setGlobalAlpha方法,只要有globalAlpha属性
 */
createPage({
   
   
  data: {
   
   
    canvasName: 'myCanvas',
    ctx: '', // 上下文实例
    canvas: '', // 画布实例
    canvasWidth: 0,
    canvasHeight: 0,
    transparent: 1, // 透明度
    selectColor: 'black',
    lineColor: '#1A1A1A', // 颜色
    lineSize: 1.5, // 笔记倍数
    lineMin: 0.5, // 最小笔画半径
    lineMax: 4, // 最大笔画半径
    pressure: 1, // 默认压力
    smoothness: 60, //顺滑度，用60的距离来计算速度
    currentPoint: {
   
   },
    currentLine: [], // 当前线条
    firstTouch: true, // 第一次触发
    radius: 1, //画圆的半径
    cutArea: {
   
    top: 0, right: 0, bottom: 0, left: 0 }, //裁剪区域
    bethelPoint: [], //保存所有线条 生成的贝塞尔点；
    lastPoint: 0,
    chirography: [], //笔迹
    currentChirography: {
   
   }, //当前笔迹
    linePrack: [] //划线轨迹 , 生成线条的实际点
  },
  onLoad() {
   
   
    let canvasName = this.data.canvasName
    // let ctx = wx.createCanvasContext(canvasName)
    const query = wx.createSelectorQuery()
    query
      .select('#myCanvas')
      .fields({
   
    node: true, size: true })
      .exec(res => {
   
   
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        this.setData({
   
   
          ctx: ctx,
          canvas: canvas
        })
        query
          .select('.handCenter')
          .boundingClientRect(rect => {
   
   
            this.setData({
   
   
              canvasWidth: rect.width,
              canvasHeight: rect.height
            })
            canvas.width = rect.width
            canvas.height = rect.height
            /* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
            // console.log(this, 'hahah');
            this.setCanvasBg('#fff')
          })
          .exec()
      })
  },
  methods: {
   
   
    // 重写事件(初始化画布)
    retDraw() {
   
   
      this.data.ctx.clearRect(0, 0, 700, 730)
      //设置canvas背景
      this.setCanvasBg('#fff')
    },
    // 完成事件
    subCanvas() {
   
   
      // 调用预览
      this.previewCanvasImg()
    },
    //画两点之间的线条；参数为:line，会绘制最近的开始的两个点；
    pointToLine(line) {
   
   
      this.calcBethelLine