1

I want to draw arrows like this:

enter image description here

I've tried use normal vertex & fragment shader like google samples, with 5 points for vertex coords:

static float vertexCoords[] = {
        -0.3f, 0.2f, 0.0f,   // bottom left swing
        0.0f,  0.5f, 0.0f,   // top
        0.0f,  -0.5f, 0.0f,   // bottom
        0.0f,  0.5f, 0.0f,   // back to top again
        0.3f, 0.2f, 0.0f    // bottom right swing
};

enter image description here

Then draw using GL_LINE_STRIP:

int COORDS_PER_VERTEX = 3;
int vertexCount = 364 * 3 / COORDS_PER_VERTEX;
int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex
GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, vertexStride, vertexBuffer);

GLES20.glDrawArrays(GLES20.GL_LINE_STRIP, 0, vertexCount);

I've successfully achieve it, but only fixed arrow.

Now I want to draw this arrow by user's touch: touch down at point A, move to point B, then we must draw an arrow from A to B. If drawing a single line, it will be more easier, but in this case I must draw 2 'arrow swing lines' at point B. Assume that the angle between each 'arrow swing line' to the central line is 45 degrees.

I've think about 2 ways now:

  • Use the fixed vertex coords above, put them to a matrix to rotate & translate base on user touch.

  • Use coordinate of point A and B, and the 45 degree angle to find the coordinate of 2 point at the end of 'arrow swing'.

Update 1:

I'm following the 1st approach, and done recalculate the vertex coordinates using Matrix rotation & translate. But now I face another problem, I need to dynamically change the width / thickness of arrow line. But glLineWidth() is not guarantee to be implemented on all devices.

I'm new to OpenGLES, any one know how to achieve this?

nhoxbypass
  • 9,695
  • 11
  • 48
  • 71
  • So the length of the arrow varies, but the peak should keep its shape? – Rabbid76 Aug 15 '19 at 07:48
  • Yes, @Rabbid76 , the peak only rotate with the center line, but not change size – nhoxbypass Aug 15 '19 at 08:21
  • This are just 4 points, I recommend to recalculate them and to update the buffer. – Rabbid76 Aug 15 '19 at 08:32
  • @Rabbid76 I've done recalculate the vertex coordinates using `Matrix` rotation & translate. But now I face another problem, I need to dynamically change the width of arrow line. But `glLineWidth()` is not guarantee to be implemented on all devices. – nhoxbypass Aug 15 '19 at 10:02
  • 1
    Form the lines by polygons. Draw rectangular shapes (2 triangles) instead of the lines. – Rabbid76 Aug 15 '19 at 10:06
  • @Rabbid76 To form these lines by polygons, I need **4 float numbers** which represent 2 coordinates **for a single line**. Right? So If I need to draw an arrow (3 lines), I need **12 float numbers**? – nhoxbypass Aug 20 '19 at 07:11

0 Answers0