Javascript 在fabric.js中编写乳胶配方
我希望能够在fabric.js画布上用latex编写公式，也许可以使用MathJaxJavascript 在fabric.js中编写乳胶配方,javascript,latex,fabricjs,mathjax,Javascript,Latex,Fabricjs,Mathjax,我希望能够在fabric.js画布上用latex编写公式，也许可以使用MathJax 可以这样做吗？我将使用MathJax的SVG渲染器创建一个SVG文件，然后将该SVG加载到fabric.js中。下面是一个例子： <!-- It is important to use the SVG configuration of MathJax! --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/a
可以这样做吗？我将使用MathJax的SVG渲染器创建一个SVG文件，然后将该SVG加载到fabric.js中。下面是一个例子：
<!-- 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>
//此函数执行实际工作
函数tex（文本，回调）{
//使用LaTeX代码创建脚本元素
var div=document.createElement（“div”）；
div.style.position=“绝对”；
div.style.left=“-1000px”；
文件.正文.附件（div）；
var se=document.createElement（“脚本”）；
se.setAttribute（“类型”、“数学/文本”）；
se.innerHTML=文本；
儿童组（东南部）；
Process（se，function（））{
//处理完成后，从DOM中删除
//在执行tht之前请等待一段时间，因为MathJax在此之前调用此函数
//实际显示输出
变量显示=函数（）{
//获取显示当前数学的帧
var frame=document.getElementById（se.id+“-frame”）；
如果（！帧）{
设置超时（显示，500）；
返回；
}
//加载SVG
var svg=frame.getElementsByTagName（“svg”）[0]；
setAttribute（“xmlns”http://www.w3.org/2000/svg");
setAttribute（“版本”、“1.1”）；
var height=svg.parentNode.offsetHeight；
var width=svg.parentNode.offsetWidth；
setAttribute（“高度”，高度）；
setAttribute（“宽度”，宽度）；
removeAttribute（“样式”）；
//将全局MathJAX元素嵌入其中
var mathJaxGlobal=document.getElementById（“MathJax_SVG_glyphs”）；
appendChild（mathJaxGlobal.cloneNode（true））；
//创建一个数据URL
var svgSource=''+'\n'+'+'\n'+svg.outerHTML；
var retval=“data:image/svg+xml；base64，”+btoa（unescape（encodeURIComponent（svgSource））；
//移除临时元素
文件.正文.删除文件（div）；
//调用用户回调
回调（返回、宽度、高度）；
};
设置超时（显示，1000）；
});
}
document.onload=函数（）{
var canvas=newfabric.canvas（“画布”）；
tex（“1+\\int\u x^y e^x dx+\\ldots”，函数（svg、宽度、高度）{
//这里有一个svg文件的数据url
//使用FabricJS绘制：
fabric.Image.fromURL（svg，函数（img）{
img.height=高度；
img.width=宽度；
canvas.add（img）；
});
});
};
我还将其放入了JSFIDLE中：我只在Firefox29中测试了代码。显然，Chrome（或您正在使用的其他浏览器）还不支持svg图像的
outerHTMLImage.fromURLsvgSourceretvalcallback