2015-10-16 4 views
-3

Есть ли простой конструктор уравнений (для базовых уравнений - без матриц), который не только создает читаемую и редактируемую формулу, но и создает функцию, которую можно вызвать.Конструктор уравнений JavaScript WYSIWYG И создание функции

Mockup example

+0

Если я правильно понимаю вас, вы просите редактор WYSIWYG, который может вернуть уравнение, которое может обрабатывать javascript? Я работаю над ShareMath, который является редактором WYSIWYG. Но он вернет уравнения в MathML или TeX, и все редакторы, которых я знаю, будут делать что-то. – NLemay

+1

Не каждое уравнение является функцией. – Bergi

+0

Я знаю. Я только запрашиваю то, что может создать образ математического уравнения, может сделать эквивалентную JS-функцию. – Norfeldt

ответ

0

Я думаю, что это ближе всего к то, что вы asked..javascript калькулятор. Найди его онлайн. испытал его и это хорошо. Попробуйте это тоже. Вы можете добавить функциональные возможности .. конечно

<div id="display" class="display"></div><ul> 
    <li>7</li> 
    <li>8</li> 
    <li>9</li> 
    <li>C</li> 
    <li>AC</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>x</li> 
    <li>/</li> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>+</li> 
    <li>-</li> 
    <li>0</li> 
    <li>.</li> 
    <li>=</li> 
</ul> 

    .display { 
    border: 1px solid #AAA; 
    padding: 20px; 
    font-size: 20px; 
    width: 295px; 
    text-align: right; 
    height: 25px;}ul { 
    margin: 0; 
    padding:0; 
    overflow: hidden; 
    border: 1px solid #CCC; 
    width: 335px;}li { 
    float: left; 
    border: 1px solid #CCC; 
    background-color: #555; 
    color: White; 
    padding: 20px; 
    width: 25px; 
    height: 20px; 
    text-align: center;}/**5.12 6.12 0.12 96.12 6.65 6.6* 6.634 Works normally:  1.65, 2.65, 3.65, 8.65, 9.65, 10.65 Innaccurate decimal: 4.65, 5.65, 6.65, 7.65, 
Works normally:  1.12, 2.12, 3.12, 8.12, 9.12, 10.12 Innaccurate decimal: 4.12, 5.12, 6.12, 7.12, *//  var Calculator = function() {  this.total = 0;  this.current = 0; 
    this.operation = null; 
    this.fractionExp = 0; 
}; Calculator.prototype = { 
    add: function() { 
     this.calculate(); 
     this.operation = function(a, b) { 
      return a + b; 
     }; 
     this.setCurrent(0, ""); 
     this.fractionExp = 0; // decimal fix 
    }, 
    subtract: function() { 
     this.calculate(); 
     this.operation = function(a, b) { 
      return a - b; 
     }; 
     this.setCurrent(0, ""); 
     this.fractionExp = 0; // decimal fix 
    }, 
    multiply: function() { 
     this.calculate(); 
     this.operation = function(a, b) { 
      return a * b; 
     }; 
     this.setCurrent(0, ""); 
     this.fractionExp = 0; // decimal fix 
    }, 
    divide: function() { 
     this.calculate(); 
     this.operation = function(a, b) { 
      return a/b; 
     }; 
     this.setCurrent(0, ""); 
     this.fractionExp = 0; // decimal fix 
    }, 
    clear: function() { 
     this.setCurrent(0, ""); 
     this.fractionExp = 0; // decimal fix 
    }, 
    allClear: function() { 
     this.clear(); 
     this.total = 0; 
     this.operation = null; 
     console.log("total: " + this.total); 
     this.fractionExp = 0; // decimal fix 
    }, 
    calculate: function() { 
     if (this.operation) { 
      this.total = this.operation(this.total, this.current); 
     } else { 
      this.total = this.current; 
     } 
     console.log("total: " + this.total); 
    }, 
    equals: function() { 
     this.calculate(); 
     this.updateDisplay(this.total); 
    }, 
    digit: function(number) { 
     // shift current left, add number  
     // this is the key the decimal point 
     if (this.fractionExp) { 
      // not corrent but close 
      this.setCurrent(this.current + (number/Math.pow(10, this.fractionExp))); 
      this.fractionExp = this.fractionExp + 1 
     } else {    
      this.setCurrent((this.current * 10) + number); 
     }; 

    }, 
    point: function() { 
     this.fractionExp = 1; 
    }, 
    setCurrent: function(value, text) { 
     this.current = value; 
     this.updateDisplay(typeof text == "undefined" ? this.current : text); 
     console.log("current: " + this.current); 
    }, 
    updateDisplay: function(value) { 
     $("#display").text(value); 
    } 
}; 
var calc = new Calculator(); 
$("li").click(function() { 
    var raw = $(this).text() 
    number = parseInt(raw, 10); 
    if (isNaN(number)) { 
     // must be an operator 
     switch (raw) { 
     case "C": 
      calc.clear(); 
      break; 
     case "AC": 
      calc.allClear(); 
      break; 
     case "x": 
      calc.multiply(); 
      break; 
     case "/": 
      calc.divide(); 
      break; 
     case "+": 
      calc.add(); 
      break; 
     case "-": 
      calc.subtract(); 
      break; 
     case "=": 
      calc.equals(); 
      break; 
     case ".": 
      calc.point(); 
      break; 
     } 
    } else { 
     // its a digit 
     calc.digit(number); 
    } 
}); 

https://jsfiddle.net/wyspa6m9

enter image description here

+0

Большое спасибо за ваш ответ. Но это не совсем то, что я ищу. – Norfeldt

+0

ok..welcome ..Вы не можете настроить это? –

+0

Ну, я больше искал что-то, где вы можете построить уравнение визуально (следовательно, WYSIWYG), а затем получить фрагмент кода, который вы можете скопировать в свой проект. Извините, если я был неясен. Я ценю вашу помощь! – Norfeldt

1

Поскольку редактора для построения математических функций, как вы просили, я хотел бы дать попробовать на «создать функцию JavaScript» часть ,

Мой подход состоял в том, чтобы попытаться обнаружить любые математические функции, математические константы или переменные с регулярным выражением и заменить их соответствующими азартными вызовами. Это предполагает, что у вас есть математическое выражение, подобное тому, которое задается в вопросе изображения 2 * \pi * r.

var mathExpression = $(this).text(); 
var variables = []; 

function handleElement(match){ 

    if (match == '\\pi') return "Math.PI"; 

    // Doesn't match any constant/function --> is a variable 
    if (variables.indexOf(match) < 0){ 
     variables.push(match);  
    } 

    return match; 
}; 

var jsExpression = mathExpression.replace(/[^\d\s.+\-*^()]+/g,handleElement); 

var result = "var y = function("; 
result += variables.join(', '); 
result += "){ "; 
result += "return "; 
result += jsExpression 
result += "; }"; 

console.log(result); 

Конечно, это только примерное решение, и оно никоим образом не является полным. В зависимости от сложности функций, которые вы хотите сгенерировать, может быть очень сложно (если не невозможно) проанализировать все выражения с таким подходом. Возьмем, например, выражение, подобное a^2. Вы можете ожидать, что это будет проанализировано до Math.pow(a,2). Хотя было бы легко сделать это, когда оба параметра являются одним термином, что-то вроде этого (2+x)^((2 + x) * 3) будет сложно разобрать, так как вам придется балансировать круглые скобки, чтобы решить, что входит в функцию Math.pow.

Вы можете увидеть рабочий jsfiddle с еще несколькими реализованными функциями. here.

+0

Надеюсь, что там уже что-то есть, но ваш код меня в правильном направлении. Я думаю, что использование построения уравнения LaTeX и преобразование его в строку, которая может быть оценена [MathJS] (http://mathjs.org/), будет одним из способов. – Norfeldt

+0

@Norfeldt Если это не сработает, возможно, было бы проще (для сложных выражений) разбираться с MathML, так как, вероятно, есть плагины для навигации по своей xml-подобной структуре. –