Das WeChat-Applet implementiert eine einfache handschriftliche Signaturkomponente

<Klasse anzeigen="dashbox">
  <Klasse anzeigen="btnList">
    <van-button size="small" bind:click="clearCanvas">Löschen</van-button>
  </Ansicht>
  <Ansichtsklasse="handCenter">
    <Leinwand 
      Klasse = "Handschrift" 
      Scrollen deaktivieren="{{true}}" 
      id="Handschrift"
      bindtouchstart="SkalierungStart"
      bindtouchmove="ScaleMove" 
      bindtouchend="scaleEnd"
      bindtap="Maus nach unten"
      Typ="2d"
    >
    </Leinwand>
  </Ansicht>
</Ansicht>

.btnList{
    Breite: 95 %;
    Rand: 0 automatisch;
}
.Handschrift{
    Hintergrund: #fff;
    Breite: 95 %;
    Höhe: 80vh;
    margin:0 automatisch
}

Komponente({
 /**
 * Ausgangsdaten der Komponente */
    Daten: {
        Leinwandname: '#handWriting',
        ctx:'',
        Leinwandbreite: 0,
        Leinwandhöhe: 0,
        Startpunkt: {
            x:0,
            y:0,
        },
        Farbe auswählen: 'schwarz',
        Linienfarbe: '#1A1A1A', // Farbe Liniengröße: 1,5, // Mehrfachradius beachten: 5, // Radius des Kreises}, 
    bereit(){
        let canvasName = this.data.canvasName;
        let query = wx.createSelectorQuery().in(this); //Holen Sie sich das SelectQuery-Objekt der benutzerdefinierten Komponente query.select(canvasName)
        .fields({ Knoten: wahr, Größe: wahr })
        .exec((res) => {
          Konstanten Leinwand = res[0].node;
          const ctx = canvas.getContext('2d');
          //Gerätepixelverhältnis abrufen const dpr = wx.getSystemInfoSync().pixelRatio;
          //Skalieren und stellen Sie die Leinwandgröße ein, um eine Verschiebung der Handschrift zu verhindern canvas.width = res[0].width * dpr;
          Leinwand.Höhe = res[0].Höhe * dpr;
          ctx.scale(dpr, dpr);
          ctx.lineJoin="Runde";
          dies.setData({ctx});
        });
  
        Abfrage.Select('.handCenter').boundingClientRect(rect => {
            Konsole.log('Rechteck', Rechteck);
            dies.setData({
                Leinwandbreite:rechteck.Breite,
                Leinwandhöhe:rechteck.höhe
            });
        }).exec();
    },
   //Den folgenden Code weglassen...
});

Komponente({
 //Den obigen Code weglassen...
 Methoden: {
            scaleStart(Ereignis){
                wenn (Ereignistyp != 'touchstart') false zurückgibt;
                lass aktuellenPunkt = {
                    x: Ereignis.berührt[0].x,
                    y: Ereignis.berührt[0].y
                }
                dies.drawCircle(aktuellerPunkt);
                dies.setData({startPoint:currentPoint});
          },
            drawCircle(point){//Hier ist für den Punkt verantwortlich let ctx = this.data.ctx;
                ctx.beginPath();
                ctx.fillStyle = diese.Daten.Linienfarbe;
            //Die Dicke der Handschrift wird durch die Größe des Kreises bestimmt ctx.arc(point.x, point.y, this.data.radius, 0 , 2 * Math.PI);
                ctx.fill();
                ctx.closePath();
          },
          //Den folgenden Code weglassen...
 }
})

Komponente({
  //Lassen Sie die obigen Codemethoden weg:{
 zeichneLinie(Quellpunkt, Zielpunkt){
            lass ctx = diese.Daten.ctx;
            dies.drawCircle(Zielpunkt);
            ctx.beginPath();
            ctx.strokeStyle = diese.Daten.Linienfarbe;
            ctx.lineWidth = this.data.radius * 2; //Der Grund für die Multiplikation mit 2 besteht hier darin, dass die Dicke der Linie dem Durchmesser des Kreises entsprechen soll ctx.moveTo(sourcePoint.x, sourcePoint.y);
            ctx.lineTo(Zielpunkt.x, Zielpunkt.y);
            ctx.stroke();
            ctx.closePath();
          },
          clearCanvas(){//Leinwand löschen let ctx = this.data.ctx;
            ctx.rect(0, 0, Breite dieser.Daten.Leinwand, Höhe dieser.Daten.Leinwand);
            ctx.fillStyle = "#FFFFFF";
            ctx.fill();
          }
  }
})