我正在尝试创建一个图像查看器,当用户点击图像时,图像会被“裁剪”并显示完整的图像。
例如,在下面的屏幕截图中,用户最初只能看到小狗的部分。但在用户单击图像后,整个小狗就会显现出来。第一张图像后面逐渐消失的图像显示了动画的结果。
最初,ImageView在X和Y上缩放为50%。当用户单击图像时,ImageView缩放回100%,并重新计算ImageView矩阵。
我尝试过各种方法来计算矩阵。但是似乎没有一种适用于所有类型的裁剪和图像的方法:从横向裁剪为纵向、从横向裁剪到横向、从纵向裁剪到纵向以及从纵向裁剪到横向。这真的可能吗?
这是我目前的代码。我正在尝试找出在
例如,在下面的屏幕截图中,用户最初只能看到小狗的部分。但在用户单击图像后,整个小狗就会显现出来。第一张图像后面逐渐消失的图像显示了动画的结果。
最初,ImageView在X和Y上缩放为50%。当用户单击图像时,ImageView缩放回100%,并重新计算ImageView矩阵。
我尝试过各种方法来计算矩阵。但是似乎没有一种适用于所有类型的裁剪和图像的方法:从横向裁剪为纵向、从横向裁剪到横向、从纵向裁剪到纵向以及从纵向裁剪到横向。这真的可能吗?
这是我目前的代码。我正在尝试找出在
setImageCrop()
中应该输入什么。public class MainActivity extends Activity {
private ImageView img;
private float translateCropX;
private float translateCropY;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
img = (ImageView) findViewById(R.id.img);
Drawable drawable = img.getDrawable();
translateCropX = -drawable.getIntrinsicWidth() / 2F;
translateCropY = -drawable.getIntrinsicHeight() / 2F;
img.setScaleX(0.5F);
img.setScaleY(0.5F);
img.setScaleType(ScaleType.MATRIX);
Matrix matrix = new Matrix();
matrix.postScale(2F, 2F); //zoom in 2X
matrix.postTranslate(translateCropX, translateCropY); //translate to the center of the image
img.setImageMatrix(matrix);
img.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
final PropertyValuesHolder animScaleX = PropertyValuesHolder.ofFloat(View.SCALE_X, 1F);
final PropertyValuesHolder animScaleY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 1F);
final ObjectAnimator objectAnim = ObjectAnimator.ofPropertyValuesHolder(img, animScaleX, animScaleY);
final PropertyValuesHolder animMatrixCrop = PropertyValuesHolder.ofFloat("imageCrop", 0F, 1F);
final ObjectAnimator cropAnim = ObjectAnimator.ofPropertyValuesHolder(MainActivity.this, animMatrixCrop);
final AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(objectAnim).with(cropAnim);
animatorSet.start();
}
});
}
public void setImageCrop(float value) {
// No idea how to calculate the matrix depending on the scale
Matrix matrix = new Matrix();
matrix.postScale(2F, 2F);
matrix.postTranslate(translateCropX, translateCropY);
img.setImageMatrix(matrix);
}
}
编辑:值得一提的是,线性缩放矩阵是不可行的。ImageView会进行线性缩放(从0.5到1)。但是如果我在动画期间线性缩放矩阵,则视图在动画期间会被挤压。最终结果看起来很好,但是在动画过程中图像看起来很丑陋。