当在圆形ImageView中显示时，图像会被拉伸。

Question

当在圆形ImageView中显示时，图像会被拉伸。

7

以下是我的RoundedImageView类，它继承了ImageView：

public class RoundedImageView extends ImageView {

public RoundedImageView(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
}

public RoundedImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public RoundedImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

@Override
protected void onDraw(Canvas canvas) {

    Drawable drawable = getDrawable();

    if (drawable == null) {
        return;
    }

    if (getWidth() == 0 || getHeight() == 0) {
        return; 
    }
    Bitmap b =  ((BitmapDrawable)drawable).getBitmap() ;
    Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

    int w = getWidth(), h = getHeight();


    Bitmap roundBitmap =  getCroppedBitmap(bitmap, w);
   // roundBitmap= ImageUtils.setCircularInnerGlow(roundBitmap, 0xFFBAB399, 4, 1);
    canvas.drawBitmap(roundBitmap, 0,0, null);

}

public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
    Bitmap sbmp;
    if(bmp.getWidth() != radius || bmp.getHeight() != radius)
        sbmp = Bitmap.createScaledBitmap(bmp, radius, radius, false);
    else
        sbmp = bmp;


    Bitmap output = Bitmap.createBitmap(sbmp.getWidth(),
            sbmp.getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xffa19774;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());

    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.parseColor("#BAB399"));
    canvas.drawCircle(sbmp.getWidth() / 2+0.7f, sbmp.getHeight() / 2+0.7f,
            sbmp.getWidth() / 2+0.1f, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(sbmp, rect, rect, paint);


            return output;
}

我的xml代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="horizontal" >

        <com.example.scaletypedemo.RoundedImageView
            android:layout_marginLeft="30dp"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_centerInParent="true"
            android:scaleType="centerCrop"
            android:src="@drawable/a"
            android:adjustViewBounds="true" />

         <ImageView
                android:layout_marginLeft="50dp"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:scaleType="centerCrop"
                android:src="@drawable/a" />

    </LinearLayout>

</RelativeLayout>

所以问题是，如果我使用ImageView来显示图片，则不会拉伸图像，但是如果我使用相同的图像并在RoundedImageView中显示它并保持所有属性不变，则图像会被拉伸，如下面的屏幕截图所示：

请帮助防止在RoundedImageView中显示的图像被拉伸……我在这一点上陷入了困境。

编辑：应用Zhenghong的解决方案后，已解决拉伸问题，但是没有显示完整的圆形。

提前感谢！

- nidhi

如果您将RoundImageView放在一个布局中，并将布局的宽度和高度设置为100，这样做会有帮助吗？<LinearLayout width=100 height=100.....> <RoundedImageView width=wrap height=wrap.../> </LinearLayout> - Android

不行啊......它还是被拉伸了！！！！ - nidhi

1

sbmp = Bitmap.createScaledBitmap(bmp, radius, radius, false);你使用了相同的宽度和高度创建了一个位图。这就是图片被拉伸的原因。 - Zhenghong Wang

2个回答

2

另一个选择是创建一个透明的 PNG 图片边框（在正方形中挖空的圆圈），并将其作为视图的背景直接放在 ImageView 上方，大小相同。

类似这样：

圆形图片边框

编辑：

看来白色背景上的白色图片有问题 :) （相信我，图片在那里...）所以我上传了两张更多的图片：

输入图片说明

- Itai Hanski

是的，我已经尝试过那个解决方案了，但问题在于在我的实际项目中存在一些背景...所以 PNG 的边框在那里看起来不好。 - nidhi

1

我明白了，那么你可以拿你为 RoundedImageView 创建的四舍五入逻辑，并创建一个 RoundedFrameLayout 或其他实现它的布局。在你的 XML 文件中，在新创建的 RoundedFrameLayout 中放置一个普通的 ImageView。 - Itai Hanski

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zhenghong Wang · Accepted Answer

你应该按照宽高比例来调整位图的大小。

----编辑---- 这将是更加灵活的做法。

@Override
protected void onDraw(Canvas canvas) {

    Drawable drawable = getDrawable();

    if (drawable == null) {
        return;
    }

    if (getWidth() == 0 || getHeight() == 0) {
        return;
    }
    Bitmap b = ((BitmapDrawable) drawable).getBitmap();
    Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

    int w = getWidth(), h = getHeight();
    int radius = w < h ? w : h;

    Bitmap roundBitmap = getCroppedBitmap(bitmap, radius, w, h);
    // roundBitmap= ImageUtils.setCircularInnerGlow(roundBitmap, 0xFFBAB399,
    // 4, 1);
    canvas.drawBitmap(roundBitmap, 0, 0, null);

}

public static Bitmap getCroppedBitmap(Bitmap bmp, int radius, int w, int h) {
    Bitmap sbmp;
    if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
        float _w_rate = 1.0f * radius / bmp.getWidth();
        float _h_rate = 1.0f * radius / bmp.getHeight();
        float _rate = _w_rate < _h_rate ? _h_rate : _w_rate;
        sbmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() * _rate), (int)(bmp.getHeight() * _rate), false);
    }
    else
        sbmp = bmp;

    Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), sbmp.getHeight(),
            Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xffa19774;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());

    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.parseColor("#BAB399"));
    canvas.drawCircle(w / 2, h / 2, (w < h ? w : h) / 2, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(sbmp, rect, rect, paint);

    return output;
}