在fabric.js中写下乳胶配方 [英] Write latex formulas in fabric.js
本文介绍了在fabric.js中写下乳胶配方的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望能够在fabric.js画布中使用MathJax在latex中编写公式。
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
是否可以这样做？
推荐答案
我会使用MathJax的SVG渲染器来创建SVG文件然后将该SVG加载到fabric.js中。这是一个例子：
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>
我还把它放到JsFiddle： http://jsfiddle.net/3aHQc/39/
I've also put that into a JsFiddle: http://jsfiddle.net/3aHQc/39/
这篇关于在fabric.js中写下乳胶配方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
