在< canvas>上渲染MathJax输出 [英] Rendering MathJax output on <canvas>
问题描述
我已经搜索了该主题，但是无法找到直接答案，而且我也不擅长javascript.所以我希望有人可以告诉我该怎么做.
I have searched this topic, but not able to find a direct answer, and I am also not good in javascript. So I hope someone can show me how to do this.
我只想在canvas2D中显示数学.我使用context.fillText将字符串传递给canvas2d，但是Mathjax显然不处理该字符串，因为它不在页面本身上.
I simply like to display math inside canvas2D. I use context.fillText to pass string to canvas2d, but that string is clearly not being processed by Mathjax since it is not on the page itself.
这是MWE.我需要修改什么才能使数学显示在画布上?
Here is a MWE. What do I need to modify this to make math show up on the canvas?
<!DOCTYPE html>
<html>
<head>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
</p>Trying to render $\sin(x)$ inside canvas 2D as text</p>
<div>
<canvas id="e" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
context.font = "normal 16px Arial";
context.fillText("test string", 50, 50);
context.fillText("$\sin(x)$", 50, 100);
</script>
</div>
</body>
</html>
我现在得到的输出是
同样，我确实理解为什么它不起作用，因为数学在字符串内，Mathjax无法看到它并对其进行处理.但是必须是画布使用的字符串.我不能只写没有字符串引号的context.fillText($\sin(x)$, 50, 100);，因为它不起作用.
Again, I do understand why it is not working, since the math is inside the string, Mathjax can't see it and process it. But it has to be a string for use by canvas. I can't just write context.fillText($\sin(x)$, 50, 100); without the string quotes, since it will not work.
这可能是一个相关的问题，但不确定.
Might be a related question is this, but not sure.
如何使用jQuery.load加载HTML之后用MathJax格式化html吗?
推荐答案
<canvas>文本绘制操作是与 DOM操作，因此Mathjax无法与画布文本呈现操作进行交互.
<canvas> text draw operations are separate operations from DOM manipulation and thus Mathjax cannot interact with canvas text rendering operations.
我不确定当前是否存在MathJax的<canvas>渲染器后端.至少通过检查当前MathJax演示中的渲染选项似乎并非如此.因此，MathJax只能在DOM上创建输出.
I am not sure if there exists <canvas> renderer backend for MathJax currently. At least it doesn't seem to be so by checking the rendering options on current MathJax demos. Thus, MathJax can only create output on DOM.
由于安全原因，浏览器不允许直接在<canvas>上呈现DOM，尽管在技术上是可行的.否则，您可以通过在<iframe>中呈现该网站，然后在画布上呈现该<iframe>来从您登录的网站(例如Facebook)中窃取内容.
Due to security reasons, browsers do not allow rendering DOM on <canvas> directly, though this is technically possible. Otherwise one could steal content from sites you are logged in (e.g. Facebook) by rendering the site in <iframe> and then rendering this <iframe> on canvas.
这篇关于在< canvas>上渲染MathJax输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
