如何将 imageView 与矩阵 scaletype 居中?
How to center imageView with matrix scaletype?
我正在使用 Android Studio 来显示 imageView。我正在使用捏缩放与我的 ImageView 交互。
代码:
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;
}
缩放没问题,但问题是imageview的位置,卡在左上角。尝试更改布局但无能为力。经过一些研究,我在论坛 ImageView Center in position with ScaleType Matrix and Center the image in ImageView after zoom-pinch 中看到了这些链接,但是这些解决方案不起作用,我还检查了里面给出的链接。
不胜感激,
谢谢!
编辑:添加了关于如何获取 ImageView 的代码
Picasso.with(this).load(url).resize(350, 330).centerInside().into(imageView);
onCreate 代码
ScaleListnerClass和手势代码
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);
}
});
编辑 2:
如何像 CENTER_INSIDE
一样使图像居中,但使用矩阵:
首先我们需要一个矩形,图像尺寸为:
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);
它所做的是设置矩阵,以便第一个矩形变换为第二个矩形。 ScaleToFit.CENTER
将保留纵横比并与比例类型 CENTER_INSIDE
具有相同的效果。
所以如果你打电话给
imageView.setImageMatrix(matrix);
此时,您将获得居中图像。
编辑:我想你快到了。
您的矩阵将取消 Picasso 所做的图像居中,因此您需要在缩放之前先进行平移以使图像居中。
@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);
}
您正在使用 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);
我正在使用 Android Studio 来显示 imageView。我正在使用捏缩放与我的 ImageView 交互。
代码:
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;
}
缩放没问题,但问题是imageview的位置,卡在左上角。尝试更改布局但无能为力。经过一些研究,我在论坛 ImageView Center in position with ScaleType Matrix and Center the image in ImageView after zoom-pinch 中看到了这些链接,但是这些解决方案不起作用,我还检查了里面给出的链接。
不胜感激,
谢谢!
编辑:添加了关于如何获取 ImageView 的代码
Picasso.with(this).load(url).resize(350, 330).centerInside().into(imageView);
onCreate 代码
ScaleListnerClass和手势代码
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);
}
});
编辑 2:
如何像 CENTER_INSIDE
一样使图像居中,但使用矩阵:
首先我们需要一个矩形,图像尺寸为:
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);
它所做的是设置矩阵,以便第一个矩形变换为第二个矩形。 ScaleToFit.CENTER
将保留纵横比并与比例类型 CENTER_INSIDE
具有相同的效果。
所以如果你打电话给
imageView.setImageMatrix(matrix);
此时,您将获得居中图像。
编辑:我想你快到了。
您的矩阵将取消 Picasso 所做的图像居中,因此您需要在缩放之前先进行平移以使图像居中。
@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);
}
您正在使用 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);