Reagowanie na zdarzenia dotknięcia

Poruszanie się obiektów zgodnie z gotowym programem, takim jak obracający się trójkąt, przydaje się, gdy zwracasz uwagę. A co, jeśli chcesz, aby użytkownicy korzystali z karty graficznej OpenGL ES? Kluczem do zapewnienia interaktywnej interakcji dotykowej aplikacji OpenGL ES jest rozwinięcie implementacji GLSurfaceView w celu zastąpienia interfejsu onTouchEvent() i nasłuchiwania zdarzeń dotyku.

Z tej lekcji dowiesz się, jak wykrywać zdarzenia dotknięcia, by umożliwić użytkownikom obracanie obiektu OpenGL ES.

Skonfiguruj detektor dotyku

Aby aplikacja OpenGL ES mogła reagować na zdarzenia dotyku, musisz wdrożyć w klasie GLSurfaceView metodę onTouchEvent(). W przykładowej implementacji poniżej pokazujemy, jak nasłuchiwać zdarzeń MotionEvent.ACTION_MOVE i przełożyć je na kąt obrotu.

Kotlin

private const val TOUCH_SCALE_FACTOR: Float = 180.0f / 320f
...
private var previousX: Float = 0f
private var previousY: Float = 0f

override fun onTouchEvent(e: MotionEvent): Boolean {
    // MotionEvent reports input details from the touch screen
    // and other input controls. In this case, you are only
    // interested in events where the touch position changed.

    val x: Float = e.x
    val y: Float = e.y

    when (e.action) {
        MotionEvent.ACTION_MOVE -> {

            var dx: Float = x - previousX
            var dy: Float = y - previousY

            // reverse direction of rotation above the mid-line
            if (y > height / 2) {
                dx *= -1
            }

            // reverse direction of rotation to left of the mid-line
            if (x < width / 2) {
                dy *= -1
            }

            renderer.angle += (dx + dy) * TOUCH_SCALE_FACTOR
            requestRender()
        }
    }

    previousX = x
    previousY = y
    return true
}

Java

private final float TOUCH_SCALE_FACTOR = 180.0f / 320;
private float previousX;
private float previousY;

@Override
public boolean onTouchEvent(MotionEvent e) {
    // MotionEvent reports input details from the touch screen
    // and other input controls. In this case, you are only
    // interested in events where the touch position changed.

    float x = e.getX();
    float y = e.getY();

    switch (e.getAction()) {
        case MotionEvent.ACTION_MOVE:

            float dx = x - previousX;
            float dy = y - previousY;

            // reverse direction of rotation above the mid-line
            if (y > getHeight() / 2) {
              dx = dx * -1 ;
            }

            // reverse direction of rotation to left of the mid-line
            if (x < getWidth() / 2) {
              dy = dy * -1 ;
            }

            renderer.setAngle(
                    renderer.getAngle() +
                    ((dx + dy) * TOUCH_SCALE_FACTOR));
            requestRender();
    }

    previousX = x;
    previousY = y;
    return true;
}

Zwróć uwagę, że po obliczeniu kąta obrotu ta metoda wywołuje metodę requestRender(), aby poinformować mechanizm renderujący, że nadszedł czas na wyrenderowanie klatki. To podejście jest najskuteczniejsze w tym przykładzie, ponieważ nie trzeba ponownie narysować ramki, chyba że w rotacji nastąpi zmiana. Nie ma to jednak żadnego wpływu na wydajność, chyba że za pomocą metody setRenderMode() zażądasz, by mechanizm renderowania ponownie przetworzył dane tylko wtedy, gdy dane się zmienią. Dopilnuj więc, aby ten wiersz nie został skomentowany w mechanizmie renderowania:

Kotlin

class MyGlSurfaceView(context: Context) : GLSurfaceView(context) {

    init {
        // Render the view only when there is a change in the drawing data
        renderMode = GLSurfaceView.RENDERMODE_WHEN_DIRTY
    }
}

Java

public MyGLSurfaceView(Context context) {
    ...
    // Render the view only when there is a change in the drawing data
    setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
}

Pokaż kąt obrotu

Przykładowy kod powyżej wymaga, aby kąt obrotu został ujawniony przez mechanizm renderowania przez dodanie użytkownika publicznego. Kod mechanizmu renderowania działa w innym wątku niż główny wątek interfejsu użytkownika Twojej aplikacji, dlatego musisz zadeklarować tę zmienną publiczną jako volatile. Oto kod, który zadeklaruje zmienną i udostępni parę pobierających i setterowych:

Kotlin

class MyGLRenderer4 : GLSurfaceView.Renderer {

    @Volatile
    var angle: Float = 0f
}

Java

public class MyGLRenderer implements GLSurfaceView.Renderer {
    ...

    public volatile float mAngle;

    public float getAngle() {
        return mAngle;
    }

    public void setAngle(float angle) {
        mAngle = angle;
    }
}

Zastosuj rotację

Aby zastosować obrót wygenerowany za pomocą dotyku, skomentuj kod generujący kąt i dodaj zmienną zawierającą kąt wygenerowany przez dotyk:

Kotlin

override fun onDrawFrame(gl: GL10) {
    ...
    val scratch = FloatArray(16)

    // Create a rotation for the triangle
    // long time = SystemClock.uptimeMillis() % 4000L;
    // float angle = 0.090f * ((int) time);
    Matrix.setRotateM(rotationMatrix, 0, angle, 0f, 0f, -1.0f)

    // Combine the rotation matrix with the projection and camera view
    // Note that the mvpMatrix factor *must be first* in order
    // for the matrix multiplication product to be correct.
    Matrix.multiplyMM(scratch, 0, mvpMatrix, 0, rotationMatrix, 0)

    // Draw triangle
    triangle.draw(scratch)
}

Java

public void onDrawFrame(GL10 gl) {
    ...
    float[] scratch = new float[16];

    // Create a rotation for the triangle
    // long time = SystemClock.uptimeMillis() % 4000L;
    // float angle = 0.090f * ((int) time);
    Matrix.setRotateM(rotationMatrix, 0, mAngle, 0, 0, -1.0f);

    // Combine the rotation matrix with the projection and camera view
    // Note that the vPMatrix factor *must be first* in order
    // for the matrix multiplication product to be correct.
    Matrix.multiplyMM(scratch, 0, vPMatrix, 0, rotationMatrix, 0);

    // Draw triangle
    mTriangle.draw(scratch);
}

Po wykonaniu czynności opisanych powyżej uruchom program i przeciągnij palcem po ekranie, aby obrócić trójkąt:

Rysunek 1. Obracany trójkąt przy użyciu dotykowego wprowadzania danych (koło pokazuje lokalizację dotknięcia).