vue使用canvas手写输入识别中文 vue使用canvas手写输入识别中文

效果图：

文章图片

前言：

最近做一个室外大屏项目，系统上的输入法使用不方便，客户要求做一个嵌入web网页的手写输入法。

核心：

后端接口api：使用 QQ输入法手写接口

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

参数	说明	类型	默认值
track_str	笔画字符串，单笔画以'x1,y1,x2,y2,…‘格式拼接，多笔画在单笔画的基础上以eb拼接，例如'x1,y1,x2,y2,eb,x3,y3,x4,y4'	string	-
cmd	未知，目前传0	number	-

注：此接口通过其他大佬文章获知，原文在此，本人未能查到官方文档相关地址，如果有大佬知晓还请留言告知，感谢！

思路：

（1）创建一个canvas绘图区域

// template // scss.canvas-container { background: #fafafa; canvas { background: #fff; border: 1px solid #000; }}

（2）获取初始横纵坐标

data() {return {initX: 0, // 初始横坐标initY: 0, // 初始纵坐标}},mounted() {this.initBound()},methods: {// 初始化canvas位置initBound() {let bound = this.$refs.canvas.getBoundingClientRect()this.initX = bound.xthis.initY = bound.y}}

（3）添加鼠标点击事件、移动事件、松开事件

// template // scriptdata() {return {// ...lastX: 0, // 上一个横坐标lastY: 0, // 上一个纵坐标isHandWrite: false, // 是否开始手写pointsXY: [], // 单笔画allPointsXY: [], // 全部笔画}},methods: {onMouseDown(e) {this.pointsXY = []let cx = e.clientX - this.initXlet cy = e.clientY - this.initYthis.lastX = cxthis.lastY = cythis.pointsXY.push(cx)this.pointsXY.push(cy)this.isHandWrite = true},onMouseMove(e) {if (this.isHandWrite) {let cx = e.clientX - this.initXlet cy = e.clientY - this.initYthis.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 = 8ctx.lineCap = 'round'ctx.moveTo(this.lastX, this.lastY)ctx.lineTo(cx, cy)ctx.stroke()this.lastX = cxthis.lastY = cy}},onMouseUp(e) {if (this.isHandWrite) {this.isHandWrite = falsethis.allPointsXY.push(this.pointsXY.join(','))this.queryText() // 识别文字}},}

（4）添加识别文字接口以及jsonp回调函数，跨域请求使用了 vue-jsonp ，具体用法可参vue中jsonp的使用方法

// scriptdata() {return {// ...write_result: [], // 返回相近字}},mounted() {// ...let _this = this// 添加jsonp回调函数, 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）最后再加个清除画布的重写按钮

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

全部代码如下：

#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; }}}

【vue使用canvas手写输入识别中文】到此这篇关于vue使用canvas手写输入识别中文的文章就介绍到这了,更多相关vue使用canvas手写输入识别中文内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！