欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用canvas手寫(xiě)輸入識(shí)別中文

 更新時(shí)間：2021年11月17日 08:50:55   作者：sunddy_x  
這篇文章主要介紹了vue使用canvas手寫(xiě)輸入識(shí)別中文，工作時(shí)遇到一些項(xiàng)目如：系統(tǒng)上的輸入法使用不方便，客戶要求做一個(gè)嵌入web網(wǎng)頁(yè)的手寫(xiě)輸入法。下面我們來(lái)看看文章得具體描述吧

效果圖：

前言：

最近做一個(gè)室外大屏項(xiàng)目，系統(tǒng)上的輸入法使用不方便，客戶要求做一個(gè)嵌入web網(wǎng)頁(yè)的手寫(xiě)輸入法。

核心：

后端接口api：使用 QQ輸入法手寫(xiě)接口

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

參數(shù) 說(shuō)明 類型 默認(rèn)值
track_str 筆畫(huà)字符串，單筆畫(huà)以'x1,y1,x2,y2,…‘格式拼接，多筆畫(huà)在單筆畫(huà)的基礎(chǔ)上以eb拼接，例如'x1,y1,x2,y2,eb,x3,y3,x4,y4' string -
cmd 未知，目前傳0 number -

注：此接口通過(guò)其他大佬文章獲知，原文在此，本人未能查到官方文檔相關(guān)地址，如果有大佬知曉還請(qǐng)留言告知，感謝！

思路：

（1）創(chuàng)建一個(gè)canvas繪圖區(qū)域

// template
<div class="canvas-container">
 <canvas ref="canvas" width="300" height="200">你的瀏覽器不支持 canvas，請(qǐng)升級(jí)你的瀏覽器。</canvas>
</div>

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

 canvas {
 background: #fff;
  border: 1px solid #000;
 }
}

（2）獲取初始橫縱坐標(biāo)

data() {
  return {
    initX: 0, // 初始橫坐標(biāo)
    initY: 0, // 初始縱坐標(biāo)
  }
},
mounted() {
  this.initBound()
},
methods: {
  // 初始化canvas位置
  initBound() {
    let bound = this.$refs.canvas.getBoundingClientRect()
    this.initX = bound.x
    this.initY = bound.y
  }
}

（3）添加鼠標(biāo)點(diǎn)擊事件、移動(dòng)事件、松開(kāi)事件

// template
<div class="canvas-container">
 <canvas ref="canvas" width="300" height="200" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp">你的瀏覽器不支持 canvas，請(qǐng)升級(jí)你的瀏覽器。</canvas>
</div>
// script
data() {
  return {
    // ...
    
    lastX: 0, // 上一個(gè)橫坐標(biāo)
    lastY: 0, // 上一個(gè)縱坐標(biāo)
    isHandWrite: false, // 是否開(kāi)始手寫(xiě)
    pointsXY: [], // 單筆畫(huà)
    allPointsXY: [], // 全部筆畫(huà)
  }
},
methods: {
  onMouseDown(e) {
    this.pointsXY = []
    let cx = e.clientX - this.initX
    let 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) {
      let cx = e.clientX - this.initX
      let cy = e.clientY - this.initY
      this.pointsXY.push(cx - this.lastX)
      this.pointsXY.push(cy - this.lastY)
      // 獲取2d上下文對(duì)象
      let ctx = this.$refs.canvas.getContext('2d')
      // 新建一條路徑
      ctx.beginPath()
      ctx.strokeStyle = '#000'
      ctx.fillStyle = '#000'
      ctx.lineWidth = 8
      ctx.lineCap = 'round'
      ctx.moveTo(this.lastX, this.lastY)
      ctx.lineTo(cx, cy)
      ctx.stroke()
      this.lastX = cx
      this.lastY = cy
    }
  },
  onMouseUp(e) {
    if (this.isHandWrite) {
      this.isHandWrite = false
      this.allPointsXY.push(this.pointsXY.join(','))
      this.queryText() // 識(shí)別文字
    }
  },
}

（4）添加識(shí)別文字接口以及jsonp回調(diào)函數(shù)，跨域請(qǐng)求使用了 vue-jsonp ，具體用法可參vue中jsonp的使用方法

// script
data() {
  return {
    // ...
    
    write_result: [], // 返回相近字
  }
},
mounted() {
  // ...

  let _this = this
  // 添加jsonp回調(diào)函數(shù), qq輸入法特定
  window['QQShuru'] = {
    HWPanel: {
      ajax_callback: function (res) {
        _this.write_result = res.cand
      },
    },
  }
},
methods: {
  queryText() {
    let track_str = this.allPointsXY.join(',eb,')
    this.$jsonp(
      `https://handwriting.shuru.qq.com/cloud/cgi-bin/cloud_hw_pub.wsgi?track_str=${track_str}&cmd=0`
    ).catch(err => {
      console.log(err)
    })
  },
}

（5）最后再加個(gè)清除畫(huà)布的重寫(xiě)按鈕

// template
<div>
  <button @click="onReload">重寫(xiě)</button>
</div>

// script
onReload() {
  if (!this.$refs.canvas) return
  this.pointsXY = []
  this.allPointsXY = []
  let ctx = this.$refs.canvas.getContext('2d')
  ctx.clearRect(0, 0, 300, 200)
}

全部代碼如下：

<template>
  <div id="app">
    <div class="canvas-container">
      <canvas ref="canvas" width="300" height="200" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp">你的瀏覽器不支持 canvas，請(qǐng)升級(jí)你的瀏覽器。</canvas>
    </div>
    <div>[{{ lastX + ', ' + lastY }}]</div>
    <div>
      <button @click="onReload">重寫(xiě)</button>
    </div>
    <div>返回相近字：{{ write_result }}</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      initX: 0, // 初始橫坐標(biāo)
      initY: 0, // 初始縱坐標(biāo)
      lastX: 0, // 上一個(gè)橫坐標(biāo)
      lastY: 0, // 上一個(gè)縱坐標(biāo)
      isHandWrite: false, // 是否開(kāi)始手寫(xiě)
      pointsXY: [], // 單筆畫(huà)
      allPointsXY: [], // 全部筆畫(huà)
      write_result: [], // 返回相近字
    }
  },
  mounted() {
    this.initBound()

    let _this = this
    // 添加jsonp回調(diào)函數(shù), qq輸入法特定
    window['QQShuru'] = {
      HWPanel: {
        ajax_callback: function (res) {
          _this.write_result = res.cand
        },
      },
    }
  },
  methods: {
    // 初始化canvas位置
    initBound() {
      let bound = this.$refs.canvas.getBoundingClientRect()
      this.initX = bound.x
      this.initY = bound.y
    },
    onMouseDown(e) {
      console.log('onDown', e)
      this.pointsXY = []
      let cx = e.clientX - this.initX
      let 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) {
        let cx = e.clientX - this.initX
        let cy = e.clientY - this.initY
        this.pointsXY.push(cx - this.lastX)
        this.pointsXY.push(cy - this.lastY)
        // 獲取2d上下文對(duì)象
        let ctx = this.$refs.canvas.getContext('2d')
        // 新建一條路徑
        ctx.beginPath()
        ctx.strokeStyle = '#000'
        ctx.fillStyle = '#000'
        ctx.lineWidth = 8
        ctx.lineCap = 'round'
        ctx.moveTo(this.lastX, this.lastY)
        ctx.lineTo(cx, cy)
        ctx.stroke()
        this.lastX = cx
        this.lastY = cy
      }
    },
    onMouseUp(e) {
      if (this.isHandWrite) {
        this.isHandWrite = false
        this.allPointsXY.push(this.pointsXY.join(','))
        this.queryText()
      }
    },
    // 識(shí)別文字
    queryText() {
      let track_str = this.allPointsXY.join(',eb,')
      this.$jsonp(
        `https://handwriting.shuru.qq.com/cloud/cgi-bin/cloud_hw_pub.wsgi?track_str=${track_str}&cmd=0`
      ).catch(err => {
        console.log(err)
      })
    },
    onReload() {
      if (!this.$refs.canvas) return
      this.pointsXY = []
      this.allPointsXY = []
      let ctx = this.$refs.canvas.getContext('2d')
      ctx.clearRect(0, 0, 300, 200)
    },
  },
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

  .canvas-container {
    background: #fafafa;

    canvas {
      background: #fff;
      border: 1px solid #000;
    }
  }
}
</style>

到此這篇關(guān)于vue使用canvas手寫(xiě)輸入識(shí)別中文的文章就介紹到這了,更多相關(guān)vue使用canvas手寫(xiě)輸入識(shí)別中文內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 關(guān)于vue-lunar-full-calendar的使用說(shuō)明

    關(guān)于vue-lunar-full-calendar的使用說(shuō)明

    這篇文章主要介紹了關(guān)于vue-lunar-full-calendar的使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-07-07
  • Element Plus實(shí)現(xiàn)Affix 固釘

    Element Plus實(shí)現(xiàn)Affix 固釘

    本文主要介紹了Element Plus實(shí)現(xiàn)Affix 固釘，Affix組件用于將頁(yè)面元素固定在特定可視區(qū)域，文中通過(guò)示例代碼介紹的非常詳細(xì)，感興趣的小伙伴們可以參考一下
    2021-07-07
  • vue彈窗嵌入其它vue頁(yè)面的操作代碼

    vue彈窗嵌入其它vue頁(yè)面的操作代碼

    這篇文章主要介紹了vue彈窗如何嵌入其它vue頁(yè)面,實(shí)現(xiàn)方式是將其他頁(yè)面作為組件傳入，在父頁(yè)面將該組件引入到彈框內(nèi)，實(shí)例代碼簡(jiǎn)單易懂需要的朋友可以參考下
    2022-11-11
  • 手寫(xiě)實(shí)現(xiàn)Vue計(jì)算屬性

    手寫(xiě)實(shí)現(xiàn)Vue計(jì)算屬性

    這篇文章主要介紹了手寫(xiě)實(shí)現(xiàn)Vue計(jì)算屬性，本文從一個(gè)簡(jiǎn)單的計(jì)算屬性例子開(kāi)始，一步步實(shí)現(xiàn)了計(jì)算屬性。并且針對(duì)這個(gè)例子，詳細(xì)分析了頁(yè)面渲染時(shí)的整個(gè)代碼執(zhí)行邏輯，需要的小伙伴可以參考一下
    2022-08-08
  • Vue封裝svg-icon組件使用教程

    Vue封裝svg-icon組件使用教程

    SVG（Scalable?Vector?Graphics）可縮放矢量圖形，是一種用于描述基于二維的矢量圖形的?XML?標(biāo)記語(yǔ)言，其基本矢量顯示對(duì)象包括矩形、圓、橢圓、多邊形、直線、任意曲線等，還能顯示文字對(duì)象和嵌入式外部圖像
    2023-02-02
  • Vue的兼容性解決方案Babel-polyfill案例解析

    Vue的兼容性解決方案Babel-polyfill案例解析

    這篇文章主要介紹了Vue的兼容性解決方案Babel-polyfill的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2023-11-11
  • 關(guān)于nuxt?store中保存localstorage的問(wèn)題

    關(guān)于nuxt?store中保存localstorage的問(wèn)題

    這篇文章主要介紹了關(guān)于nuxt?store中保存localstorage的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue實(shí)現(xiàn)簡(jiǎn)易計(jì)算器

    Vue實(shí)現(xiàn)簡(jiǎn)易計(jì)算器

    這篇文章主要為大家詳細(xì)介紹了用Vue制作的簡(jiǎn)易計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-02-02
  • vue中父子組件的參數(shù)傳遞和應(yīng)用示例

    vue中父子組件的參數(shù)傳遞和應(yīng)用示例

    這篇文章主要介紹了vue中父子組件的參數(shù)傳遞和應(yīng)用示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
    2021-01-01
  • vue-router 路由基礎(chǔ)的詳解

    vue-router 路由基礎(chǔ)的詳解

    這篇文章主要介紹了vue-router 路由基礎(chǔ)的詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下
    2017-10-10

最新評(píng)論