Write latex formulas in fabric.js

2019-04-12 10:59发布

站内问答 / JavaScript
1320 1 6

I would like to be able to write formulas in latex in a fabric.js canvas, perhaps with MathJax.

http://fabricjs.com/fabric-intro-part-2#text

Is it possible to do that?

1条回答
The star\"
2楼-- · 2019-04-12 11:15

I would use the SVG renderer of MathJax to create a SVG file and then load that SVG into fabric.js. Here's an example:

<!-- It is important to use the SVG configuration of MathJax! -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_SVG">
</script>

<!-- You might need at least Fabric 1.4.6, because of a bug with data URLs -->
<script type="text/javascript" src="https://raw.githubusercontent.com/kangax/fabric.js/master/dist/fabric.js">
</script>

<body>
  <canvas id="canvas" width="400" height="400"></canvas>

  <script type="text/javascript">
    // This function does the actual work
    function tex(text, callback) {
        // Create a script element with the LaTeX code
        var div = document.createElement("div");
        div.style.position = "absolute";
        div.style.left = "-1000px";
        document.body.appendChild(div);
        var se = document.createElement("script");
        se.setAttribute("type", "math/tex");
        se.innerHTML = text;
        div.appendChild(se);
        MathJax.Hub.Process(se, function() {
            // When processing is done, remove from the DOM
            // Wait some time before doing tht because MathJax calls this function before
            // actually displaying the output
            var display = function() {
                // Get the frame where the current Math is displayed
                var frame = document.getElementById(se.id + "-Frame");
                if(!frame) {
                    setTimeout(display, 500);
                    return;
                }

                // Load the SVG
                var svg = frame.getElementsByTagName("svg")[0];
                svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
                svg.setAttribute("version", "1.1");
                var height = svg.parentNode.offsetHeight;
                var width = svg.parentNode.offsetWidth;
                svg.setAttribute("height", height);
                svg.setAttribute("width", width);
                svg.removeAttribute("style");

                // Embed the global MathJAX elements to it
                var mathJaxGlobal = document.getElementById("MathJax_SVG_glyphs");
                svg.appendChild(mathJaxGlobal.cloneNode(true));

                // Create a data URL
                var svgSource = '<?xml version="1.0" encoding="UTF-8"?>' + "\n" + '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' + "\n" + svg.outerHTML;
                var retval = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgSource)));


                // Remove the temporary elements
                document.body.removeChild(div);

                // Invoke the user callback
                callback(retval, width, height);
            };
            setTimeout(display, 1000);
        });
    }


    document.onload = function() {
      var canvas = new fabric.Canvas("canvas");

      tex("1+\\int_x^y e^x dx + \\ldots", function(svg, width, height) {
          // Here you have a data url for a svg file
          // Draw using FabricJS:
          fabric.Image.fromURL(svg, function(img) {
              img.height = height;
              img.width = width;
              canvas.add(img);
          });
      });
    };
  </script>
</body>

I've also put that into a JsFiddle: http://jsfiddle.net/3aHQc/39/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)