简体繁体 English

在iOS上绘制的最佳方法

[英]Best way to draw on iOS

原文 2015-09-10 06:19:15 6 1 ios/ ipad/ opengl-es/ quartz-2d

I am making a math drawing app on ipad. 我正在ipad上制作数学绘图应用程序。 Users can manipulate the obejects on the screen like quadratic curve or sin curve. 用户可以操纵屏幕上的对象，例如二次曲线或正弦曲线。 To update all objects on the screen, I need to redraw the whole screen at 60 fps, which costs lots of time. 要更新屏幕上的所有对象，我需要以60 fps的速度重新绘制整个屏幕，这需要花费大量时间。 I currently implement drawing with Quartz2D, but the performance is bad when there are many objects on the screen. 我目前使用Quartz2D实现绘图，但是当屏幕上有许多对象时，性能会很差。 I heard that directly using openGL ES is better, because it use GPU to draw. 我听说直接使用openGL ES更好，因为它使用GPU进行绘制。 But I am wondering how to draw cubic or quadratic curve with openGL ES. 但是我想知道如何使用openGL ES绘制三次曲线或二次曲线。 Or, is there other better choice to improve the drawing? 或者，还有其他更好的选择来改善图纸吗？

1 个解决方案

The openGL should be quite good at doing this but the curves are not just out of the box. openGL应该会很好地做到这一点，但是曲线不仅是开箱即用的。 Assuming you find some sample or create one from the scratch till the point you can draw some shapes there may be quite a few procedures accomplishing this. 假设您找到一些样本或从头开始创建一个样本，直到可以绘制一些形状为止，可能要执行许多步骤。

The most direct one would be to create lines from points with specific resolution. 最直接的方法是从具有特定分辨率的点创建线。 That would mean when having function f(x) simply iterate x through the resolution. 其功能时，这将意味着f(x)简单迭代x通过的决议。 Say you are seeing the curve on interval [a, b] and want a resolution of R intervals that would produce the loop for(float x=a; x<=b; x+=(ba)/R) . 假设您看到间隔[a, b]上的曲线[a, b]并希望得到R间隔的分辨率，该分辨率将产生for(float x=a; x<=b; x+=(ba)/R)的循环。 Now just draw this as a line strip. 现在只需将其绘制为线条即可。 In most cases the resolution can be quite high and you will have a nice result but there are cases where this will not work, the steep functions or some alternating functions will be missing some points. 在大多数情况下，分辨率可能会很高，您会得到不错的结果，但是在某些情况下，此方法将不起作用，陡峭的函数或某些交替函数会丢失一些点。 A problematic kind are for instance sin(x*some_large_factor) . 有问题的种类例如是sin(x*some_large_factor) 。

Using the same procedure it might work better if you could transform the function to be dependent on the curve length instead of the X . 如果可以将函数转换为依赖于曲线长度而不是X ，则使用相同的过程可能会更好。 This procedure would also be able to draw curves such as circles. 此过程也将能够绘制曲线，例如圆形。

Another way is injecting a function into the shader and checking if the point is near enough the function. 另一种方法是将一个功能注入到着色器中，并检查该点是否足够靠近该功能。 You will receive the x and y positions which you may insert into your function and check their distance in a way if(abs(yf(x)) < lineWidth) // do draw . 您将收到可以插入到函数中的x和y位置，并以if(abs(yf(x)) < lineWidth) // do draw的方式检查它们的距离。 This procedure will be totally accurate but the problem is now the line width is defined by Y which will make the steep parts of the curve appear thicker. 此过程将完全准确，但问题在于，线宽由Y定义，这将使曲线的陡峭部分显得更粗。 If you are able to find the true distance to the curve (the nearest point on the curve) this would work perfectly... 如果您能够找到到曲线的真实距离（曲线上的最近点），则可以很好地工作...