AndroidのカスタムコントロールはQQをまねて編集して、円形の顔写真を選択します。

9248 ワード

Androidは皆、ユーザーが顔写真をアップロードする必要があります。四角形を選ぶものもあれば、丸い長方形もあります。丸い形もあります。
まず、画像を処理するためのカスタムコントロールを行い、入力された画像をユーザーの選択領域を経て、一定の形に処理します。
あるアプリは、画像に長方形の領域を描くことによって選択された内容を表し、あるものはダブルフィンガーで拡大縮小し、ピクチャーをドラッグして画像を選択します。丸い顔の写真は、やはり写真を変えたほうがいいです。

円形領域はサイズを調節できます。
このカスタムViewの画像部分は三つに分けられています。背景画像、半透明の蒙古層、明るい色の領域…それとも直接コードを貼ったらいいですか?

package com.example.jjj.widget;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

public class RoundEditImageView extends View {
 private Bitmap bitmap;
 RectF clipBounds, dst, src;
 Paint clearPaint;

 //     
 private int w, h;
 //     
 private float radius = 150f;

 //        
 private RectF circleBounds;

 //       
 private float max_scale = 2.0f;

 //      
 private float distance;
 private float x0, y0;
 private boolean doublePoint;

 public RoundEditImageView(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  init();
 }

 public RoundEditImageView(Context context, AttributeSet attrs) {
  super(context, attrs);
  init();
 }

 public RoundEditImageView(Context context) {
  super(context);
  init();
 }

 private void init() {
  clearPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  clearPaint.setColor(Color.GRAY);
  clearPaint.setXfermode(new PorterDuffXfermode(Mode.CLEAR));
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  if (bitmap != null) {
   canvas.drawBitmap(bitmap, null, dst, null);//  invalidate    dst         
  }
  //     ,        bitmap
  int count = canvas.saveLayer(clipBounds, null, Canvas.ALL_SAVE_FLAG);
  canvas.drawColor(0x80000000);
  canvas.drawCircle(w / 2, h / 2, radius, clearPaint);//        ,       
  canvas.restoreToCount(count);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 }

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  this.w = w;
  this.h = h;
  //   view     
  clipBounds = new RectF(0, 0, w, h);
  float l, r, t, b;
  if (bitmap != null) {
   //      ,          , fitCenter        
   if (w / (float) h > bitmap.getWidth() / (float) bitmap.getHeight()) {
    //     
    float w_ = h * bitmap.getWidth() / (float) bitmap.getHeight();
    l = w / 2f - w_ / 2f;
    r = w / 2f + w_ / 2f;
    t = 0;
    b = h;
   } else {
    //     ,  view   
    float h_ = w * bitmap.getHeight() / (float) bitmap.getWidth();
    l = 0;
    r = w;
    t = h / 2f - h_ / 2f;
    b = h / 2f + h_ / 2f;
   }
   dst = new RectF(l, t, r, b);//         
   src = new RectF(l, t, r, b);//               

   max_scale = Math.max(max_scale, bitmap.getWidth() / src.width());
  }
  circleBounds = new RectF(w / 2 - radius, h / 2 - radius, w / 2 + radius, h / 2 + radius);
 }

 public void setImageBitmap(Bitmap bitmap) {
  this.bitmap = bitmap;
  invalidate();
 }

 @Override
 public boolean dispatchTouchEvent(MotionEvent e) {
  if (e.getPointerCount() > 2) {//           
   return false;
  } else if (e.getPointerCount() == 2) {
   doublePoint = true;//    ,         ,           
   handleDoubleMove(e);
  } else {
   //        
   switch (e.getAction()) {
   case MotionEvent.ACTION_DOWN:
    x0 = e.getX();
    y0 = e.getY();
    break;
   case MotionEvent.ACTION_MOVE:
    if (doublePoint) {
     break;
    }
    float x = e.getX();
    float y = e.getY();
    float w = dst.width();
    float h = dst.height();

    //          ,          
    dst.left += x - x0;
    if (dst.left > circleBounds.left) {
     dst.left = circleBounds.left;
    } else if (dst.left < circleBounds.right - w) {
     dst.left = circleBounds.right - w;
    }
    dst.right = dst.left + w;

    //          ,          
    dst.top += y - y0;
    if (dst.top > circleBounds.top) {
     dst.top = circleBounds.top;
    } else if (dst.top < circleBounds.bottom - h) {
     dst.top = circleBounds.bottom - h;
    }
    dst.bottom = dst.top + h;

    x0 = x;
    y0 = y;
    invalidate();
    break;
   case MotionEvent.ACTION_UP:
    doublePoint = false;//      
    break;
   }
  }

  return true;
 }

 //       
 private void handleDoubleMove(MotionEvent e) {
  switch (e.getAction() & MotionEvent.ACTION_MASK) {
  case MotionEvent.ACTION_POINTER_DOWN:
   distance = sqrt(e);
   Log.d("px", "down:distance=" + distance);
   break;
  case MotionEvent.ACTION_MOVE:
   scale(e);
   break;
  case MotionEvent.ACTION_UP:
   break;
  default:
   break;
  }
 }

 private void scale(MotionEvent e) {
  float dis = sqrt(e);
  //               
  float pX = e.getX(0) / 2f + e.getX(1) / 2f;
  float pY = e.getY(0) / 2f + e.getY(1) / 2f;
  float scale = dis / distance;
  Log.d("px", "move:distance=" + dis + ",scale to" + scale);
  float w = dst.width();
  float h = dst.height();

  if (w * scale < radius * 2 || h * scale < radius * 2 || w * scale > src.width() * max_scale) {
   //           ,       
   return;
  }
  //  dst    scale 
  dst.left = (dst.left - pX) * scale + pX;
  dst.right = (dst.right - pX) * scale + pX;
  dst.top = (dst.top - pY) * scale + pY;
  dst.bottom = (dst.bottom - pY) * scale + pY;

  //               
  if (dst.left > circleBounds.left) {
   dst.left = circleBounds.left;
   dst.right = dst.left + w * scale;
  } else if (dst.right < circleBounds.right) {
   dst.right = circleBounds.right;
   dst.left = dst.right - w * scale;
  }

  if (dst.top > circleBounds.top) {
   dst.top = circleBounds.top;
   dst.bottom = dst.top + h * scale;
  } else if (dst.bottom < circleBounds.bottom) {
   dst.bottom = circleBounds.bottom;
   dst.top = dst.bottom - h * scale;
  }
  invalidate();

  distance = dis;
 }

 private float sqrt(MotionEvent e) {
  return (float) Math.sqrt((e.getX(0) - e.getX(1)) * (e.getX(0) - e.getX(1)) + (e.getY(0) - e.getY(1)) * (e.getY(0) - e.getY(1)));
 }

 //              bitmap
 public Bitmap extractBitmap(int width) {
  Bitmap outBitmap = Bitmap.createBitmap(width, width, Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(outBitmap);
  Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
  p.setColor(Color.GRAY);
  canvas.drawCircle(width / 2, width / 2, width / 2, p);
  float scale = dst.width() / bitmap.getWidth();
  int w = (int) (circleBounds.width() / scale);
  int l = (int) ((circleBounds.left - dst.left) / scale);
  int r = l + w;
  int t = (int) ((circleBounds.top - dst.top) / scale);
  int b = t + w;
  Rect resRect = new Rect(l, t, r, b);
  Paint paint = new Paint();
  paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
  canvas.drawBitmap(bitmap, resRect, canvas.getClipBounds(), paint);
  return outBitmap;
 }
}

Activityでの使用法

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_select_header);
  RoundEditImageView imageView = (RoundEditImageView) findViewById(R.id.roundEditImageView1);
  bitmap = BitmapFactory.decodeFile(imagePath);
  imageView.setImageBitmap(bitmap);
 }

 @Override
 public void onClick(View v) {
   //    300*300          
   Bitmap result = imageView.extractBitmap(300);
   //   png
   FileOutputStream out = new FileOutputStream(new File(filePath));
   result.compress(Bitmap.CompressFormat.PNG, 100, out);
   //     
   ...
 }

需要はQQを模倣するので、私はあまり説明ができなくて、して遊んでいます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。