Android：图片的缩放，平移和人脸识别
2017-06-04 本文已影响272人
gsyQAQ
图片的缩放，平移这些需求还是挺常见的，我通过自定义ImageView实现缩放和平移，结合系统提供API实现人脸的识别
- 代码稍微有点多，首先上演示效果：
图片的缩放，平移，人脸识别效果.gif
- 缩放和平移其实也就是调用ImageView的setImageMatrix方法便可完成，通过计算移动的距离(tx，ty)设置Matrix.postTranslate(tx，ty)，两个手指新距离和按下距离的比值scale以按下时两指的中点设置Matrix.postScale(scale，x，y)，再将Matrix设置为ImageView即可
- 人脸识别通过系统提供的FaceDetector便可实现，虽然不是很准确，但是目前也只有能达到这种结果，这个类使用的bitmap有两个要求，第一个是必须使用Bitmap.Config.RGB_565格式加载，第二个是bitmap的宽必须为偶数
下面来看具体代码
首先是人脸识别，识别的结果为一个Face数组，当然所有信息例如眼睛的位置，距离等均包含在Face类中，具体可以查看源码
public class MainActivity extends Activity {
private MyImageView mMyImageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initPhoto();
}
private void initView() {
mMyImageView = (MyImageView) findViewById(R.id.main_image);
}
private void initPhoto() {
String picPath = "/storage/emulated/0/Tencent/QQ_Images/-663c6adb1540c36f.jpg";
Bitmap srcBitmap = BitmapUtils.loadBitmap(picPath, 1000, 1000, true);
if (srcBitmap == null) {
Toast.makeText(getApplicationContext(), "处理图片失败", Toast.LENGTH_SHORT).show();
} else {
// 图片的宽必须为偶数，不然系统无法进行人脸识别
if (srcBitmap.getWidth() % 2 != 0) {
srcBitmap = Bitmap.createBitmap(srcBitmap, 0, 0, srcBitmap.getWidth() - 1
, srcBitmap.getHeight());
}
// 最多的人脸数
int maxCount = 50;
FaceDetector.Face[] faces = new FaceDetector.Face[maxCount];
FaceDetector faceDetector = new FaceDetector(srcBitmap.getWidth(), srcBitmap.getHeight(), maxCount);
// 这一步比较耗时间，大概一秒左右，跟bitmap的大小有关(1000左右最佳，识别结果准确并且时间较少)，建议使用EventBus异步处理
int faceCount = faceDetector.findFaces(srcBitmap, faces);
PointF pointF = new PointF();
// 过滤原本就不完整的脸
for (int i = 0; i < faceCount; i++) {
float eyesDistance = faces[i].eyesDistance();
faces[i].getMidPoint(pointF);
if (pointF.x < eyesDistance // 左边超出
|| pointF.y < eyesDistance * 2f // 上边超出
|| srcBitmap.getWidth() - pointF.x < eyesDistance // 右边超出
|| srcBitmap.getHeight() - pointF.y < eyesDistance * 2f) { // 下边超出
faces[i] = null;
}
}
// 必须设置LayoutParams，这样在自定义ImageView中使用getLayoutParams才能得到正确的params
FrameLayout.LayoutParams photoParams = new FrameLayout.LayoutParams(mMyImageView.getLayoutParams());
photoParams.gravity = Gravity.CENTER;
photoParams.width = 1000;
photoParams.height = 1000;
mMyImageView.setLayoutParams(photoParams);
mMyImageView.setImageBitmap(srcBitmap, faces, 1f);
}
}
}
- 其中的BitmapUtils类为提供根据图片本地路径picPath加载bitmap的方法，具体实现可以通过GitHub上的项目查看
- 这里脸部范围的定义是：以两只眼睛的中点为重心，宽为两倍的眼睛之间的距离，高为4倍的眼睛之间的距离
接下来是自定义的ImageView，也是整个demo的重点
- 这里着重解释一些mIsVerticalFit这个变量，这是根据图片的宽高和ImageView的宽高做FitCenter得到的值，FitCenter的意思就是将图片刚好完整的居中显示在ImageView中，这里边涉及到水平Fit和竖直Fit，这个值便是判断是否为竖直Fit的变量，详细的FitCenter和CenterCrop信息可以自行百度~
@Override
public void setImageDrawable(Drawable drawable) {
mLastX = mLastY = 0;
mIntrinsicWidth = drawable.getIntrinsicWidth();
mIntrinsicHeight = drawable.getIntrinsicHeight();
centerCropImage();
mTempRectF = getMatrixRectF();
// 判断图片的宽高view的宽高FitCenter状态是竖直fit还是水平fit，如果不能理解可以查看IamgeView源码中的CenterCrop
// 和FitCenter这两个属性，其实这里是照搬源码
mIsVerticalFit = mIntrinsicWidth * getLayoutParams().height < getLayoutParams().width * mIntrinsicHeight;
checkFace();
super.setImageDrawable(drawable);
}
- 我们主要来看一下单指和双指移动过程中的代码，�这里设置放大倍数为View宽高的3倍，如果是竖直Fit就以宽来计算，否则以高来计算
- 如果是放大，并且放大倍数已经超过3倍了，便设置mResetScale以供手指放开时恢复放大的极限，缩小同理，最多能缩小到FitCenter，具体该使用宽还是高做判断取决于mIsVerticalFit
case MotionEvent.ACTION_MOVE: {
if (mTouchMode == COUPLE_OPERATION) {
mTempMatrix.set(mSavedMatrix);
float newDist = spacing(ev);
float scale = newDist / mLastDist;
mTempMatrix.postScale(scale, scale, mMidPoint.x, mMidPoint.y);
mDrawMatrix.set(mTempMatrix);
this.setImageMatrix(mDrawMatrix);
// 缩放到极限时设置恢复scale
boolean isOut = mIsVerticalFit
? getMatrixRectF().width() / getLayoutParams().width > THE_MAX_SCALE
: getMatrixRectF().height() / getLayoutParams().height > THE_MAX_SCALE;
if (scale >= 1 && isOut) {
if (mIsVerticalFit) {
// 竖直fit取宽
mResetScale = THE_MAX_SCALE * getLayoutParams().width / getMatrixRectF().width();
} else {
// 水平fit取高
mResetScale = THE_MAX_SCALE * getLayoutParams().height / getMatrixRectF().height();
}
} else if (scale <= 1 && (int) getMatrixRectF().width() <= getLayoutParams().width
&& (int) getMatrixRectF().height() <= getLayoutParams().height) {
// 保证当图片全部缩小在显示范围内便不能再缩小
if (mIsVerticalFit) {
// 竖直取高
mResetScale = getLayoutParams().height / getMatrixRectF().height();
} else {
// 水平取宽
mResetScale = getLayoutParams().width / getMatrixRectF().width();
}
} else {
mResetScale = 0;
}
} else if (mTouchMode == SINGLE_OPERATION) {
mTempMatrix.set(mSavedMatrix);
float tx = ev.getX() - mLastX;
float ty = ev.getY() - mLastY;
mIsMove = true;
RectF rectF = getMatrixRectF();
mIsCheckRAndL = (int) rectF.width() <= getLayoutParams().width;
mIsCheckBAndT = (int) rectF.height() <= getLayoutParams().height;
mTempMatrix.postTranslate(tx, ty);
mDrawMatrix.set(mTempMatrix);
this.setImageMatrix(mDrawMatrix);
}
checkFace();
break;
}
- 当手指抬起来时同时进行边界回弹检查和缩放倍数检查，如果超过缩放极限便根据mResetScale将图片缩放至极限大小，具体代码如下：
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
if (mTouchMode == COUPLE_OPERATION) {
if (mResetScale != 0) {
mTempMatrix.postScale(mResetScale, mResetScale, mMidPoint.x, mMidPoint.y);
mResetScale = 0;
}
mDrawMatrix.set(mTempMatrix);
center(true, true);
this.setImageMatrix(mDrawMatrix);
checkFace();
invalidate();
if (getMatrixRectF().left > 0 || getMatrixRectF().top > 0) {
mTempRectF = getMatrixRectF();
}
} else if (mTouchMode == SINGLE_OPERATION && mIsMove) {
float[] dxDyBounds = checkDxDyBounds();
if (dxDyBounds == null) {
mTempMatrix.postTranslate(0, 0);
mDrawMatrix.set(mTempMatrix);
this.setImageMatrix(mDrawMatrix);
checkFace();
} else {
setAnimation(dxDyBounds);
}
}
mIsMove = false;
mTouchMode = NONE_OPERATION;
break;
- 其中由于系统自带的回弹动画太快，Matrix.postTranslate()方法不可以传递动作时间，因此使用ValueAnimator将移动的操作拆分按传入时间完成，以达到动画效果
/**
* 设置边界回弹的动画
*
* @param bounds 需要回弹的偏移量
*/
private void setAnimation(float[] bounds) {
setEnabled(false);
final float floatDx = bounds[0];
final float floatDy = bounds[1];
ValueAnimator animator = new ValueAnimator();
animator.setInterpolator(new DecelerateInterpolator());
animator.setFloatValues(0, 1);
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
setEnabled(true);
checkFace();
}
});
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
float lastDx = 0;
float lastDy = 0;
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float offsetX = floatDx * animation.getAnimatedFraction() - lastDx;
float offsetY = floatDy * animation.getAnimatedFraction() - lastDy;
lastDx += offsetX;
lastDy += offsetY;
mTempMatrix.postTranslate(offsetX, offsetY);
mDrawMatrix.set(mTempMatrix);
MyImageView.this.setImageMatrix(mDrawMatrix);
}
});
animator.setDuration(BORDER_BACK_DURATION).start();
}
检测移动和缩放过程中是否有人脸超出显示范围，将超出范围的人脸用蓝色方框标注出来
- 根据人脸范围(眼睛中点为重心，宽为两倍眼睛之间的距离，高为四倍)到自定义ImageView边界的距离判断是否超过显示范围，这里的坐标均为相对坐标，即ImageView的左上角即为原点(绝对坐标指的是屏幕左上角为原点)
/**
* 检查是否有人脸超出显示范围
*/
private void checkFace() {
for (int i = 0; i < mFaceCount; i++) {
if (mFaces[i] == null) continue;
mFaces[i].getMidPoint(mPoint);
RectF rectF = new RectF(0, 0, mPoint.x * mAdjustScale, mPoint.y * mAdjustScale);
mDrawMatrix.mapRect(rectF);
float eyesDistance = mFaces[i].eyesDistance() * mAdjustScale * getMatrixRectF().width() / mIntrinsicWidth;
float distanceH = rectF.left + rectF.width();
float distanceV = rectF.top + rectF.height();
mIsNeedDraws[i] = distanceH > getLayoutParams().width - eyesDistance // 右边超出
|| distanceH < eyesDistance // 左边超出
|| distanceV > getLayoutParams().height - eyesDistance * FACE_VERTICAL // 下边超出
|| distanceV < eyesDistance * FACE_VERTICAL; // 上边超出
}
}
- 绘制每个需要绘制的矩形，根据mIsNeedDraws这个数组判断，如果mIsNeedDraws[i]为true证明这个矩形需要绘制，否则continue
@Override
public void onDraw(Canvas canvas) {
final Drawable drawable = getDrawable();
if (drawable != null) {
canvas.save(); // 保存画布，接下来的操作在新的图层绘制
canvas.translate(getPaddingLeft(), getPaddingTop());
canvas.concat(mDrawMatrix);
drawable.draw(canvas);
drawFace(canvas);
canvas.restore(); // 合并图层
}
}
/**
* 绘制超过显示区域的人脸矩形
*/
private void drawFace(Canvas canvas) {
for (int i = 0; i < mFaceCount; i++) {
if (mFaces[i] != null && mIsNeedDraws[i]) {
mFaces[i].getMidPoint(mPoint);
float distance = mFaces[i].eyesDistance() * mAdjustScale;
RectF rectF = new RectF(mPoint.x * mAdjustScale - distance
, mPoint.y * mAdjustScale - FACE_VERTICAL * distance
, mPoint.x * mAdjustScale + distance
, mPoint.y * mAdjustScale + FACE_VERTICAL * distance);
canvas.drawRect(rectF, mPaint);
}
}
}
至此，整个图片的缩放，平移和人脸识别基本结束，关于检查边界并计算回弹距离，以及BitmapUtils加载本地图片相关的代码大家可以查看完整的demo，地址：https://github.com/gsy13213009/FaceRecognition.git
- 有关缩放平移的代码，我也是参考了这个哥们的分享完成的，因此边界回弹等相关代码基本照搬，只是多了一些比如人脸识别，缩放的极限设置以及图片的填充方向等工作，该博客的地址为：额，找不到了，以后遇到再填吧
