إن جعل الكائنات تتحرك وفقًا لبرنامج محدد مسبقًا مثل المثلث الدوار يكون مفيدًا للحصول على
بعض الاهتمام، ولكن ماذا لو كنت تريد أن يتفاعل المستخدمون مع رسومات OpenGL ES؟
إنّ مفتاح جعل تطبيق OpenGL ES تفاعليًا هو من خلال توسيع تنفيذ
GLSurfaceView
بحيث يتم تجاهل
onTouchEvent()
للاستماع إلى أحداث اللمس.
يوضّح هذا الدرس كيفية الاستماع إلى أحداث اللمس للسماح للمستخدمين بتدوير عنصر OpenGL ES.
إعداد أداة معالجة باللمس
لكي يستجيب تطبيق OpenGL ES لأحداث اللمس، يجب تنفيذ طريقة
onTouchEvent()
في
فئة GLSurfaceView
. يوضِّح مثال التنفيذ أدناه كيفية رصد
أحداث MotionEvent.ACTION_MOVE
وترجمتها إلى
زاوية دوران للشكل.
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; }
بعد حساب زاوية الدوران، تستدعي هذه الطريقة
requestRender()
لإبلاغ العارض
بالوقت المناسب لعرض الإطار. هذا النهج هو الأكثر فعالية في هذا المثال لأن
الإطار لا يحتاج إلى إعادة رسم ما لم يكن هناك تغيير في التدوير. ولن يكون لذلك أي تأثير في الكفاءة ما لم تطلب أيضًا إعادة رسم العارض فقط عند
تغيير البيانات باستخدام طريقة setRenderMode()
، لذا تأكَّد من عدم إضافة تعليق على هذا السطر في العارض:
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); }
اكشف زاوية الدوران
يتطلب رمز المثال أعلاه إظهار زاوية التدوير من خلال العارض عن طريق إضافة عنصر علني. بما أنّ رمز العارض يعمل على سلسلة تعليمات منفصلة عن سلسلة تعليمات واجهة المستخدم الرئيسية في تطبيقك، يجب تعريف هذا المتغيّر العلني بأنّه volatile
.
فيما يلي التعليمة البرمجية لتعريف المتغير وعرض زوج getter وsetter:
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; } }
تطبيق التدوير
لتطبيق التدوير الذي يتم إنشاؤه بواسطة الإدخال باللمس، علِّق الرمز الذي ينشئ زاوية وأضِف متغيّرًا يتضمّن الزاوية التي تم إنشاؤها باللمس:
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); }
عند الانتهاء من الخطوات الموضحة أعلاه، قم بتشغيل البرنامج واسحب إصبعك فوق الشاشة لتدوير المثلث: