Vueはキャンバスの手書き入力を使用して中国語を認識します

// テンプレート
<div class="canvas-container">
 <canvas ref="canvas" width="300" height="200">ブラウザはキャンバスをサポートしていません。ブラウザをアップグレードしてください。 </キャンバス>
</div>

// SCSS で
.キャンバスコンテナ{
 背景: #fafafa;

 キャンバス {
 背景: #fff;
  境界線: 1px実線 #000;
 }
}

データ（） {
  戻る {
    initX: 0, // 初期水平座標 initY: 0, // 初期垂直座標}
},
マウント() {
  このメソッドは、
},
メソッド: {
  // キャンバスの位置を初期化する initBound() {
    バインド = this.$refs.canvas.getBoundingClientRect()
    this.initX = bound.x
    this.initY = 境界.y
  }
}

// テンプレート
<div class="canvas-container">
 <canvas ref="canvas" width="300" height="200" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp">ブラウザはキャンバスをサポートしていません。ブラウザをアップグレードしてください。 </キャンバス>
</div>
// スクリプト
データ（） {
  戻る {
    // ...
    
    lastX: 0, // 前の水平座標lastY: 0, // 前の垂直座標isHandWrite: false, // 手書きを開始するかどうかpointsXY: [], // 単一のストロークallPointsXY: [], // すべてのストローク}
},
メソッド: {
  マウスダウン時(e) {
    this.pointsXY = []
    cx = e.clientX - this.initX とします。
    cy = e.clientY - this.initY とします。
    this.lastX = cx
    this.lastY = cy
    this.pointsXY.push(cx)
    this.pointsXY.push(cy)
    this.isHandWrite = true
  },
  マウスを動かすと(e) {
    if (this.isHandWrite) {
      cx = e.clientX - this.initX とします。
      cy = e.clientY - this.initY とします。
      this.pointsXY.push(cx - this.lastX)
      this.pointsXY.push(cy - this.lastY)
      // 2D コンテキスト オブジェクトを取得します。let ctx = this.$refs.canvas.getContext('2d')
      // 新しいパスを作成する ctx.beginPath()
      ctx.strokeStyle = '#000'
      ctx.fillStyle = '#000'
      ctx.lineWidth = 8
      ctx.lineCap = '丸'
      ctx.moveTo(this.lastX, this.lastY)
      ctx.lineTo(cx, cy)
      ctx.ストローク()
      this.lastX = cx
      this.lastY = cy
    }
  },
  マウスを離すと(e) {
    if (this.isHandWrite) {
      this.isHandWrite = false
      this.allPointsXY.push(this.pointsXY.join(','))
      this.queryText() // テキストを認識する}
  },
}

// スクリプト
データ（） {
  戻る {
    // ...
    
    write_result: [], // 類似の単語を返す}
},
マウント() {
  // ...

  _this = this とします
  // jsonpコールバック関数を追加、qq入力メソッド固有 window['QQShuru'] = {
    HWPanel:
      ajax_callback: 関数 (res) {
        _this.write_result = res.cand
      },
    },
  }
},
メソッド: {
  クエリテキスト() {
    track_str = this.allPointsXY.join(',eb,') とします。
    これ.$jsonp(
      `https://handwriting.shuru.qq.com/cloud/cgi-bin/cloud_hw_pub.wsgi?track_str=${track_str}&cmd=0`
    ).catch(エラー => {
      コンソール.log(エラー)
    })
  },
}

// テンプレート
<div>
  <button @click="onReload">書き換え</button>
</div>

// スクリプト
onReload() {
  if (!this.$refs.canvas) 戻り値
  this.pointsXY = []
  this.allPointsXY = []
  ctx = this.$refs.canvas.getContext('2d') とします。
  ctx.clearRect(0, 0, 300, 200)
}

<テンプレート>
  <div id="アプリ">
    <div class="canvas-container">
      <canvas ref="canvas" width="300" height="200" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp">ブラウザはキャンバスをサポートしていません。ブラウザをアップグレードしてください。 </キャンバス>
    </div>
    <div>[{{ lastX + ', ' + lastY }}]</div>
    <div>
      <button @click="onReload">書き換え</button>
    </div>
    <div>類似の単語を返す: {{ write_result }}</div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'、
  データ（） {
    戻る {
      initX: 0, // 初期水平座標initY: 0, // 初期垂直座標lastX: 0, // 前の水平座標lastY: 0, // 前の垂直座標isHandWrite: false, // 手書きを開始するかどうかpointsXY: [], // 単一のストロークallPointsXY: [], // すべてのストロークwrite_result: [], // 類似の文字を返す}
  },
  マウント() {
    このメソッドは、

    _this = this とします
    // jsonpコールバック関数を追加、qq入力メソッド固有 window['QQShuru'] = {
      HWPanel:
        ajax_callback: 関数 (res) {
          _this.write_result = res.cand
        },
      },
    }
  },
  メソッド: {
    // キャンバスの位置を初期化する initBound() {
      バインド = this.$refs.canvas.getBoundingClientRect()
      this.initX = bound.x
      this.initY = 境界.y
    },
    マウスダウン時(e) {
      コンソールログ('onDown', e)
      this.pointsXY = []
      cx = e.clientX - this.initX とします。
      cy = e.clientY - this.initY とします。
      this.lastX = cx
      this.lastY = cy
      this.pointsXY.push(cx)
      this.pointsXY.push(cy)
      this.isHandWrite = true
    },
    onMouseMove(e) {
      if (this.isHandWrite) {
        cx = e.clientX - this.initX とします。
        cy = e.clientY - this.initY とします。
        this.pointsXY.push(cx - this.lastX)
        this.pointsXY.push(cy - this.lastY)
        // 2D コンテキスト オブジェクトを取得します。let ctx = this.$refs.canvas.getContext('2d')
        // 新しいパスを作成する ctx.beginPath()
        ctx.strokeStyle = '#000'
        ctx.fillStyle = '#000'
        ctx.lineWidth = 8
        ctx.lineCap = '丸'
        ctx.moveTo(this.lastX, this.lastY)
        ctx.lineTo(cx, cy)
        ctx.ストローク()
        this.lastX = cx
        this.lastY = cy
      }
    },
    マウスを離すと(e) {
      if (this.isHandWrite) {
        this.isHandWrite = false
        this.allPointsXY.push(this.pointsXY.join(','))
        this.queryText()
      }
    },
    // テキストを認識する queryText() {
      track_str = this.allPointsXY.join(',eb,') とします。
      これ.$jsonp(
        `https://handwriting.shuru.qq.com/cloud/cgi-bin/cloud_hw_pub.wsgi?track_str=${track_str}&cmd=0`
      ).catch(エラー => {
        コンソール.log(エラー)
      })
    },
    onReload() {
      if (!this.$refs.canvas) 戻り値
      this.pointsXY = []
      this.allPointsXY = []
      ctx = this.$refs.canvas.getContext('2d') とします。
      ctx.clearRect(0, 0, 300, 200)
    },
  },
}
</スクリプト>

<スタイル lang="scss">
＃アプリ {
  フォントファミリー: Avenir、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;

  .キャンバスコンテナ{
    背景: #fafafa;

    キャンバス {
      背景: #fff;
      境界線: 1px実線 #000;
    }
  }
}
</スタイル>