การเรนเดอร์เอาต์พุต MathJax บน ‹canvas›

ฉันค้นหาหัวข้อนี้แล้ว แต่ไม่สามารถหาคำตอบโดยตรงได้ และฉันก็ใช้จาวาสคริปต์ไม่เก่งด้วย ดังนั้นฉันหวังว่าจะมีคนแสดงให้ฉันเห็นว่าต้องทำอย่างไร

ฉันแค่ต้องการแสดงคณิตศาสตร์ใน canvas2D ฉันใช้ context.fillText เพื่อส่งสตริงไปที่ canvas2d แต่สตริงนั้นไม่ได้รับการประมวลผลโดย Mathjax อย่างชัดเจนเนื่องจากไม่ได้อยู่ในหน้านั้น

นี่คือ MWE ฉันต้องแก้ไขอะไรเพื่อให้คณิตศาสตร์ปรากฏบนผืนผ้าใบ

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

ผลลัพธ์ที่ฉันได้รับตอนนี้คือ

กราฟิก Mathematica

ฉันเข้าใจอีกครั้งว่าทำไมมันถึงใช้งานไม่ได้ เนื่องจากคณิตศาสตร์อยู่ในสตริง Mathjax จึงไม่สามารถมองเห็นและประมวลผลได้ แต่ต้องเป็นเชือกเพื่อใช้เป็นผ้าใบ ฉันไม่สามารถเขียน context.fillText($\sin(x)$, 50, 100); โดยไม่มีเครื่องหมายคำพูดแบบสตริงได้ เนื่องจากมันจะใช้งานไม่ได้

อาจเป็นคำถามที่เกี่ยวข้องกันคือสิ่งนี้ แต่ไม่แน่ใจ

ฉันจะจัดรูปแบบ html ด้วย MathJax หลังจากโหลดโดยใช้ jQuery.load?


canvas mathjax
person Nasser    schedule 31.12.2013    source แหล่งที่มา
comment
คุณได้ดู developer.mozilla.org/en-US/docs/ แล้วหรือยัง HTML/แคนวาส/? MathJax สามารถสร้างเอาต์พุต SVG ซึ่งจะเป็นตัวเลือกโดยธรรมชาติ แต่ดังที่ @Mikko Ohtamaa ชี้ให้เห็น MathJax ไม่มีเอาต์พุตแคนวาสในขณะนี้   -  person Peter Krautzberger    schedule 31.12.2013
comment
หมายเหตุจากอนาคต: cdn.mathjax.org ใกล้จะสิ้นสุดอายุการใช้งานแล้ว โปรดดูที่ mathjax org/cdn-shutting-down เพื่อดูเคล็ดลับในการย้ายข้อมูล (และอาจอัปเดตโพสต์ของคุณสำหรับผู้อ่านในอนาคต)   -  person Peter Krautzberger    schedule 21.04.2017
comment
นอกจากนี้ ให้ตรวจสอบ stackoverflow.com/questions/34924033/ เพื่อหาคำตอบ   -  person Peter Krautzberger    schedule 21.04.2017

คำตอบ (3)


arrow_upward
4
arrow_downward

<canvas> การดำเนินการวาดข้อความเป็นการดำเนินการที่แยกจาก การจัดการ DOM ดังนั้น Mathjax จึงไม่สามารถโต้ตอบกับการดำเนินการแสดงข้อความบนผ้าใบได้

ฉันไม่แน่ใจว่ามีแบ็กเอนด์ <canvas> renderer สำหรับ MathJax อยู่หรือไม่ อย่างน้อยก็ดูเหมือนจะไม่เป็นเช่นนั้นด้วยการตรวจสอบตัวเลือกการเรนเดอร์ในการสาธิต MathJax ปัจจุบัน ดังนั้น MathJax จึงสามารถสร้างเอาต์พุตบน DOM เท่านั้น

เนื่องจากเหตุผลด้านความปลอดภัย เบราว์เซอร์จึงไม่อนุญาตให้แสดงผล DOM บน <canvas> โดยตรง แม้ว่าจะเป็นไปได้ในทางเทคนิคก็ตาม มิฉะนั้นอาจมีผู้ขโมยเนื้อหาจากไซต์ที่คุณเข้าสู่ระบบ (เช่น Facebook) โดยการแสดงผลไซต์ใน <iframe> จากนั้นจึงแสดงผล <iframe> นี้บนผืนผ้าใบ

person Mikko Ohtamaa    schedule 31.12.2013
comment
ตามที่ผู้วิจารณ์คนอื่นๆ ชี้ให้เห็น คุณควรจะสามารถแสดงภาพที่ส่งออก SVG บน `‹canvas› ได้ - person Mikko Ohtamaa; 02.01.2014

arrow_upward
2
arrow_downward

ฉันพยายามคิดออกสิ่งเดียวกัน ฉันได้นำ MathJax เข้าสู่องค์ประกอบ Canvas แต่ยังไม่ทราบวิธีใช้ MathJax ในบริบทที่คุณอธิบายไว้ข้างต้น แต่ในกรณีนี้จะช่วยได้

$(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 ไม่มีอยู่ :( - person steveOw; 09.12.2020

arrow_upward
1
arrow_downward

ฉันขอแนะนำให้คุณลองดู: https://github.com/CurriculumAssociates/canvas-latex

ช่วยให้คุณสามารถเรนเดอร์ลาเท็กซ์ในไลบรารีแคนวาสยอดนิยม (เช่น PixiJS/CreateJS) นอกจากนี้ยังมีวิธี API ที่มีประสิทธิภาพในการแบ่งลาเท็กซ์ เพิ่มมาโคร ฯลฯ

person Ryan Randall    schedule 05.10.2018