记录taro 开发H5手写签名经验

使用资源

canvas:原生资源

主要问题

1.canvas在taro3开发的h5下,x,y,所涉及的点位会有一定比例偏移.

解决方法

1.x轴比例缩放的结果值大概是300,y轴未使用,设定的是固定值,计算x比例如下

 const pro = (300 / document.body.clientWidth).toFixed(2);

所有代码

import { Component } from 'react'
import { View} from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'
import { AtForm, AtInput, AtButton, AtNavBar } from 'taro-ui'
import { connect } from 'react-redux'
var image = '';
var mousePressed = false;
var lastX, lastY, ctx, c, pro;
class Index extends Component {
  state = {
    loading: false,              //按钮状态
  }

  componentDidMount() {
    this.onInit()
  }

  onInit = () => {
    console.log(document.body.clientWidth)
    pro = (300 / document.body.clientWidth).toFixed(2);
    console.log(pro, 'pro')
    ctx = document.getElementById('myCanvas').getContext("2d");
    c = document.getElementById("myCanvas");
    setTimeout(() => {
      this.InitThis();
    }, 1000)

  }
  upDataSetData = (payload) => {
    const { dispatch } = this.props;
    dispatch({ type: 'signature/upData', payload })
  }
  saveImageInfo = () => {
    image = c.toDataURL("image/png"); //得到生成后的签名base64位  url 地址
    // console.log(image);
    // this.upDataSetData({
    //   image: image
    // })

    // setTimeout(() => {
    //   Taro.redirectTo({
    //     url: '/pages/home/remark/index'
    //   })
    // }, 300)
  }
  InitThis = () => {

    //			触摸屏
    c.addEventListener('touchstart', (event) => {
      if (event.targetTouches.length == 1) {
        event.preventDefault();// 阻止浏览器默认事件，重要
        var touch = event.targetTouches[0];
        mousePressed = true;
        this.Draw(touch.clientX * pro, touch.pageY * 0.6, false);
      }

    }, false);

    c.addEventListener('touchmove', (event) => {
      if (event.targetTouches.length == 1) {
        event.preventDefault();// 阻止浏览器默认事件，重要
        var touch = event.targetTouches[0];
        console.log(touch)
        if (mousePressed) {
          this.Draw(touch.clientX * pro, touch.pageY * 0.6, true);
        }
      }

    }, false);

    c.addEventListener('touchend', (event) => {
      if (event.targetTouches.length == 1) {
        event.preventDefault();// 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
        //      			var touch = event.targetTouches[0];
        mousePressed = false;
      }
    }, false);

    //		   鼠标
    c.onmousedown = (event) => {
      mousePressed = true;
      this.Draw(event.pageX, event.pageY, false);
    };

    c.onmousemove = (event) => {
      if (mousePressed) {
        this.Draw(event.pageX, event.pageY, true);
      }
    };

    c.onmouseup = (event) => {
      mousePressed = false;
    };
  }
  Draw = (x, y, isDown) => {
    // console.log(x, y, isDown,ctx)
    if (isDown) {
      ctx.beginPath();
      // ctx.strokeStyle = '#000'; //颜色
      // ctx.lineWidth = 30;   //线宽
      // ctx.lineJoin = "round";
      ctx.moveTo(lastX, lastY);
      ctx.lineTo(x, y);
      ctx.closePath();
      ctx.stroke();
    }
    lastX = x; lastY = y;
  }
  clearArea = () => {
    // Use the identity matrix while clearing the canvas
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    this.upDataSetData({
      image: ''
    })
  }

  renderTop = () => (
    <View className='signature-warp-top'>
      <AtNavBar
        color='#fff'
      >
        签名
      </AtNavBar>
    </View>
  )

  render() {
    return (
      <View className='signature-index'>
        {/* {this.renderTop()} */}
        <canvas className='myCanvas' id='myCanvas' style={{ width: '100%', height: '250px' }} />
        <View className={'signature-btn-search'}>
          <View className='signature-ben-add' onClick={() => {
            Taro.redirectTo({
              url: '/pages/home/remark/index'
            })
          }}>上一步</View>
          <View className='signature-ben-qk' onClick={this.clearArea}>清空</View>
          <View className='signature-ben-next' onClick={this.saveImageInfo}>保存</View>
        </View>
      </View>
    )
  }
}
function mapStateToProps(state) {
  return {
    signature: state.signature
  };
}
export default connect(mapStateToProps)(Index);