一起学opengl android 贝赛尔曲线

贝塞尔曲线

弄了个贝赛尔曲线，更加坚定了我的美感不行，形容贝塞尔曲线都说的是曲线之美，咋我画出来就那么蛋疼呢。

在这里我用了一个动画来显示贝塞尔曲线，但是没有做循环显示，有兴趣的自己试罗。

public class Utils { public static IntBuffer getIntBuffByArray(int[] temp){ ByteBuffer vbb = ByteBuffer.allocateDirect(temp.length * 4); vbb.order(ByteOrder.nativeOrder()); IntBuffer mVerBuffer = vbb.asIntBuffer(); mVerBuffer.put(temp); mVerBuffer.position(0); return mVerBuffer; } public static FloatBuffer getFloatBuffByArray(float[] temp){ ByteBuffer vbb = ByteBuffer.allocateDirect(temp.length * 4); vbb.order(ByteOrder.nativeOrder()); FloatBuffer mVerBuffer = vbb.asFloatBuffer(); mVerBuffer.put(temp); mVerBuffer.position(0); return mVerBuffer; } public static ByteBuffer getByteBuffByArray(byte[] temp){ ByteBuffer vbb = ByteBuffer.allocateDirect(temp.length); // vbb.order(ByteOrder.nativeOrder()); // IntBuffer mVerBuffer = vbb.asIntBuffer(); vbb.put(temp); vbb.position(0); return vbb; } }
因为用这个平台字节转换的比较多，所以直接放在一个帮助类里面了，这个就没啥好说的

主要是public class Bezier extends GLSurfaceView implements Renderer这个类，我是绘制的三次贝赛尔曲线公式，其对应公式如下，具体推导那就各自找自己高中老师去了，反正我是看了半天才摸索清楚的
x(t) = (1-t)^3x0 + 3t(1-t)^2x1 + 3t^2(1-t)x2 + t^3x3
y(t) = (1-t)^3y0 + 3t(1-t)^2y1 + 3t^2(1-t)y2 + t^3y3

在这里既然用到了立方和乘我就直接定义了

//向量相加 private Point Add(Point temp, Point temp1){ Point mPointNew = new Point(); mPointNew.x = temp.x + temp1.x; mPointNew.y = temp.y + temp1.y; return mPointNew; } //向量相乘 private Point Multiply(float temp,float temp1, float var){ Point mPointNew = new Point(); mPointNew.x = temp * var; mPointNew.y = temp1 * var; return mPointNew; } 专门用来运算。然后就是套路的onSurface...onDrawFrame就不说了。

主要就是实现了一下上面的公式，具体如下

a[0] = Multiply(bezierArray[0],bezierArray[1],(float)Math.pow((1-interpolation), 3)); a[1] = Multiply(bezierArray[2],bezierArray[3],(float)Math.pow((1-interpolation), 2) * 3 * interpolation); a[2] = Multiply(bezierArray[4],bezierArray[5],(float)Math.pow(interpolation, 2) * 3 * (1-interpolation)); a[3] = Multiply(bezierArray[6],bezierArray[7],(float)Math.pow(interpolation, 3)); mPointNew[2*i] = Add(Add(a[0],a[1]),Add(a[2],a[3])).x; mPointNew[2*i+1] = Add(Add(a[0],a[1]),Add(a[2],a[3])).y; mVertextBuff = Utils.getFloatBuffByArray(mPointNew); gl.glVertexPointer(2, GL10.GL_FLOAT, 0, mVertextBuff); gl.glLineWidth(5.0f); gl.glDrawArrays(GL10.GL_LINE_STRIP ,0, i+1);

其实主要的就这些了，我主要是看了网上讲贝塞尔曲线的那个gif动画挺好看的，所以我就依葫芦画瓢的把过渡的几条线也绘制上去了

//过渡用的两条线 gl.glColor4x(0, 1, 1, 1); a[0] = Add(Multiply(bezierArray[0],bezierArray[1],1-interpolation),Multiply(bezierArray[2],bezierArray[3],interpolation)); mTransition[0] = a[0].x; mTransition[1] = a[0].y; a[0] = Add(Multiply(bezierArray[2],bezierArray[3],1-interpolation),Multiply(bezierArray[4],bezierArray[5],interpolation)); mTransition[2] = a[0].x; mTransition[3] = a[0].y; a[0] = Add(Multiply(bezierArray[4],bezierArray[5],1-interpolation),Multiply(bezierArray[6],bezierArray[7],interpolation)); mTransition[4] = a[0].x; mTransition[5] = a[0].y; gl.glVertexPointer(2, GL10.GL_FLOAT, 0, Utils.getFloatBuffByArray(mTransition)); gl.glLineWidth(3.0f); gl.glDrawArrays(GL10.GL_LINE_STRIP ,0, 3); //实际取的是该线上的点 gl.glColor4x(0, 1, 1, 1); a[0] = Add(Multiply(mTransition[0],mTransition[1],1-interpolation),Multiply(mTransition[2],mTransition[3],interpolation)); a[1] = Add(Multiply(mTransition[2],mTransition[3],1-interpolation),Multiply(mTransition[4],mTransition[5],interpolation)); gl.glVertexPointer(2, GL10.GL_FLOAT, 0, Utils.getFloatBuffByArray(new float []{ a[0].x,a[0].y, a[1].x,a[1].y })); gl.glLineWidth(2.0f); gl.glDrawArrays(GL10.GL_LINES ,0, 2);

具体看代码吧

源码地址http://download.csdn.net/detail/lishubing1126/3824354

http://blog.csdn.net/lishubing1126/article/details/6998638