基于vue的移动端数学公式键盘插件,支持手写识别

4,922 阅读2分钟

演示地址:www.codwiki.cn/laboratory/…

项目地址:github.com/MilkyMoon/m…

此插件可用于H5页面的公式渲染与书写,渲染使用的是mathquill.js,所以只要mathquill支持的格式,本插件都支持。

更新日志

  1. 增加输入框触摸移动光标
  2. 长按删除键快速删除

插件的安装

NPM

npm i math-keyboard

插件依赖

由于本插件公式渲染使用了mathquill.js,该插件依赖于JQuery,所以需要正确引用JQuery

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

引入插件

import Vue from 'vue';
import MathKeyboard from 'math-keyboard';

Vue.use(MathKeyboard);

基本用法

<!-- 公式渲染 -->
<math-render :value.sync="value" :imgshow='!show'></math-render>

<!-- 键盘 -->
<math-keyboard 
    :show.sync="show"
    v-bind:keypanel='1'
    :value.sync="value"
    :output.sync="output"
    url='http://localhost:8080/formula'
    v-bind:writeShow='true'
></math-keyboard>

API

参数 说明 类型 默认值
:show.sync 键盘的显示与隐藏 Boolean false
v-bind:keypanel 默认键盘的面板(1.数字2.符号3.字母) Number 1
:value.sync 当前键盘LaTeX值,会实时更新,可当做默认值传递 String
:output.sync 输出LaTeX值 String
url 手写识别接口地址 String
v-bind:writeShow 是否使用手写 Boolean true

手写识别

本插件手写识别使用的是 seshat,感兴趣的可以自行搭建,默认接口使用的是官方示例接口

请求示例(已内置,只需提供接口地址即可,可自行后台搭建):

$.ajax({
  url:"http://cat.prhlt.upv.es/mer/eq.php",
  method: 'post',
  data: {
    strokes:params
  },
  dataType:'json',
  success(res){
    console.log(res.data)
	}
})

公式符号扩展

配置格式如下,可根据自己的需求来修改,目前还不支持通过API来进行修改

k:按键显示字符

v:符号latex代码

i:对于一些无法正常输入的符号可以使用图片代替(仅显示)

import img from './img.js'

//符号配置
keysym:[
    {k:'',v:'^2',i:img.cuadrado},
    {k:'',v:'^3',i:img.tercera},
    {k:'',v:'/',i:img.fraccion},
    {k:'',v:'^',i:img.potencia},
    {k:'',v:'\\sqrt',i:img.raiz2},
    {k:'',v:'\\nthroot',i:img.raiz},
    {k:'',v:'(',i:img.zkh},
    {k:'',v:')',i:img.ykh},
    {k:'',v:'[',i:img.zfkh},
    {k:'',v:']',i:img.yfkh},
    {k:'sin',v:'\\sin',i:''},
    {k:'cos',v:'\\cos',i:''},
    {k:'tan',v:'\\tan',i:''},
    {k:'π',v:'\\pi',i:''},
    {k:'',v:'|',i:img.abs},
    {k:'≈',v:'\\approx',i:''},
    {k:'%',v:'%',i:''},
    {k:'+',v:'+',i:''},
    {k:'-',v:'-',i:''},
    {k:'×',v:'\\times',i:''},
    {k:'÷',v:'\\div',i:''},
    {k:'±',v:'\\pm',i:''},
    {k:'>',v:'>',i:''},
    {k:'<',v:'<',i:''},
    {k:'≥',v:'\\geq',i:''},
    {k:'≤',v:'\\leq',i:''},
    {k:',',v:',',i:''},
    {k:':',v:':',i:''},
    {k:'或',v:'或',i:''},
    {k:'且',v:'且',i:''},
    {k:'非',v:'非',i:''},
]

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build