如何将字符串转换为数学函数一次？ [英] How to convert String into Math Function just once?

问题描述

到目前为止，我已经取得了成功，因为我已经成功地创建了一个类似于desmos的东西，在那里你可以在一个画布中绘制图形，然后移动它。但是唯一剩下的就是用户输入。

使用< input type =text> 标签我希望用户编写例如：

 5x + 2
  
  
 
 
 $ b 
结果应该是： 
 
 
  var f = 5 * x + 2; 
  
我搜索了很多方法来做到这一点，我发现的唯一的东西是一些数学库JavaScript和 eval（）函数。最后一个是非常有用的，因为我可以用图中的 x 值替换 x ，它可以工作构建函数的图形。问题是，当我想要移动图形时，它滞后很多，所以它不是最好的想法。
 
 
 
我相信它滞后是因为 eval（）函数必须每次为每个画布的x值转换字符串，每秒约40-50次。
 
 
 
我想要实现的只是将字符串转换为Math函数一次，然后使用它。
 
 
 
可能吗？任何人都可以请帮忙
 
 
 
 编辑1 ：
这是我的功能：
 函数f（pixelX）{
 var x = getCoordX（pixelX）; 
 
 var f = 2 * x + 2; 
 
 return getPixelY（f）; 
 
  
 
 
解决方案
虽然这不会解决你的问题）。
 
 
 
你可以做到这一点。 
 
 
  var myString =5 * x + 2; 
 var f = Function（x，return+ myString）; 
  
这会从<$ $创建函数 C $ C>字符串。第一个参数是第一个参数的名称， x ，第二个参数是函数的主体（ return  statement）; 
 
 
然后你可以这样称呼它：
  f（3）和结果将是 17 。
 
 
 
请注意，您必须在您的等式中写入乘法，如 5 * x 不像 5x 。
 
 
 
这样您只评估字符串然后你可以用不同的参数多次调用它。
 
 
 
你的问题不是 eval 需要很长时间才能计算，但是重新绘制画布非常昂贵。尝试限制draws的数量或者只在 requestAnimationFrame 回调中调用draw函数，这样浏览器只有在准备好时才会重画画布。
 
I want to build something similar to desmos, where you can draw a graph in a canvas and then move it around.

I've been successful so far, but the only thing left is the user input.

Using a <input type="text"> tag I want the user to write for example:
"5x + 2"
The result should be:
var f = 5*x + 2;
I searched a lot for a way to do this and the only things I found were some Maths libraries in JavaScript and the eval() function. The last one is really helpful, because I could replace the x with the x value in the graph and it would work to build the graph of the function. The problem is that it lags a lot when I want to move the graph around so it is not the best idea.

I'm sure that it lags because the eval() function has to convert the string each time for every x value of the canvas for about 40-50 times a second.

What I want to achieve is convert the string into a Math function just once, and then use it.

Is it possible? Can anyone please help

EDIT 1:
This is my function:
function f (pixelX) {
    var x = getCoordX (pixelX);

    var f = 2 * x + 2;

    return getPixelY(f);
}

解决方案
To answer your question (even though this won't solve your problem).

You can do this.
var myString = "5 * x + 2";
var f = Function("x", "return " + myString);
This creates a function from a string. The first argument is the name of the first parameter, x, and the second argument is the body of the function (the return statement);

And then you can call it like: 
f(3) and the result would be 17.

Note that you have to write multiplication in your equation like 5 * x not like 5x.

This way you only evaluate the string into a function once, and then you can call it as many times you want with different parameters.

Your problem is not that eval takes a long time to compute but that re-drawing the canvas is very expensive. Try limiting the number of draws or only calling the draw function inside a requestAnimationFrame callback, this way the browser will redraw the canvas only when it is ready to do it.

                        
这篇关于如何将字符串转换为数学函数一次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！