這篇文章主要介紹了微信小程序怎么實(shí)現(xiàn)簡(jiǎn)單手寫簽名組件的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇微信小程序怎么實(shí)現(xiàn)簡(jiǎn)單手寫簽名組件文章都會(huì)有所收獲，下面我們一起來看看吧。

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的嵩縣網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

需求：

可以實(shí)現(xiàn)用戶在微信小程序上手寫簽名。

需要組件化。

效果

一、思路

在微信小程序中，我們使用canvas組件實(shí)現(xiàn)。將用戶的輸入想象成為一只筆。我們要畫的簽名是由很多點(diǎn)構(gòu)成的。但是單純的點(diǎn)是不能很好地構(gòu)成線。點(diǎn)與點(diǎn)之間還要由線連接。下面是實(shí)現(xiàn)過程代碼。

二、實(shí)現(xiàn)

1. 頁面與樣式

wxml

這里的canvas組件是最新的用法。

  
    清空
  
  
    
    
  

wxss

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

2. 初始化

由于是在自定義組件中使用，所以要注意獲取canvas的時(shí)候的this指向問題。如果不調(diào)用SelectorQuery的In方法，那么就在自定義組件獲取不到canvas，因?yàn)檫@個(gè)時(shí)候指向的父組件。

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

3. 點(diǎn)擊時(shí)

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){//這里負(fù)責(zé)點(diǎn)
                let ctx = this.data.ctx;
                ctx.beginPath();
                ctx.fillStyle = this.data.lineColor;
            //筆跡粗細(xì)由圓的大小決定
                ctx.arc(point.x, point.y, this.data.radius, 0 , 2 * Math.PI);
                ctx.fill();
                ctx.closePath();
          },
          //省略以下代碼...
 }
})

4. 簽名時(shí)

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是因?yàn)榫€條的粗細(xì)要和圓的直徑相等
            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, 0, this.data.canvasWidth, this.data.canvasHeight);
            ctx.fillStyle = "#FFFFFF";
            ctx.fill();
          }
  }
})

關(guān)于“微信小程序怎么實(shí)現(xiàn)簡(jiǎn)單手寫簽名組件”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“微信小程序怎么實(shí)現(xiàn)簡(jiǎn)單手寫簽名組件”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。