Vue + MathLive 实现数学公式可编辑

Vue + MathLive 实现数学公式可编辑效果图一.环境webpack cli4.0html2canvas 插件二.配置在index.html 下引用 mathlive js<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-

君之虞

7154人浏览 · 2020-11-12 11:00:30

君之虞 · 2020-11-12 11:00:30 发布

Vue + MathLive 实现数学公式可编辑

效果图
在这里插入图片描述

一.环境

webpack cli4.0
html2canvas 插件

二.配置

在index.html 下引用 mathlive js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script src="https://unpkg.com/mathlive"></script>

    <!-- built files will be auto injected -->
  </body>
</html>

main.js 设置 vue对象的 prototype

const MathLive = require('MathLive')
Vue.prototype.$MathLive = MathLive

由于在cli4.0 之后没有webpack.base.config, 所以根据官方文档参考，在根项目下创建 vue.config.js 文件
并往内编写如下代码：

const path = require('path')
module.exports = {
  configureWebpack: {
    externals: {
      'MathLive': 'MathLive'
    }
  }
}

在这里插入图片描述

三.编写代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <main>
      <div class="mathfield" id="mf">
        $$\nexists \exists f(x)+\frac{3i}{y\cdot h}$$
        <!-- $$\frac{\text{a\textit{b\textbf{\textsf{c}d}}}}{\mathbf{e\mathit{f}\mathbb{G}}}$$ -->
      </div>
      <!-- <div class="output" id="latex"></div>
      <div class="output" id="mathjson"></div>-->
    </main>

    <h3>---------- 测试 -----------</h3>
    <button @click="bntClick">测试将公式转图片</button>
    <button @click="bntClick2">清除公式</button>
    <br />
    <p>演示效果</p>
    <img :src="testImg" alt />
    <br />

    <h3>--- 测试 canvas ---</h3>
    <div class="myCanvas">
      <canvas id="canvas" width="880" height="680" ref="canvas" />
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "测试 mathlive",
      testImg: "",
      MathLive: null,
    };
  },
  methods: {
    bntClick() {
      // var copyDom = this.$refs.ff.cloneNode(true); //克隆dom节点
      var dom = document.querySelector(".ML__mathlive");
      var copyDom = dom.cloneNode(true);
      copyDom.style.position = "absolute"; // 绝对位置
      copyDom.style.top = "0px"; // 顶部
      copyDom.style.zIndex = "-100"; // 图层下面，好似不起作用 会先闪现一下，暂时未想到如何一开始就让其在图层下

      document.body.appendChild(copyDom); //把copy的截图对象追加到body后面

      var rect = copyDom.getBoundingClientRect(); //获取元素相对于视察的偏移量

      var width = rect.width; //dom宽
      // var height = rect.height; //dom高
      var height = copyDom.clientHeight; //dom高

      console.log(width, height);
      console.log(rect);

      var scale = 1; //放大倍数
      var canvas = document.createElement("canvas"); //创建画布
      canvas.width = width * scale; //canvas宽度
      canvas.height = height * scale; //canvas高度
      var ctx = canvas.getContext("2d");
      ctx.scale(scale, scale);

      html2canvas(copyDom, {
        scale: scale,
        canvas: canvas,
        width: width,
        heigth: height,
        background: "#fff",
        scrollY: 0,
        scrollX: 0,
        x: 0,
        y: 0,
      }).then((canvas) => {
        let dataUrl = canvas.toDataURL("image/png");
        console.log(dataUrl);
        this.testImg = dataUrl;
        copyDom.remove();

        var img = new Image();
        this.ctx.drawImage(canvas, 150, 150);
      });
    },
    bntClick2() {
      console.log(this.$MathLive)
      // document
      //   .querySelector("#mathf")
      //   .mathfield.$insert("AAA", { insertionMode: "replaceAll" });
         this.MathLive.$insert("AAA", { insertionMode: "replaceAll" })
         console.log(this.MathLive.$text())
    },

    initCanvas() {
      this.canvas = this.$refs.canvas; //指定canvas
      this.ctx = this.canvas.getContext("2d"); //设置2D渲染区域
      // this.ctx.lineWidth = 5; //设置线的宽度
    },
    initMathlive() {
      this.MathLive = this.$MathLive.makeMathField("mf", {
        smartMode: true,
        virtualKeyboardMode: "manual",
        onContentDidChange: (mf) => {
          const latex = mf.$text();
        },
      });
    },
  },

  mounted() {
    console.log(this.$MathLive);
    console.log(this);
    this.initMathlive()
    this.initCanvas();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}


</style>

如果看不到公式的话：在 App.vue 内添加CSS样式修改一下

body.ML__fonts-loading .ML__base {
    visibility: visible!important;
}

如果以上还是不行的话尝试在webpack.base.conf.js中加入：

  externals:{
    'MathLive':'MathLive'
  }

在这里插入图片描述

转载：https://www.jianshu.com/p/6cbb35cb9d3a

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^