2014-04-07 17 views
7

Tôi muốn cắt hình ảnh trong ứng dụng của mình. Tôi đã thử rất nhiều nhưng không thành công. Thách thức đối với nhà phát triển Android. Có ý tưởng hay tham chiếu nào để triển khai các tính năng di chuyển, chia tỷ lệ và cắt hình ảnh trong android như ảnh hồ sơ tải lên facebook. Bây giờ tôi có thể di chuyển, mở rộng quy mô và cắt và hình ảnh.Nhưng không nhất quán như facebook.I muốn thiết lập quy mô hình ảnh cố định dựa trên hướng.I gắn màn hình shot-3.di chuyển, chia tỷ lệ và cắt hình ảnh trong android như ảnh hồ sơ facebook

Mã của tôi như sau: -

crop_image.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center" 
    android:orientation="vertical" > 

    <FrameLayout 
     android:id="@+id/flCrop" 
     android:layout_width="fill_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" > 

     <ImageView 
      android:id="@+id/img" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:scaleType="matrix" 
      android:src="@drawable/nature" /> 

     <ImageView 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:layout_gravity="center" 
      android:scaleType="fitXY" 
      android:src="@drawable/blur_with_frame" 
      android:visibility="visible" /> 

     <ImageView 
      android:id="@+id/troll_face" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginBottom="5dp" 
      android:layout_marginLeft="10dp" 
      android:layout_gravity="bottom" /> 
    </FrameLayout> 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:gravity="center" 
     android:orientation="horizontal" > 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:onClick="btnSelectPic" 
      android:layout_marginRight="10dp" 
      android:text="select Pic" /> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="10dp" 
      android:onClick="btnCrop" 
      android:text="Crop" /> 
    </LinearLayout> 

</LinearLayout> 

MainActivity.java

package com.hotveryspicy.maskimage; 

import android.app.Activity; 
import android.content.Intent; 
import android.graphics.Bitmap; 
import android.graphics.BitmapFactory; 
import android.graphics.Matrix; 
import android.graphics.PointF; 
import android.net.Uri; 
import android.os.Bundle; 
import android.util.FloatMath; 
import android.util.Log; 
import android.view.MotionEvent; 
import android.view.View; 
import android.view.View.OnTouchListener; 
import android.view.ViewTreeObserver.OnGlobalLayoutListener; 
import android.widget.FrameLayout; 
import android.widget.ImageView; 
import android.widget.ImageView.ScaleType; 

import com.ipaulpro.afilechooser.utils.FileUtils; 

public class MainActivity extends Activity implements OnTouchListener{ 
    ImageView img; 
    FrameLayout flCrop; 

    int framWidth = 0; 
    int framHeight = 0; 

    int imageHeight ; 
    int imageWidth ; 

    int cropImageWidth = 320; 
    int cropImageHeight = 263; 

    public static int SELECT_PHOTO =0; 

    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.crop_image); 
     img = (ImageView) findViewById(R.id.img); 
     flCrop = (FrameLayout) findViewById(R.id.flCrop); 
     img.setOnTouchListener(this); 


    } 

    public void btnCrop(View v) { 
     ImageView troll_face = (ImageView) findViewById(R.id.troll_face); 
     makeMaskImage(troll_face, R.drawable.nature); 
    } 

    public void btnSelectPic(View v){ 
     Intent intent = new Intent(Intent.ACTION_PICK, 
       android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI); 
     startActivityForResult(intent, 0); 
    } 

    @Override 
    protected void onActivityResult(int requestCode, int resultCode, Intent data) { 
     super.onActivityResult(requestCode, resultCode, data); 

     switch (resultCode) { 
     case RESULT_OK: 
      Uri targetUri = data.getData(); 

      final String path = FileUtils.getPath(this, targetUri); 

      BitmapFactory.Options options = new BitmapFactory.Options(); 
      options.inJustDecodeBounds = true; 

      Bitmap bitmap = null; 
      try { 

       bitmap = BitmapFactory 
         .decodeFile(path); 
      } catch (Exception e) { 
       // TODO Auto-generated catch block 
       e.printStackTrace(); 
      } 
      imageHeight = options.outHeight; 
      imageWidth = options.outWidth; 

      img.setOnTouchListener(MainActivity.this); 

      img.setImageBitmap(bitmap); 

      break; 
     } 
    } 

    // Method of creating mask runtime 
    public void makeMaskImage(ImageView mImageView, int mContent) { 

     flCrop.setDrawingCacheEnabled(true); 
     Bitmap bitmap = Bitmap.createBitmap(flCrop.getDrawingCache()); 
     flCrop.setDrawingCacheEnabled(false); 

     Log.e("TEST", "Frame W : " + framWidth + " H : " + framHeight); 
     Log.e("TEST", 
       "Bitmap W : " + bitmap.getWidth() + " H : " 
         + bitmap.getHeight()); 

     Bitmap result = Bitmap.createBitmap(bitmap, (framWidth/2) 
       - (cropImageWidth/2) +1, (framHeight/2) 
       - (cropImageHeight/2), cropImageWidth -2, cropImageHeight); 
     mImageView.setImageBitmap(result); 
     mImageView.setScaleType(ScaleType.CENTER); 
     // mImageView.setBackgroundResource(R.drawable.frame); 
    } 





    @Override 
     public boolean onTouch(View v, MotionEvent event) { 
      // handle touch events here 
      ImageView view = (ImageView) v; 
      switch (event.getAction() & MotionEvent.ACTION_MASK) { 
       case MotionEvent.ACTION_DOWN: 
        savedMatrix.set(matrix); 
        start.set(event.getX(), event.getY()); 
        mode = DRAG; 
        lastEvent = null; 
        break; 
       case MotionEvent.ACTION_POINTER_DOWN: 
        oldDist = spacing(event); 
        if (oldDist > 10f) { 
         savedMatrix.set(matrix); 
         midPoint(mid, event); 
         mode = ZOOM; 
        } 
        lastEvent = new float[4]; 
        lastEvent[0] = event.getX(0); 
        lastEvent[1] = event.getX(1); 
        lastEvent[2] = event.getY(0); 
        lastEvent[3] = event.getY(1); 
        d = rotation(event); 
        Log.e("MainActivity","MainActivity down d = "+d); 
        break; 
       case MotionEvent.ACTION_UP: 
       case MotionEvent.ACTION_POINTER_UP: 
        mode = NONE; 
        lastEvent = null; 
        break; 
       case MotionEvent.ACTION_MOVE: 
        if (mode == DRAG) { 
         matrix.set(savedMatrix); 
         float dx = event.getX() - start.x; 
         float dy = event.getY() - start.y; 
         Log.e("TEST","Dx : "+ dx+" Dy : "+ dy); 
         matrix.postTranslate(dx, dy); 
        } else if (mode == ZOOM) { 
         float newDist = spacing(event); 
         if (newDist > 10f) { 
          matrix.set(savedMatrix); 
          float scale = (newDist/oldDist); 
          matrix.postScale(scale, scale, mid.x, mid.y); 
         } 
         if (lastEvent != null && event.getPointerCount() == 3) { 
          newRot = rotation(event); 
          Log.e("MainActivity","MainActivity move d= "+d); 
          float r = newRot - d; 
          float[] values = new float[9]; 
          matrix.getValues(values); 
          float tx = values[2]; 
          float ty = values[5]; 
          float sx = values[0]; 
          float xc = (view.getWidth()/2) * sx; 
          float yc = (view.getHeight()/2) * sx; 
          matrix.postRotate(r, tx + xc, ty + yc); 
         } 
        } 
        break; 
       default: 
        view.setImageMatrix(matrix); 
        return true; 
      } 
      view.setImageMatrix(matrix); 
      return true; 
     } 

     /** 
     * Determine the space between the first two fingers 
     */ 
     private float spacing(MotionEvent event) { 
      float x = event.getX(0) - event.getX(1); 
      float y = event.getY(0) - event.getY(1); 
      return FloatMath.sqrt(x * x + y * y); 
     } 

     /** 
     * Calculate the mid point of the first two fingers 
     */ 
     private void midPoint(PointF point, MotionEvent event) { 
      float x = event.getX(0) + event.getX(1); 
      float y = event.getY(0) + event.getY(1); 
      point.set(x/2, y/2); 
     } 

     /** 
     * Calculate the degree to be rotated by. 
     * 
     * @param event 
     * @return Degrees 
     */ 
     private float rotation(MotionEvent event) { 
      double delta_x = (event.getX(0) - event.getX(1)); 
      double delta_y = (event.getY(0) - event.getY(1)); 
      double radians = Math.atan2(delta_y, delta_x); 
      return (float) Math.toDegrees(radians); 
     } 
     // these matrices will be used to move and zoom image 
     private static Matrix matrix = new Matrix(); 
     private static Matrix savedMatrix = new Matrix(); 
     // we can be in one of these 3 states 
     private static final int NONE = 0; 
     private static final int DRAG = 1; 
     private static final int ZOOM = 2; 
     private int mode = NONE; 
     // remember some things for zooming 
     private PointF start = new PointF(); 
     private PointF mid = new PointF(); 
     private float oldDist = 1f; 
     private float d = 0f; 
     private float newRot = 0f; 
     private float[] lastEvent = null; 

     boolean flag ; 
} 

Nhìn demo của tôi như sau: -

Ảnh chụp màn hình-1 Screenshot-1

Khi zoom-out nhìn của nó như sau hình ảnh: - Ảnh chụp màn hình-2 Screenshot-2

gì chính xác tôi đang tìm các giải pháp: - Screenshot-3

Screenshot-3

Nếu bất cứ ai có ý tưởng .Xin vui lòng giúp tôi.Thanks trước ...

+0

Im không chắc chắn vấn đề của bạn là chính xác những gì nhưng có lẽ điều này có thể giúp bạn. Tôi đang cố gắng làm điều gì đó tương tự và đấu tranh! http://blog.gunawan.me/2012/03/create-semi-transparent-rounded-border.html – Chris

+0

@Chris, Cảm ơn bạn đã trả lời. Tuyệt vời tutorial.Will kiểm tra xem nó. :) – jagdish

+0

@jagdish này, bạn đã giải quyết được vấn đề của mình chưa? tôi cũng muốn có chức năng tương tự. – Riser

Trả lời

0

Tôi không hiểu đầy đủ những gì bạn đang cố gắng hoàn thành. Tôi đã làm việc trên một cái gì đó tương tự, tôi nghĩ rằng.


https://github.com/crystalpal/cropper


Điều này không: Đọc một hình ảnh từ lưu trữ, hiển thị nó cùng với một hình chữ nhật cắt xén, bạn hãy cắt những vùng đã chọn, và lưu ảnh đã được cắt. Bạn có thể điều chỉnh kích thước của hình cắt và kích thước của hình ảnh đã lưu.

Sử dụng ý định, chuyển tệp của hình ảnh sang hoạt động mới. Từ đó, mọi thứ nên được tự động.

Lưu ý: dự án này được viết bằng Android 4.2, mã được ghi lại, nhưng kiến ​​thức tốt về Android được khuyến nghị. Dự án sử dụng thư viện pdf qoppa.

2

Tôi đã có một yêu cầu tương tự. Đã tạo một thành phần cắt xén bằng cách sử dụng thư viện Photoview và Cropper đã sửa đổi. Người dùng có thể chọn hình ảnh từ Bộ sưu tập hoặc chụp ảnh từ Máy ảnh và sau đó cắt hình ảnh bằng cách di chuyển và chia tỷ lệ, tương tự như cắt xén ảnh tiểu sử trên Facebook. Chia sẻ dự án trên github.

Vui lòng kiểm tra dự án github đây: https://github.com/ozeetee/AndroidImageZoomCrop

+0

cảm ơn bạn cho thư viện nó hoạt động như quyến rũ trong hình vuông cắt xén tuy nhiên tôi đã cố gắng làm xén hình chữ nhật nhưng photoview là bỏ qua các giới hạn hình ảnh –

Các vấn đề liên quan