Vue verwendet Canvas-Handschrifteingabe, um Chinesisch zu erkennen

// Vorlage
<div Klasse="Canvas-Container">
 <canvas ref="canvas" width="300" height="200">Ihr Browser unterstützt Canvas nicht, bitte aktualisieren Sie Ihren Browser. </Leinwand>
</div>

// scss
.canvas-container {
 Hintergrund: #fafafa;

 Leinwand {
 Hintergrund: #fff;
  Rand: 1px durchgezogen #000;
 }
}

Daten() {
  zurückkehren {
    initX: 0, // anfängliche horizontale Koordinate initY: 0, // anfängliche vertikale Koordinate}
},
montiert() {
  dies.initBound()
},
Methoden: {
  // Canvas-Position initialisieren initBound() {
    let bound = this.$refs.canvas.getBoundingClientRect()
    dies.initX = gebunden.x
    dies.initY = gebunden.y
  }
}

// Vorlage
<div Klasse="Canvas-Container">
 <canvas ref="canvas" width="300" height="200" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp">Ihr Browser unterstützt Canvas nicht, bitte aktualisieren Sie Ihren Browser. </Leinwand>
</div>
// Skript
Daten() {
  zurückkehren {
    // ...
    
    lastX: 0, // vorherige horizontale KoordinatelastY: 0, // vorherige vertikale KoordinateisHandWrite: false, // ob mit der Handschrift begonnen werden sollpointsXY: [], // einzelner StrichallPointsXY: [], // alle Striche}
},
Methoden: {
  beiMausUnten(e) {
    dies.pointsXY = []
    lass cx = e.clientX - this.initX
    lass cy = e.clientY - this.initY
    dies.letztesX = cx
    dies.letztesY = cy
    dies.pointsXY.push(cx)
    dies.pointsXY.push(cy)
    this.isHandWrite = true
  },
  beiMausbewegung(e) {
    wenn (dies.istHandWrite) {
      lass cx = e.clientX - this.initX
      lass cy = e.clientY - this.initY
      dies.pointsXY.push(cx - dies.lastX)
      dies.pointsXY.push(cy - dies.lastY)
      // Holen Sie sich das 2D-Kontextobjekt let ctx = this.$refs.canvas.getContext('2d')
      // Einen neuen Pfad erstellen ctx.beginPath()
      ctx.strokeStyle = "#000"
      ctx.fillStyle = "#000"
      ctx.Linienbreite = 8
      ctx.lineCap = "rund"
      ctx.moveTo(dieses.letztesX, dieses.letztesY)
      ctx.lineTo(cx, cy)
      ctx.stroke()
      dies.letztesX = cx
      dies.letztesY = cy
    }
  },
  beiMausHoch(e) {
    wenn (dies.istHandWrite) {
      this.isHandWrite = false
      dies.allePunkteXY.push(dies.punkteXY.join(','))
      this.queryText() // Text erkennen}
  },
}

// Skript
Daten() {
  zurückkehren {
    // ...
    
    write_result: [], //Gibt ähnliche Wörter zurück}
},
montiert() {
  // ...

  lass _dies = dies
  // JSONP-Rückruffunktion hinzufügen, qq-Eingabemethode spezifisch window['QQShuru'] = {
    HWPanel:
      ajax_callback: Funktion (res) {
        _this.write_result = res.cand
      },
    },
  }
},
Methoden: {
  AbfrageText() {
    let track_str = this.allPointsXY.join(',eb,')
    dies.$jsonp(
      `https://handwriting.shuru.qq.com/cloud/cgi-bin/cloud_hw_pub.wsgi?track_str=${track_str}&cmd=0`
    ).catch(err => {
      console.log(fehler)
    })
  },
}

// Vorlage
<div>
  <button @click="onReload">Umschreiben</button>
</div>

// Skript
beimNeuladen() {
  wenn (!this.$refs.canvas) return
  dies.pointsXY = []
  dies.allePunkteXY = []
  lass ctx = dies.$refs.canvas.getContext('2d')
  ctx.clearRect(0, 0, 300, 200)
}

<Vorlage>
  <div id="app">
    <div Klasse="Canvas-Container">
      <canvas ref="canvas" width="300" height="200" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp">Ihr Browser unterstützt Canvas nicht, bitte aktualisieren Sie Ihren Browser. </Leinwand>
    </div>
    <div>[{{ letztesX + ', ' + letztesY }}]</div>
    <div>
      <button @click="onReload">Umschreiben</button>
    </div>
    <div>Gibt ähnliche Wörter zurück: {{ write_result }}</div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App",
  Daten() {
    zurückkehren {
      initX: 0, // Anfangshorizontale KoordinateinitY: 0, // Anfangsvertikale KoordinatelastX: 0, // Vorherige horizontale KoordinatelastY: 0, // Vorherige vertikale KoordinateisHandWrite: false, // Ob mit der Handschrift begonnen werden sollpointsXY: [], // Einzelner StrichallPointsXY: [], // Alle Strichewrite_result: [], // Gibt ähnliche Zeichen zurück}
  },
  montiert() {
    dies.initBound()

    lass _dies = dies
    // JSONP-Rückruffunktion hinzufügen, qq-Eingabemethode spezifisch window['QQShuru'] = {
      HWPanel:
        ajax_callback: Funktion (res) {
          _this.write_result = res.cand
        },
      },
    }
  },
  Methoden: {
    // Canvas-Position initialisieren initBound() {
      let bound = this.$refs.canvas.getBoundingClientRect()
      dies.initX = gebunden.x
      dies.initY = gebunden.y
    },
    beiMausUnten(e) {
      console.log('onDown', e)
      dies.pointsXY = []
      lass cx = e.clientX - this.initX
      lass cy = e.clientY - this.initY
      dies.letztesX = cx
      dies.letztesY = cy
      dies.pointsXY.push(cx)
      dies.pointsXY.push(cy)
      this.isHandWrite = true
    },
    beiMausbewegung(e) {
      wenn (dies.istHandWrite) {
        lass cx = e.clientX - this.initX
        lass cy = e.clientY - this.initY
        dies.pointsXY.push(cx - dies.lastX)
        dies.pointsXY.push(cy - dies.lastY)
        // Holen Sie sich das 2D-Kontextobjekt let ctx = this.$refs.canvas.getContext('2d')
        // Einen neuen Pfad erstellen ctx.beginPath()
        ctx.strokeStyle = "#000"
        ctx.fillStyle = "#000"
        ctx.Linienbreite = 8
        ctx.lineCap = "rund"
        ctx.moveTo(dieses.letztesX, dieses.letztesY)
        ctx.lineTo(cx, cy)
        ctx.stroke()
        dies.letztesX = cx
        dies.letztesY = cy
      }
    },
    beiMausHoch(e) {
      wenn (dies.istHandWrite) {
        this.isHandWrite = false
        dies.allePunkteXY.push(dies.punkteXY.join(','))
        dieser.queryText()
      }
    },
    // Text erkennen queryText() {
      let track_str = this.allPointsXY.join(',eb,')
      dies.$jsonp(
        `https://handwriting.shuru.qq.com/cloud/cgi-bin/cloud_hw_pub.wsgi?track_str=${track_str}&cmd=0`
      ).catch(err => {
        console.log(fehler)
      })
    },
    beimNeuladen() {
      wenn (!this.$refs.canvas) return
      dies.pointsXY = []
      dies.allePunkteXY = []
      lass ctx = dies.$refs.canvas.getContext('2d')
      ctx.clearRect(0, 0, 300, 200)
    },
  },
}
</Skript>

<style lang="scss">
#app {
  Schriftfamilie: Avenir, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;

  .canvas-container {
    Hintergrund: #fafafa;

    Leinwand {
      Hintergrund: #fff;
      Rand: 1px durchgezogen #000;
    }
  }
}
</Stil>