何为手写公式，很简单，就是在网页上可以写出数学公式，并能够生成Latex格式的字符串。废话不多说，直接走正题。
一、首先大家可以先去官网了解一下myscript这个插件
官方网站：https://dev.myscript.com/
二、在去它的github上看一下这个项目
GitHub：https://github.com/MyScript/myscript-math-web
三、根据github上的介绍，要下载其插件首先你需要用到这个命令：
bower install myscript-math-web
注意：这里解释一下 bower 是个命令，需要安装node.js 具体什么关系的我就不在这里描述了，下面贴出两个网址自己看吧。
关系：https://segmentfault.com/q/1010000002855012
安装node.js:http://jingyan.baidu.com/article/2d5afd69e243cc85a2e28efa.html
安装Git：http://blog.csdn.net/renfufei/article/details/41647875
提示：别忘了配置环境变量，以及自己Github上的昵称和邮箱别忘了设置。
四、配置好后，执行bower install myscript-math-web 这个命令会在当前的目录下生成对应的myscript的js文件以及各种文件。
文件下载地址：http://pan.baidu.com/s/1i5JiFyt
提示：上面这个是我自己项目用的，已测试没问题。
五、关键代码：
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>myscript-math-web demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<!-- <script src="polymer.js"></script> -->
<link rel="import" href="../../polymer/polymer.html">
<script src="../../KaTeX/dist/katex.min.js"></script>
<link rel="import" href="../../myscript-common-element/myscript-common-element.html">
<dom-module >
<link rel="stylesheet" href="../../KaTeX/dist/katex.min.css">
<style>
:host {
display: block;
}
myscript-common-element {
height: 100%;
}
myscript-common-element.result {
height: calc(100% - 100px);
}
.resultField {
font-size: larger;
overflow: hidden;
text-align: center;
min-height: 95px;
max-height: 95px;
padding-top: 5px;
position: relative
}
.katexcontainer {
padding-top: 3px ;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<template>
<div ></div></div>
<myscript-common-element host="[[ host ]]"
protocol="[[ protocol ]]"
type="MATH"
applicationkey="[[ applicationkey ]]"
hmackey="[[ hmackey ]]"
timeout="[[ timeout ]]"
ssl="[[ ssl ]]"
hidebuttons="[[ hidebuttons ]]"
mathparameters="[[ _mathParameters ]]"
canundo="{{ canundo }}"
canredo="{{ canredo }}"
canclear="{{ canclear }}"
on-changed="_onChanged"
on-success="_onSuccess"
on-error="_onError">
</myscript-common-element>
</template>
</dom-module>
<script>
var myresult;
Polymer({
is: 'myscript-math-web',
properties: {
protocol: {
type: String,
value: MyScript.Protocol.WS
},
host: {
type: String,
value: 'cloud.myscript.com'
},
timeout: {
type: Number,
value: 2000
},
applicationkey: {
type: String
},
hmackey: {
type: String
},
canundo: {
type: Boolean,
notify: true,
value: false
},
canredo: {
type: Boolean,
notify: true,
value: false
},
canclear: {
type: Boolean,
notify: true,
value: false
},
hidebuttons: {
type: Boolean,
value: false
},
hideresult: {
type: Boolean,
value: false,
observer: '_hideresultChanged'
},
resulttypes: {
type: Array,
value: []
},
_mathParameters: {
type: Object,
computed: '_computeMathParameters(resulttypes)'
},
result: {
type: Object,
notify: true
},
ssl: {
type: Boolean,
value: true
}
},
_clear: function () {
this._myscriptCommonElement.clear();
this.fire('myscript-math-web-delete');
},
_undo: function () {
this._myscriptCommonElement.undo();
},
_redo: function () {
this._myscriptCommonElement.redo();
},
delete: function () {
this._clear();
},
undo: function () {
this._undo();
},
redo: function () {
this._redo();
},
getStats: function () {
if (this._myscriptCommonElement) {
return this._myscriptCommonElement.getStats();
}
},
_onChanged: function (e) {
this.fire(e.type, e.detail);
},
_onSuccess: function (e) {
this.result = {};
if (e.detail.getDocument && e.detail.getDocument().getResultElements().length > 0) {
var resultElements = e.detail.getDocument().getResultElements();
for (var res in resultElements) {
this.result[resultElements[res].getType()] = resultElements[res].getValue();
}
}
var resultField = this.querySelector('.katexcontainer');
if (Object.keys(this.result).length !== 0) {
if (this.result.hasOwnProperty('LATEX')) {
try {
katex.render(this._cleanLatexResult(this.result.LATEX), resultField);
} catch (e) {
resultField.innerHTML = "<span>"+this._cleanLatexResult(this.result.LATEX)+"</span>";
}
} else {
resultField.innerHTML = "<span>No LaTeX mathematic expression return to the result. Check your resulttypes attribut.</span>";
}
} else {
resultField.innerHTML = "";
}
this.fire('myscript-math-web-result', this.result);
myresult=this.result;
},
_onError: function (e) {
this.fire(e.type, e.detail);
},
ready: function () {
this._myscriptCommonElement = this.querySelector('myscript-common-element');
this._hideresultChanged(this.hideresult);
},
_computeMathParameters: function (resulttypes) {
var parameters = new MyScript.MathParameter();
parameters.setResultTypes(resulttypes);
return parameters;
},
_cleanLatexResult: function (latex) {
return latex
.replace("\\overrightarrow", "\\vec")
.replace("\\llbracket", "\\lbracket")
.replace("\\rrbracket", "\\rbracket")
.replace("\\widehat", "\\hat")
.replace(new RegExp("(align.{1})", "g"), "aligned");
},
_hideresultChanged: function (hideresult) {
if (this._myscriptCommonElement) {
if (hideresult) {
this._myscriptCommonElement.classList.remove('result');
} else {
this._myscriptCommonElement.classList.add('result');
}
}
}
});
//保存函数
function saveFn(){
CloseWindow(myresult);
}
//关闭函数
function closeFn(){
CloseWindow("close");
}
// 关闭弹出窗口
function CloseWindow(action) {
if (window.CloseOwnerWindow) {
return window.CloseOwnerWindow(action);
} else {
window.close();
}
}
function mouseOver(e)
{
e.src= "finish_show.png";
}
function mouseOut(e)
{
e.src= "finish.png";
}
function mouseOver1(e)
{
e.src= "close_show.png";
}
function mouseOut1(e)
{
e.src= "close.png";
}
</script>
</head>
<style>
body {
margin: 0;
height: 100vh;
}
myscript-math-web {
height: 100%;
}
.myimg{
cursor:pointer;
margin-top: 4px;
}
</style>
<body touch-action="none" unresolved>
<template >
<myscript-math-web
host="webdemoapi.myscript.com"
applicationkey="22eda92c-10af-40d8-abea-fd4093c17d81"
hmackey="a1fa759f-b3ce-4091-9fd4-d34bb870c601">
</myscript-math-web>
</template>
<div align="center" style="position:fixed;bottom:0;height:50px;width:100%;background:url(icon.png) repeat-x 0 0 ;_position:absolute;_margin-top:expression(this.style.pixelHeight+document.documentElement.scrollTop);z-index: 3;">
<img src="finish.png" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" title="完成" class="myimg" onclick="saveFn()" />
<img src="close.png" onmouseover="mouseOver1(this)" onmouseout="mouseOut1(this)" title="关闭" class="myimg" onclick="closeFn()" />
</div>
</body>
</html>