Merender keluaran MathJax di ‹kanvas›

Saya telah mencari topik ini, tetapi tidak dapat menemukan jawaban langsung, dan saya juga tidak mahir dalam javascript. Jadi saya berharap seseorang dapat menunjukkan kepada saya cara melakukan ini.

Saya hanya ingin menampilkan matematika di dalam Canvas2D. Saya menggunakan context.fillText untuk meneruskan string ke canvas2d, tetapi string tersebut jelas tidak diproses oleh Mathjax karena tidak ada di halaman itu sendiri.

Ini MWE. Apa yang saya perlukan untuk memodifikasi ini agar matematika muncul di kanvas?

<!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>

Output yang saya dapatkan sekarang adalah

Grafik Mathematica

Sekali lagi, saya mengerti mengapa ini tidak berfungsi, karena matematika ada di dalam string, Mathjax tidak dapat melihatnya dan memprosesnya. Tapi itu harus berupa string untuk digunakan oleh kanvas. Saya tidak bisa begitu saja menulis context.fillText($\sin(x)$, 50, 100); tanpa tanda kutip string, karena itu tidak akan berhasil.

Mungkin pertanyaan terkait adalah ini, tapi tidak yakin.

Bagaimana cara memformat html dengan MathJax setelah memuatnya menggunakan jQuery.load?


canvas mathjax
person Nasser    schedule 31.12.2013    source sumber
comment
Sudahkah Anda memeriksa developer.mozilla.org/en-US/docs/ HTML/Kanvas/? MathJax dapat menghasilkan keluaran SVG yang merupakan kandidat alami. Namun seperti yang ditunjukkan oleh @Mikko Ohtamaa, MathJax tidak memiliki keluaran kanvas saat ini.   -  person Peter Krautzberger    schedule 31.12.2013
comment
Catatan dari masa depan: cdn.mathjax.org hampir habis masa pakainya, periksa mathjax. org/cdn-shutting-down untuk tips migrasi (dan mungkin perbarui postingan Anda untuk pembaca selanjutnya).   -  person Peter Krautzberger    schedule 21.04.2017
comment
Juga, periksa stackoverflow.com/questions/34924033/ untuk mendapatkan jawaban.   -  person Peter Krautzberger    schedule 21.04.2017

Jawaban (3)


arrow_upward
4
arrow_downward

<canvas> Operasi penarikan teks adalah operasi terpisah dari manipulasi DOM sehingga Mathjax tidak dapat berinteraksi dengan operasi rendering teks kanvas.

Saya tidak yakin apakah saat ini ada <canvas> renderer backend untuk MathJax. Setidaknya tampaknya tidak demikian dengan memeriksa opsi rendering pada demo MathJax saat ini. Jadi, MathJax hanya dapat membuat output di DOM.

Karena alasan keamanan, browser tidak mengizinkan rendering DOM pada <canvas> secara langsung, meskipun secara teknis hal ini memungkinkan. Jika tidak, seseorang dapat mencuri konten dari situs tempat Anda masuk (misalnya Facebook) dengan merender situs tersebut dalam <iframe> dan kemudian merender <iframe> ini di atas kanvas.

person Mikko Ohtamaa    schedule 31.12.2013
comment
Seperti yang ditunjukkan oleh komentator lain, Anda seharusnya dapat merender gambar keluaran SVG di `‹kanvas›. - person Mikko Ohtamaa; 02.01.2014

arrow_upward
2
arrow_downward

Saya telah mencoba mencari tahu hal yang sama. Saya memasukkan MathJax ke elemen kanvas tetapi belum menemukan cara menggunakan MathJax dalam konteks yang Anda jelaskan di atas. Tapi kalau-kalau ini membantu, ini dia.

$(function () {
    function drawCanvas(){
      $math = $(".MathJax_Display")
      html2canvas($math, {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
      }); 
    }
    MathJax.Hub.Queue(drawCanvas);
})

http://jsfiddle.net/masterthornton/umnc40d6/7/

person matthew    schedule 11.09.2015
comment
jsfiddle tidak ada :( - person steveOw; 09.12.2020

arrow_upward
1
arrow_downward

Saya mendorong Anda untuk memeriksa: https://github.com/CurriculumAssociates/canvas-latex

Ini memungkinkan Anda merender lateks di perpustakaan kanvas populer (seperti PixiJS/CreateJS). Ini juga menyediakan beberapa metode api yang kuat untuk membagi lateks, menambahkan makro, dll.

person Ryan Randall    schedule 05.10.2018