如何使用矩阵比例尺中心imageView？ [英] How to center imageView with matrix scaletype?
问题描述
我正在使用 Android Studio 来显示 imageView 。我正在使用捏缩放来与我的ImageView进行交互。
代码：
私人课程ScaleListener扩展ScaleGestureDetector.SimpleOnScaleGestureListener {
@Override
public boolean onScale（ScaleGestureDetector detector）{
scale = scale * detector.getScaleFactor（）;
scale = Math.max（0.1f，Math.min（scale，5f））;
matrix.setScale（scale，scale）;
imageView.setImageMatrix（matrix）;
返回true;
}
}
@Override
public boolean onTouchEvent（MotionEvent event）{
scaleGestureDetector.onTouchEvent（event）;
返回true;
}
缩放很好，但问题是imageview的位置，它卡在左边上角。尝试布局更改但无关。经过一些研究，我在论坛中看到了这些链接
ScaleListner类和手势代码
Picasso.with （this）.load（url）.into（imageView，new Callback.EmptyCallback（）{
@Override
public void onSuccess（）{
Drawable d = imageView.getDrawable（）;
// TODO：检查d是否为null
RectF imageRectF = new RectF（0,0，d.getIntrinsicWidth（），d.getIntrinsicHeight（））;
RectF viewRectF = new RectF（0,0，imageView.getWidth（），imageView.getHeight（））;
matrix.setRectToRect （imageRectF，viewRectF，ScaleToFit.CENTER）;
imageView.setImageMatrix（matrix）;
}
}）;
编辑2：
如何将图像居中，如 CENTER_INSIDE ，但使用矩阵：
首先我们需要一个带有矩形的矩形图片尺寸：
Drawable d = imageView.getDrawable（）;
// TODO：检查d是否为null
RectF imageRectF = new RectF（0,0，d.getIntrinsicWidth（），d.getIntrinsicHeight（））;
接下来你需要一个视图尺寸的矩形：
RectF viewRectF = new RectF（0,0，imageView.getWidth（），imageView.getHeight（））;
现在我们在矩阵上运行一个方法，将图像置于视图中心：
matrix.setRectToRect（imageRectF，viewRectF，ScaleToFit.CENTER）;
这样做是为了设置矩阵，使第一个矩形变换为第二个矩形。 ScaleToFit.CENTER 将保留纵横比并与比例类型 CENTER_INSIDE 具有相同的效果。
所以如果你打电话
imageView.setImageMatrix（matrix）;
此时，您将拥有一个居中的图像。
编辑：我认为你差不多了。
你的矩阵会撤消Picasso所做的图像居中，因此您需要在缩放之前插入一个平移图像居中。
@覆盖
公共布尔值onScale（ScaleGestureDetector检测器）{
Drawable d = imageView.getDrawable（）;
//如果d为null，则Picasso尚未加载图像
float offsetX =（imageView.getWidth（） - d.getIntrinsicWidth（））/ 2F;
float offsetY =（imageView.getHeight（） - d.getIntrinsicHeight（））/ 2F;
float centerX = imageView.getWidth（）/ 2F;
float centerY = imageView.getHeight（）/ 2F;
//请注意，这些偏移和中心值不会随着缩放而变化，
//因此您可以在其他地方计算它们，然后在此处使用它们。
scale * = detector.getScaleFactor（）;
scale = Math.max（0.1f，Math.min（scale，5f））;
matrix.setScale（scale，scale，centerX，centerY）;
matrix.preTranslate（offsetX，offsetY）;
imageView.setImageMatrix（matrix）;
}
您正在使用 setScale（float sx，float sy）。还有另一个版本， setScale（float sx，float sy，float px，float py）其中px，py是枢轴点。
因此，如果您想使图像居中，请确定视图的中心，并使用x，y值作为轴心点。
您还需要将图像置于视图中心，因此在缩放之前需要先移动图像。
float offsetX =（imageView.getWidth（） - bitmap.getIntrinsicWidth（））/ 2F;
float offsetY =（imageView.getHeight（） - bitmap.getIntrinsicHeight（））/ 2F;
float centerX = imageView.getWidth（）/ 2F;
float centerY = imageView.getHeight（）/ 2F;
matrix.setScale（scale，scale，centerX，centerY）;
matrix.preTranslate（offsetX，offsetY）;
I'm using Android Studio to display an imageView. I'm using pinch zoom to interact with my ImageView.
Code:
private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener{
@Override
public boolean onScale(ScaleGestureDetector detector) {
scale = scale * detector.getScaleFactor();
scale = Math.max(0.1f, Math.min(scale, 5f));
matrix.setScale(scale, scale);
imageView.setImageMatrix(matrix);
return true;
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
scaleGestureDetector.onTouchEvent(event);
return true;
}
Zoom is fine, but problem is the position of imageview, it's stuck in left upper corner. Tried layout changes but nothing to do. After some reseaches, I've seen these links in the forum ImageView Center in position with ScaleType Matrix and Center the image in ImageView after zoom-pinch, but these solutions aren't working, I've also checked the links given inside.
Help would be appreciated,
Thanks !
EDIT: Added the piece of code on how I get my ImageView
Picasso.with(this).load(url).resize(350, 330).centerInside().into(imageView);
onCreate Code
ScaleListner Class and Gesture Code
Picasso.with(this).load(url).into(imageView, new Callback.EmptyCallback() {
@Override
public void onSuccess() {
Drawable d = imageView.getDrawable();
// TODO: check that d isn't null
RectF imageRectF = new RectF(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
RectF viewRectF = new RectF(0, 0, imageView.getWidth(), imageView.getHeight());
matrix.setRectToRect(imageRectF, viewRectF, ScaleToFit.CENTER);
imageView.setImageMatrix(matrix);
}
});
Edit 2:
How to center the image like CENTER_INSIDE but using matrix:
First we need a rectangle with the image dimensions:
Drawable d = imageView.getDrawable();
// TODO: check that d isn't null
RectF imageRectF = new RectF(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
Next you need a rectangle with the view dimensions:
RectF viewRectF = new RectF(0, 0, imageView.getWidth(), imageView.getHeight());
Now we run a method on matrix that will center the image in the view:
matrix.setRectToRect(imageRectF, viewRectF, ScaleToFit.CENTER);
What this does is set up the matrix so that the first rectangle will transform to the second rectangle. ScaleToFit.CENTER will preserve the aspect ratio and have the same effect as scale type CENTER_INSIDE.
So if you call
imageView.setImageMatrix(matrix);
at this point, you will have a centered image.
Edit: I think you are almost there.
Your matrix will undo the image centering that Picasso did, so you need to put in a translation to center the image before you scale it.
@Override
public boolean onScale(ScaleGestureDetector detector) {
Drawable d = imageView.getDrawable();
// if d is null, then Picasso hasn't loaded the image yet
float offsetX = (imageView.getWidth() - d.getIntrinsicWidth()) / 2F;
float offsetY = (imageView.getHeight() - d.getIntrinsicHeight()) / 2F;
float centerX = imageView.getWidth() / 2F;
float centerY = imageView.getHeight() / 2F;
// note that these offset and center values don't change with the scaling,
// so you can calculate them somewhere else and then use them here.
scale *= detector.getScaleFactor();
scale = Math.max(0.1f, Math.min(scale, 5f));
matrix.setScale(scale, scale, centerX, centerY);
matrix.preTranslate(offsetX, offsetY);
imageView.setImageMatrix(matrix);
}
You are using setScale(float sx, float sy). There is another version, setScale(float sx, float sy, float px, float py) where px,py is a pivot point.
So if you want to center your image, determine the center of your view and use the x,y value as the pivot point.
You will also want to center the image inside the view, so you will need to move the image first before you scale.
float offsetX = (imageView.getWidth() - bitmap.getIntrinsicWidth()) / 2F;
float offsetY = (imageView.getHeight() - bitmap.getIntrinsicHeight()) / 2F;
float centerX = imageView.getWidth() / 2F;
float centerY = imageView.getHeight() / 2F;
matrix.setScale(scale, scale, centerX, centerY);
matrix.preTranslate(offsetX, offsetY);
这篇关于如何使用矩阵比例尺中心imageView？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
