위 챗 애플 릿 은 간단 한 손 으로 서명 구성 요 소 를 만 드 는 방법 인 스 턴 스 를 실현 합 니 다.

배경:
프로젝트 를 진행 하 는 과정 에서 위 챗 애플 릿 에서 손 으로 쓴 서명 구성 요 소 를 실현 해 야 합 니 다.인터넷 에서 위 챗 애플 릿 을 찾 아 손 으로 서명 을 했 지만 모두 이상 적 이지 않 았 다.실제 운용 에 서 는 실시 간 으로 계산 이 많은 베 세 르 곡선 때문에 렉 이 생 긴 다.효과 가 좋 지 않다.그 러 니 한 걸음 물 러 서 라.필봉 과 필적 시 뮬 레이 션 효 과 는 필요 없다.간단 한 손 글씨 서명 만 하면 됩 니 다.
필요:
사용자 가 위 챗 애플 릿 에 손 으로 서명 하 는 것 을 실현 할 수 있 습 니 다.
구성 요소 화가 필요 합 니 다.
효과.

생각
위 챗 애플 릿 에서 우 리 는 canvas 구성 요 소 를 사용 하여 이 루어 집 니 다.사용자 의 입력 을 펜 으로 상상 합 니 다.우리 가 그 려 야 할 서명 은 여러 가지 로 구성 되 어 있다.하지만 단순 한 점 은 선 을 잘 구성 하지 못 한 다 는 것 이다.점 과 점 사 이 는 선 으로 연결 해 야 한다.다음은 실현 프로 세 스 코드 입 니 다.
실현
1.페이지 와 스타일
wxml
이곳 의 canvas 구성 요 소 는 최신 용법 입 니 다.

<view class="dashbox">
  <view class="btnList">
    <van-button size="small" bind:click="clearCanvas">  </van-button>
  </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('.handCenter').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, 0 , 2 * Math.PI);
                ctx.fill();
                ctx.closePath();
          },
          //      ...
 }
})

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, 0, this.data.canvasWidth, this.data.canvasHeight);
            ctx.fillStyle = '#FFFFFF';
            ctx.fill();
          }
  }
})

3.총화
이 손 으로 쓴 서명 은 단지 업무 응급 사용 을 위 한 것 이다.최적화 하려 면 필봉 시 뮬 레이 션 과 필적 시 뮬 레이 션 에서 시작 할 수 있다.실시 간 시 뮬 레이 션 과정 에서 끊 기 는 문 제 를 해결 해 야 할 뿐이다.
위 챗 애플 릿 이 간단 한 손 글씨 서명 구성 요 소 를 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 위 챗 애플 릿 손 글씨 서명 구성 요소 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!