Hiệu ứng hình ảnh với xoay và chụm để thu phóng bằng cách sử dụng GLSurfaceView Android

Question

Tôi đã phát triển một ứng dụng để áp dụng hiệu ứng/xoay/pinch để phóng to chức năng in-out trên hình ảnh. Tôi đã tải xuống ứng dụng demo từ https://github.com/Grishu/ImageEffects.

Nó hoạt động tốt, bây giờ vấn đề của tôi/câu hỏi như sau:

1. Áp dụng nhiều hiệu ứng hình ảnh có giá trị thay đổi tiến bộ (ví dụ đầu tiên áp dụng hiệu ứng ánh sáng và kết quả của việc này được áp dụng hiệu ứng khác nói "tương phản" .)

   - vấn đề: trong hiệu ứng mã luôn áp dụng trên hình ảnh gốc. Vì vậy, thay đổi mã để áp dụng hiệu ứng trên hình ảnh cuối cùng như,

   if(isApplyEffectOnOriginalImage){//call first time only   
       mEffect.apply(mTextures[0], mImageWidth, mImageHeight, mTextures[1]); 
   }else{ 
       mEffect.apply(mTextures[1], mImageWidth, mImageHeight, mTextures[1]); 
   } 
   

   Bây giờ, nếu áp dụng hiệu ứng độ sáng khi thay đổi tiến trình lần đầu tiên hoạt động tốt. Nhưng nếu tôi áp dụng hiệu ứng tương tự hoặc khác (tương phản), bây giờ tôi nghĩ về hiệu ứng thay đổi tiến độ áp dụng trên mTextures [1] và kết quả được đặt trong mTextures [1], vậy có thể tạo mTextures tạm thời [2] để lưu trữ mTextures [ 1] ban đầu và khi người dùng thay đổi giá trị tiến độ, áp dụng hiệu ứng trên mTextures [2] và đặt kết quả trên mTextures [1] như xảy ra trong điều kiện.

2. Làm thế nào để áp dụng pinch để phóng to hình ảnh

3. vấn đề

   Rotation: Tôi đã quay hình ảnh ở 90 góc chiều kim đồng hồ, chỉ bằng cách thiết lập giá trị (90.180.270, vv), nhưng vấn đề là khi quay hình ảnh từ 90 đến 180, hiển thị hình ảnh không đúng. thấy

A) hình ảnh 0 góc

B) ảnh 90 góc

C) hình ảnh 180 góc

Answer 1

Tôi đã sửa đổi dự án Grishu demo: here's a Screen Recording, sau đó một số giải thích:

(hình ảnh xoay, với ba tác dụng áp dụng - lật ngang, crossprocess, fisheye)

1) Để áp dụng hiệu ứng trên kết quả, đề xuất của bạn hoạt động tốt. Tôi không thực sự hiểu ý bạn là gì, hiệu ứng thay đổi tiến độ ''. Bạn có muốn điều chỉnh các thông số của hiệu ứng không?

2) Để có cử chỉ, bạn nên mở rộng GLSurfaceView và triển khai GestureDetector.OnGestureListener và/hoặc ScaleGestureDetector.OnScaleGestureListener tùy theo nhu cầu của bạn. Xem TouchGLView đây: Source, hoặc đoạn mã dưới đây:

private class TouchGLView extends GLSurfaceView 
     implements GestureDetector.OnGestureListener, 
     ScaleGestureDetector.OnScaleGestureListener { 
    private TextureRenderer mRenderer; 
    private GestureDetector mTapDetector; 
    private ScaleGestureDetector mScaleDetector; 
    private float mLastSpan = 0; 

    TouchGLView(Context c) { 
     super(c); 
     // Use Android's built-in gesture detectors to detect 
     // which touch event the user is doing. 
     mTapDetector = new GestureDetector(c, this); 
     mTapDetector.setIsLongpressEnabled(false); 
     mScaleDetector = new ScaleGestureDetector(c, this); 

     // Create an OpenGL ES 2.0 context. 
     setEGLContextClientVersion(2); 
     mRenderer = new TextureRenderer(c); 
     setRenderer(mRenderer); 
    } 
    @Override 
    public boolean onTouchEvent(final MotionEvent e) { 
     // Forward touch events to the gesture detectors. 
     mScaleDetector.onTouchEvent(e); 
     mTapDetector.onTouchEvent(e); 
     return true; 
    } 
    @Override 
    public boolean onScroll(MotionEvent e1, MotionEvent e2, 
          final float dx, final float dy) { 
     // Forward the drag event to the renderer. 
     queueEvent(new Runnable() { 
      public void run() { 
       mRenderer.drag(dx, dy); 
      }}); 
     return true; 
    } 
    @Override 
    public boolean onScale(ScaleGestureDetector detector) { 
     // Forward the scale event to the renderer. 
     final float amount = detector.getCurrentSpan() - mLastSpan; 
     queueEvent(new Runnable() { 
      public void run() { 
       mRenderer.zoom(amount); 
      }}); 
     mLastSpan = detector.getCurrentSpan(); 
     return true; 
    } 
    ... 
} 

3) Bạn có thể xoay hình ảnh bằng cách sửa đổi đỉnh phối và tham viewports vào tài khoản. Ngoài ra, bạn có thể áp dụng các chuyển đổi khác nhau. Bạn có thể xoay (và thu phóng) chế độ xem (tọa độ đỉnh) chính nó (không ảnh hưởng đến bộ đệm kết cấu ban đầu) hoặc bạn có thể xoay pixel trong bộ đệm kết cấu (dễ dàng cho 90 °, 180 °, v.v ...) cập nhật tọa độ đỉnh của bạn để phù hợp với chiều rộng/chiều cao hình ảnh mới.

Dưới đây là một ví dụ cho các thao tác với coords đỉnh:

private void computeOutputVertices() { 
    if (mPosVertices != null) { 
     float imgAspectRatio = mTexWidth/(float)mTexHeight; 
     float viewAspectRatio = mViewWidth/(float)mViewHeight; 
     float x0, y0, x1, y1; 
     // Set initial vertex coords based in texture aspect 
     if (imgAspectRatio > 1.0f) { 
      x0 = -1.0f ; 
      y0 = -1.0f/imgAspectRatio; 
      x1 = 1.0f ; 
      y1 = 1.0f/imgAspectRatio; 
     } else { 
      x0 = -1.0f *imgAspectRatio; 
      y0 = -1.0f; 
      x1 = 1.0f *imgAspectRatio; 
      y1 = 1.0f; 
     } 
     float[] coords = new float[] { x0, y0, x1, y0, x0, y1, x1, y1 }; 
     // Scale coordinates with mZoom 
     for (int i = 0; i < 8; i++) { 
      coords[i] *= mZoom; 
     } 
     // Rotate coordinates with mRot 
     float cosa = (float)Math.cos(mRot); 
     float sina = (float)Math.sin(mRot); 
     float x,y; 
     for (int i = 0; i < 8; i+=2) { 
      x = coords[i]; y = coords[i+1]; 
      coords[i] = cosa*x-sina*y; 
      coords[i+1] = sina*x+cosa*y; 
     } 
     // Finally scale again to match screen aspect 
     if (viewAspectRatio > 1.0f) { 
      for (int i = 0; i < 8; i+=2) { 
       coords[i] = coords[i]/viewAspectRatio; 
      } 
     } else { 
      for (int i = 1; i < 8; i+=2) { 
       coords[i] = coords[i]*viewAspectRatio; 
      } 
     } 
     mPosVertices.put(coords).position(0); 
    } 
} 

tôi đề nghị bạn để đi sâu vào ma trận OpenGL và làm tất cả những biến đổi sử dụng chúng.

Tôi đã sửa đổi TextureRenderer lớp để triển khai GLSurfaceView.Renderer và thay đổi renderMode thành RENDERMODE_CONTINUOUSLY.

Cuối cùng, source for the modified demo is here.