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

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

効果画像:

序文:

最近、屋外の大画面プロジェクトに取り組んでいました。システムの入力方法は使いにくかったため、顧客は Web ページに埋め込むことができる手書き入力方法を要求しました。

コア:

バックエンドインターフェースAPI: QQ入力方式の手書きインターフェースを使用する

https://handwriting.shuru.qq.com/cloud/cgi-bin/cloud_hw_pub.wsgi

パラメータ例示するタイプデフォルト値
トラック文字列ストローク文字列。単一のストロークは、「x1、y1、x2、y2、...」の形式で連結されます。複数のストロークは、単一のストロークを基準とした eb の形式で連結されます。たとえば、「x1、y1、x2、y2、eb、x3、y3、x4、y4」です。-
コマンド不明、現在 0番号-

注:このインターフェースは他の大物の記事から学びました。原文はここにあります。公式文書の関連アドレスを見つけることができませんでした。どなたかご存知の方がいらっしゃいましたら、メッセージを残して教えてください。ありがとうございます!

アイデア:

(1)キャンバス描画領域を作成する

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

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

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


(2)初期の水平座標と垂直座標の取得

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

(3)マウスクリックイベント、移動イベント、リリースイベントを追加する

// テンプレート
<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() // テキストを認識する}
  },
}


(4) テキスト認識インターフェースとjsonpコールバック関数を追加します。Vue-jsonpはクロスドメインリクエストに使用されます。具体的な使用方法については、vueでのjsonpの使用を参照してください。

// スクリプト
データ() {
  戻る {
    // ...
    
    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(エラー)
    })
  },
}


(5)最後に、キャンバスをクリアするための書き換えボタンを追加します。

// テンプレート
<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;
    }
  }
}
</スタイル>

これで、キャンバスの手書き入力を使用して中国語を認識する vue に関するこの記事は終了です。キャンバスの手書き入力を使用して中国語を認識する vue に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • VueはCanvasを使用してランダムなサイズで重なり合わない円を生成します
  • Vueはキャンバスを使用して画像圧縮アップロードを実現します
  • vue+canvasでタイムラインを描く方法
  • VUE+CanvasはシンプルなGobangゲームの全プロセスを実現します
  • VUE+Canvasは、インゴットを受け取る富の神のゲームを実装します
  • VUE と Canvas を使用して Thunder Fighter タイピング ゲームを実装する方法
  • VUE+Canvasはデスクトップピンボールブロック破壊ゲームのサンプルコードを実装します
  • Vueはマウスを使ってキャンバス上に四角形を描きます
  • Vueはキャンバスを使用してモバイル手書き署名を実装します
  • Vue+canvasでパズルゲームを実現

<<:  Linuxのシグナルメカニズムについての簡単な説明

>>:  CSS 経由で JS にパラメータを渡す方法

推薦する

nginxの基礎を学ぶ

目次1. nginx とは何ですか? 2. nginx で何ができるのか? 2.1 フォワードプロキ...

MySQLに挿入する前にデータが存在するかどうかを確認する方法

ビジネスシナリオ: 訪問者の訪問状況を記録する必要があるが、繰り返し記録することはできない挿入する前...

さまざまなマウスの形状を表現する方法

<a href = "http://" style = "cur...

Tomcat が localhost に通常アクセスすると 404 を報告する問題の解決方法

今日、プロジェクトのホームページにアクセスするために Tomcat を設定していたところ、404 エ...

MySQL の複数テーブル関連付け 1 対多クエリを使用して最新のデータを取得する方法の例

この記事では、MySQL で複数のテーブルを使用して 1 対多のクエリを使用して最新のデータを取得す...

Tomcat8はcronologを使用してCatalina.Outログを分割します

背景tomcat によって生成された catalina.out ログ ファイルが分割されていない場合...

react-beautiful-dnd を使用してリスト間のドラッグ アンド ドロップを実装する

目次react-beautiful-dndを選ぶ理由基本的な使い方基本概念使い方使用中に発生した問題...

Reactでpropsを使用する方法と制限する方法

コンポーネントの props (props はオブジェクトです)機能: コンポーネントに渡されたデー...

Nginx Rewrite の使用シナリオと設定方法の分析

Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....

Vue コードの読みやすさに関するいくつかの提案

目次1. コンポーネントをうまく活用してコードを整理する1. UIコンポーネントを抽出する2. モジ...

MySQL 5.7.20 zip インストール チュートリアル

MySQL 5.7.20 zipインストール、具体的な内容は次のとおりです(1)圧縮パッケージを解凍...

JS におけるメモリと変数の保存についての詳細な説明

目次序文JSマジックナンバー数値の保存バイナリ変換方法なぜ 0.1 + 0.2 !== 0.3 なの...

DockerコンテナのIPアドレスを表示する方法

私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...

Dockerイメージのローカル移行の実装

最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...

Vue における LocalStorage と SessionStorage の違いと使い方

目次LocalStorageとはSessionStorageとはLocalStorage と Ses...