効果画像:
アイデア: (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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
目次1. nginx とは何ですか? 2. nginx で何ができるのか? 2.1 フォワードプロキ...
ビジネスシナリオ: 訪問者の訪問状況を記録する必要があるが、繰り返し記録することはできない挿入する前...
<a href = "http://" style = "cur...
今日、プロジェクトのホームページにアクセスするために Tomcat を設定していたところ、404 エ...
この記事では、MySQL で複数のテーブルを使用して 1 対多のクエリを使用して最新のデータを取得す...
背景tomcat によって生成された catalina.out ログ ファイルが分割されていない場合...
目次react-beautiful-dndを選ぶ理由基本的な使い方基本概念使い方使用中に発生した問題...
コンポーネントの props (props はオブジェクトです)機能: コンポーネントに渡されたデー...
Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....
目次1. コンポーネントをうまく活用してコードを整理する1. UIコンポーネントを抽出する2. モジ...
MySQL 5.7.20 zipインストール、具体的な内容は次のとおりです(1)圧縮パッケージを解凍...
目次序文JSマジックナンバー数値の保存バイナリ変換方法なぜ 0.1 + 0.2 !== 0.3 なの...
私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...
最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...
目次LocalStorageとはSessionStorageとはLocalStorage と Ses...