WeChatアプレットはシンプルな手書き署名コンポーネントを実装します

<ビュークラス="ダッシュボックス">
  <view class="btnList">
    <van-button size="small" bind:click="clearCanvas">クリア</van-button>
  </ビュー>
  <view class="handCenter">
    <キャンバス 
      クラス="手書き" 
      スクロールを無効にする="{{true}}" 
      id="手書き"
      bindtouchstart="スケール開始"
      bindtouchmove="スケール移動" 
      bindtouchend="スケール終了"
      bindtap="mouseDown"
      タイプ = "2d"
    >
    </キャンバス>
  </ビュー>
</ビュー>

.btnリスト{
    幅: 95%;
    マージン:0 自動;
}
。手書き{
    背景: #fff;
    幅: 95%;
    高さ：80vh;
    マージン:0 自動
}

成分（{
 /**
 * コンポーネントの初期データ */
    データ： {
        キャンバス名:'#handWriting',
        ctx:''、
        キャンバス幅:0,
        キャンバスの高さ:0,
        開始点:{
            x:0,
            y:0,
        },
        選択色: '黒',
        lineColor: '#1A1A1A', // 色 lineSize: 1.5, // 複数に注意してください radius: 5, // 円の半径}, 
    準備ができて（）{
        キャンバス名を this.data.canvasName とします。
        let query = wx.createSelectorQuery().in(this); //カスタムコンポーネントのSelectQueryオブジェクトを取得します。query.select(canvasName)
        .fields({ ノード: true, サイズ: true })
        .exec((res) => {
          const キャンバス = res[0].node;
          const ctx = canvas.getContext('2d');
          //デバイスのピクセル比を取得します。const dpr = wx.getSystemInfoSync().pixelRatio;
          // 手書きのずれを防ぐためにキャンバスのサイズを拡大縮小して設定します。canvas.width = res[0].width * dpr;
          キャンバスの高さをres[0]の高さに合わせる。
          ctx.scale(dpr, dpr);
          ctx.lineJoin="丸め";
          this.setData({ctx});
        });
  
        クエリ.select('.handCenter').boundingClientRect(rect => {
            console.log('rect', rect);
            this.setData({
                キャンバス幅:rect.width、
                キャンバスの高さ:rect.height
            });
        }).exec();
    },
   //次のコードを省略します...
});

成分（{
 //上記のコードを省略します...
 メソッド: {
            スケール開始(イベント){
                event.type != 'touchstart' の場合は false を返します。
                現在のポイントを{
                    x: イベント.タッチ[0].x、
                    y: イベント.タッチ[0].y
                }
                this.drawCircle(現在のポイント);
                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();
          },
          //次のコードを省略します...
 }
})

成分（{
  //上記のコードメソッドを省略:{
 描画線(ソースポイント、ターゲットポイント){
            ctx = this.data.ctx; とします。
            ターゲットポイントに円を描画します。
            ctx.beginPath();
            ctx.strokeStyle = this.data.lineColor;
            ctx.lineWidth = this.data.radius * 2; //ここで 2 倍する理由は、線の太さが円の直径と等しくなるようにするためです。ctx.moveTo(sourcePoint.x, sourcePoint.y);
            ctx.lineTo(ターゲットポイント.x、ターゲットポイント.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();
          }
  }
})