微信小程式實現簡單手寫簽名元件的方法例項

阿新 • • 發佈：2021-07-12

背景：

在做專案過程中，需要在微信小程式中實現手寫簽名元件。在網上找了微信小程式手寫簽名實現，但是都是不太理想。在實際運用中，會因為實時計算較多的貝塞爾曲線而產生卡頓。效果不理想。所以退一步，不需要筆鋒以及筆跡模擬效果。只需要簡單的手寫簽名實現。

需求：

可以實現使用者在微信小程式上手寫簽名。

需要元件化。

效果

微信小程式實現簡單手寫簽名元件的方法例項

一、思路

在微信小程式中，我們使用canvas元件實現。將使用者的輸入想象成為一隻筆。我們要畫的簽名是由很多點構成的。但是單純的點是不能很好地構成線。點與點之間還要由線連線。下面是實現過程程式碼。

二、實現

1. 頁面與樣式

wxml

這裡的canvas元件是最新的用法。

<view class="dashbox">
  <view class="btnList">
    <van-button size="small" bind:click="clearCanvas">清空</van-button>
 LepMIZ </view>
  <view class="handCenter">
    <canvas 
      class="handWriting" 
      disable-scroll="{{true}}" 
      id="handWriting"
      bindtouchstart="scaleStart"
      bindtouchmove="scaleMove" 
      bindtouchend="scaleEnd"
      bindtap="mouseDown"
      type="2d"
    >
    </canvas>
  </view>
</view>

wxss

.btnList{
    width: 95%;
    margin:0 auto;
}
.handWriting{
    background: #fff;
    width: 95%;
    height: 80vh;
    margin:0 auto
}

2. 初始化

由於是在自定義元件中使用，所以要注意獲取canvas的時候的this指向問題。如果不呼叫SelectorQuery的In方法，那麼就在自定義元件獲取不到canvas，因為這個時候指向的父元件。

Component({
 /**
 * 元件的初始資料
 */
    data: {
        canvasName:'#handWriting',ctx:'',canvasWidth:0,canvasHeight:0,startPoint:{
            x:0,y:0,},selectColor: 'black',lineColor: '#1A1A1A',// 顏色
        lineSize: 1.5,// 筆記倍數
        radius:5,//畫圓的半徑
    },ready(){
        let canvasName = this.data.canvasName;
        let query = wx.createSelectorQuery().in(this);//獲取自定義元件的SelectQuery物件
        query.select(canvasName)
        .fields({ node: true,size: true })
        .exec((res) => {
          const canvas = res[0].node;
          const ctx = canvas.getContext('2d');
          //獲取裝置畫素比
          const dpr = wx.getSystemInfoSync().pixelRatio;
          //縮放設定canvas畫布大小，防止筆跡錯位
          canvas.width = res[0].width * dpr;
          canvas.height = res[0].height * dpr;
          ctx.scale(dpr,dpr);
          ctx.lineJoin="round";
          this.setData({ctx});
        });
  
        query.select('.handCenterwww.cppcns.com 
').boundingClientRect(rect => {
            console.log('rect',rect);
            this.setData({
                canvasWidth:rect.width,canvasHeight:rect.height
            });
        }).exec();
    },//省略以下程式碼......
});

3. 點選時

Component({
 //省略以上程式碼...
 methods: {
            scaleStart(event){
                if (event.type != 'touchstart') return false;
                let currentPoint = {
                    x: event.touches[0].x,y: event.touches[0].y
                }
                this.drawCircle(currentPoint);
                this.setData({startPoint:currentPoint});
          },drawCircle(point){//這裡負責點
                let ctx = this.data.ctx;
                ctx.beginPath();
                ctx.fillStyle = this.data.lineColor;
            //筆跡粗細由圓的大小決定
                ctx.arc(point.x,point.y,this.data.radius,2 * Math.PI);
                ctx.fill();
                ctx.closePath();
         www.cppcns.com },//省略以下程式碼...
 }
})

4. 簽名時

Component({
  //省略以上程式碼
  methods:{
 drawLine(sourcePoint,targetPoint){
            let ctx = this.data.ctx;
            this.drawCircle(targetPoint);
            ctx.beginPath();
            ctx.strokeStyle = this.data.lineColor;
            ctx.lineWidth = this.data.radius * 2;//這裡乘2是因為線條的粗細要和圓的直徑相等
            ctx.moveTo(sourcePoint.x,sourcePoint.y);
            ctx.lineTo(targetPoint.x,targetPoint.y);
            ctx.stroke();
            ctx.closePath();
          },clearCanvas(){//清空畫布
            let ctx = this.data.ctx;
            ctx.rect(0,this.data.canvasWidth,this.data.canvasHeight);
            ctx.fillStyle = '#FFFFFF';
            ctx.fill();
          }
  }
})