Как связать <span>в <canvas>JavaScript, чтобы получить математические формулы - PullRequest
Новая
       7

Как связать <span>в <canvas>JavaScript, чтобы получить математические формулы

0 голосов
/ 04 ноября 2018

У меня есть небольшая проблема, чтобы понять, как я могу реализовать формулу из существующего файла KaTex Js в элементе canvas, чтобы получить те же символы, что и при использовании 

<span id="mykatex1">...</span>
<script>
  katex.render("f(a,b,c) = (a^2+b^2+c^2)^3", mykatex1);
</script>

. Но я хочу использовать в 

ctx.fillText( "-A", p_index_a, p_index_a );

сектор, где 

 "-A"

есть. ... И это моя проблема. Может быть, существует другой способ реализации математических функций в области холста, но сейчас я немного растерялся и не понял, как справиться с этим. Кстати. Это полнофункциональный пустой динамический граф. Бесплатно для использования. Решение было бы круто, потому что план состоит в том, чтобы внедрить те же символы в области графика. THX 

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Simple guide to using KaTeX</title>
  <link rel="stylesheet" href="css/js_formeln__katex.min.css">
  <script src="js/katex.min.js"></script>
  <style type="text/css">
    canvas {
      border: 1px solid black;
      font: 1.2em "Fira Sans", sans-serif;
    }
  </style>
</head>
<body>
  <p><span id="mykatex1">...</span></p>
  <script>
    katex.render("f(a,b,c) = (a^2+b^2+c^2)^3", mykatex1);
  </script>
  <body onload="draw();">
  <canvas id="canvas" width="2000" height="1000" ></canvas>
</body>

<script>
  function draw() {
    var canvas = document.getElementById('canvas');
    if (canvas.getContext) {

    var ctx = canvas.getContext('2d');
    var b_x = 300, b_y = 300;
    var b_x_erweitern_um = 600;
    var b_y_erweitern_um = 100;
    var x = 0, y = 0;
    var grid_breite_x_y = 10;
    var linewidth_1 = 0.1 , linewidth_2 = 1;
    var freier_oberer_rand = 10;
    var nach_links_verkleinern = 0;
    var nach_rechts_verkleinern = 500;
    var d_in = 0.5;

    for ( x ; x <= b_x - freier_oberer_rand - nach_links_verkleinern - 
      nach_rechts_verkleinern + b_x_erweitern_um ; x += grid_breite_x_y ) {
      ctx.moveTo( d_in + x + freier_oberer_rand + nach_rechts_verkleinern , freier_oberer_rand );
      ctx.lineWidth = linewidth_1;
      ctx.lineTo( d_in + x + freier_oberer_rand + nach_rechts_verkleinern , b_x + b_y_erweitern_um);
    }

    // horizontale Linien
    for ( y + freier_oberer_rand ; y <= b_y - freier_oberer_rand + b_y_erweitern_um ; y += grid_breite_x_y ) {
      ctx.moveTo( freier_oberer_rand + nach_rechts_verkleinern , d_in + y + freier_oberer_rand);
      ctx.lineWidth = linewidth_1;
      ctx.lineTo( b_x - nach_links_verkleinern + b_x_erweitern_um , d_in + y + freier_oberer_rand );
    }
    ctx.strokeStyle = "black";
    ctx.stroke();

    // Pfeile für x
    ctx.beginPath();
    ctx.fillStyle = 'black';
    ctx.moveTo( b_x - nach_links_verkleinern + b_x_erweitern_um + 10, b_y + b_y_erweitern_um );
    ctx.lineTo( b_x - nach_links_verkleinern + b_x_erweitern_um + 5, b_y + b_y_erweitern_um - 2 );
    ctx.lineTo( b_x - nach_links_verkleinern + b_x_erweitern_um + 5, b_y + b_y_erweitern_um + 2 );
    ctx.lineTo( b_x - nach_links_verkleinern + b_x_erweitern_um + 10, b_y + b_y_erweitern_um );
    ctx.fill();
    // Pfeile für y
    ctx.beginPath();
    ctx.moveTo( freier_oberer_rand + nach_rechts_verkleinern , freier_oberer_rand - 10 );
    ctx.lineTo( freier_oberer_rand + nach_rechts_verkleinern + 2 , freier_oberer_rand - 5 );
    ctx.lineTo( freier_oberer_rand + nach_rechts_verkleinern - 2 , freier_oberer_rand - 5 );
    ctx.lineTo( freier_oberer_rand + nach_rechts_verkleinern , freier_oberer_rand - 10 );
    ctx.fill();

    // Bezeichnung x und y
    ctx.beginPath();
    ctx.font = '10pt Calibri';
    ctx.fillStyle = 'black';

    ctx.fillText( "y", freier_oberer_rand + nach_rechts_verkleinern - 10, freier_oberer_rand + 2 );
    ctx.fillText( "x", b_x - nach_links_verkleinern + b_x_erweitern_um , b_y + b_y_erweitern_um + 10 );

    var h_font      = 30;
    var p_index_a   = 30;
    var p_index_b   = 90;
    var omega       = "0x03A9";
    var test        = "\\frac{d}{dx}\\left[\\int_a^xf(t)dt\\right]=f(x)";
    var test2       = encodeURIComponent("\\frac{d}{dx}\\left[\\int_a^xf(t)dt\\right]=f(x)");

    ctx.beginPath();
    ctx.font = '30px Helvetica, Arial, sans-serif';
    ctx.fillStyle = 'lime';
    ctx.fillText( "-A", p_index_a, p_index_a );
    ctx.fillText( "Aufprallfläche der Teilchen", p_index_b, p_index_a );
    ctx.fillStyle = 'red';
    ctx.fillText( "-V", p_index_a, p_index_a*2 );
    ctx.fillText( "Volumen bei d. Impulsion", p_index_b, p_index_a*2 );
  }
  else {
    alert("Dein Browser unterstützt das <canvas> Element nicht");
  }
}
draw();
</script>

1 Ответ

0 голосов
/ 07 ноября 2018

Повышение моего комментария к ответу.

Этот ответ не отвечает на поставленный вопрос, а предлагает альтернативу тому, чего вы на самом деле пытались достичь.

Назад в Запрос на получение KaTeX 251 Я проделал некоторую работу, чтобы сделать мой личный форк из KaTeX для рендеринга в canvas, для интеграции с CindyJS , как в this демо .

Основным преимуществом непосредственного рисования на холсте было то, что оно прекрасно интегрировалось с другими компонентами, изменяющими холст, включая обрезку, наложение, преобразования, многократные этапы обработки, сохранение всего изображения как одного изображения и тому подобное. Кроме того, вертикальное выравнивание HTML по четко определенной базовой линии удивительно сложно.

Я потерял связь с обсуждением моего запроса на получение ответа с тех пор, как опубликовал его. Последнее, что я знал, был некоторый план по разработке некоторого промежуточного представления, которое можно было бы размещать на различных бэкэндах, включая HTML + CSS и Canvas. Не уверен, насколько продвинулись эти усилия. Мой пиар был закрыт, так как он стал довольно устаревшим.

...