申明:本文部分内容为网络相关资料整理,并结合本人实际工作总结而成。请引用或者转载注明出处,对于文章内容有疑问请留言。
一、功能简介
对于图片的裁剪操作,可能比较常见。但是在一些app中使用半透明裁剪框截图图片,用作头像,还如何实现呢?怎么把图片放在截取框的下面,以及怎么实现放大缩小后的截取呢?
二、构思
1.布局文件(片段)
<RelativeLayout
android:id="@+id/my_show_fragment_rl_clipBox"
android:layout_width="@dimen/my_show_fragment_tv_picture_width"
android:layout_height="@dimen/my_show_fragment_tv_picture_height"
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/my_show_fragment_tv_picture_marginTop">
<RelativeLayout
android:id="@+id/my_show_fragment_rl_clip"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/my_show_fragment_iv_picture"
android:layout_width="@dimen/my_show_fragment_tv_picture_width"
android:layout_height="@dimen/my_show_fragment_tv_picture_height"/>
</RelativeLayout>
<View
android:id="@+id/my_show_fragment_v_clipBox"
android:layout_width="@dimen/my_show_fragment_tv_picture_width"
android:layout_height="@dimen/my_show_fragment_tv_picture_height"
android:background="@drawable/my_show_scale_box"/>
</RelativeLayout>
2.java代码(部分)
mShowFragmentXml = inflater.inflate(R.layout.my_show_fragment, container, false);
mClipRl = (RelativeLayout) mShowFragmentXml.findViewById(R.id.my_show_fragment_rl_clip);
mPhotoIv = (ImageView) view.findViewById(R.id.my_show_fragment_iv_picture);
ViewTreeObserver viewTreeObserver = mShowFragmentXml.getViewTreeObserver();
viewTreeObserver.addOnWindowFocusChangeListener(new ViewTreeObserver.OnWindowFocusChangeListener() {
@Override
public void onWindowFocusChanged(final boolean hasFocus) {
if (hasFocus) {
int layoutWidth = mClipRl.getWidth();
int layoutHeight = mClipRl.getHeight();
int imgWidth = bitmap.getWidth();
int imgHeight = bitmap.getHeight();
int selectWidth = mClipView.getWidth();
int selectHeight = mClipView.getHeight();
//缩放比例
float scaleNum;
//将要裁剪的图片长宽高做对比, 将较小的一方做等比缩放成裁剪框大小
if (imgWidth < imgHeight) {
scaleNum = (selectWidth * 1.0f) / (imgWidth * 1.0f);
imgWidth = selectWidth;
imgHeight = (int) (scaleNum * imgHeight);
} else {
scaleNum = (selectHeight * 1.0f) / (imgHeight * 1.0f);
imgWidth = (int) (scaleNum * imgWidth);
imgHeight = selectHeight;
}
Matrix matrix = new Matrix();
matrix.postScale(scaleNum, scaleNum);
//平移距离
matrix.postTranslate((layoutWidth - imgWidth) / 2, (layoutHeight - imgHeight) / 2);
mTop = (layoutHeight - selectHeight) / 2;
mLeft = (layoutWidth - selectWidth) / 2;
//设置缩放类型为矩阵
mPhotoIv.setScaleType(ImageView.ScaleType.MATRIX);
mPhotoIv.setImageMatrix(matrix);
mPhotoIv.setImageBitmap(bitmap);
}
}
});
mPhotoIv.setImageBitmap(bitmap);
mPhotoIv.setOnTouchListener(this);
mClipView = mShowFragmentXml.findViewById(R.id.my_show_fragment_v_clipBox);
3.解析
1)对整个布局进行窗口焦点监听,图片缩放移动之后的大小计算放在里面。
2)id为my_show_fragment_v_clipBox 的view是半透明截取框,此截取框长宽固定。
3)计算缩放比例以及移动距离,显示新的图片。