12

有没有一种合理的方法可以用毕加索做圆角

  1. 不会显着减慢绘图速度
  2. 与硬件层一起使用
  3. 不会为每个图像创建额外的位图
  4. 允许将下载的位图调整为目标图像视图的大小

大多数关于圆角的毕加索建议都建议使用转换,但我还没有看到不创建额外位图作为转换的一部分的示例。

这似乎是因为毕加索只使用位图,而圆角的技巧使用了这样一个事实,即您可以合理有效地动态绘制圆角(大多数解决方案使用类似http://www.curious-creature 的东西。 org/2012/12/11/android-recipe-1-image-with-rounded-corners/)。

用 Volley 做这件事有点笨拙,但可能,只需将 ImageView 的类型更改为采用自定义可绘制对象的东西,它会绘制圆角。由于 Picasso 需要位图(至少,只有位图 -> 位图转换),所以这是出局了,因为可绘制到位图的转换会在此过程中创建位图。

一种解决方案是自己在一个分支中修改毕加索,添加一个位图 - > 可绘制变换,但我想有更好的方法来解决这个问题。

我不想在视图顶部绘制一个 9-patch 来呈现圆角的外观。

4

4 回答 4

27
  1. 这段代码对我来说很好
    在此处输入图像描述

    Picasso.with(getApplicationContext())
            .load(sp.getString("image_url", ""))
            .transform(new RoundedTransformation(100, 0))
            .fit()
            .into(userProfileImg);
    

// 这里是make的类

    public class RoundedTransformation implements
        com.squareup.picasso.Transformation {
    private final int radius;
    private final int margin; // dp

    // radius is corner radii in dp
    // margin is the board in dp
    public RoundedTransformation(final int radius, final int margin) {
        this.radius = radius;
        this.margin = margin;
    }

    @Override
    public Bitmap transform(final Bitmap source) {
        final Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP,
                Shader.TileMode.CLAMP));

        Bitmap output = Bitmap.createBitmap(source.getWidth(),
                source.getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);
        canvas.drawRoundRect(new RectF(margin, margin, source.getWidth()
                - margin, source.getHeight() - margin), radius, radius, paint);

        if (source != output) {
            source.recycle();
        }

        return output;
    }

    @Override
    public String key() {
        return "rounded";
    }
}
于 2015-01-14T12:10:33.663 回答
5

我也需要这样的东西,但有一个边框。我在互联网上搜索过,找到了一个看起来不错的版本(没有圆角),但边框在图像上方,我不喜欢这样。所以我制作了自己的版本,边框在图像外。

public class BitmapBorderTransformation implements Transformation {
private int mBorderSize;
private int mCornerRadius = 0;
private int mColor;

public BitmapBorderTransformation(int borderSize, int color) {
    this.mBorderSize = borderSize;
    this.mColor = color;
}

public BitmapBorderTransformation(int borderSize, int cornerRadius, int color) {
    this.mBorderSize = borderSize;
    this.mCornerRadius = cornerRadius;
    this.mColor = color;
}

@Override 
public Bitmap transform(Bitmap source) {
    int width = source.getWidth();
    int height = source.getHeight();

    Bitmap image = Bitmap.createBitmap(width, height, source.getConfig());
    Canvas canvas = new Canvas(image);
    canvas.drawARGB(0, 0, 0, 0);

    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    Rect rect = new Rect(0, 0, width, height);


    if(this.mCornerRadius == 0) {
        canvas.drawRect(rect, paint);
    }
    else {
        canvas.drawRoundRect(new RectF(rect),
                this.mCornerRadius, this.mCornerRadius, paint);
    }

    paint.setXfermode(new PorterDuffXfermode((PorterDuff.Mode.SRC_IN)));
    canvas.drawBitmap(source, rect, rect, paint);

    Bitmap output;

    if(this.mBorderSize == 0) {
        output = image;
    }
    else {
        width = width + this.mBorderSize * 2;
        height = height + this.mBorderSize * 2;

        output = Bitmap.createBitmap(width, height, source.getConfig());
        canvas.setBitmap(output);
        canvas.drawARGB(0, 0, 0, 0);

        rect = new Rect(0, 0, width, height);

        paint.setXfermode(null);
        paint.setColor(this.mColor);
        paint.setStyle(Paint.Style.FILL);

        canvas.drawRoundRect(new RectF(rect), this.mCornerRadius, this.mCornerRadius, paint);

        canvas.drawBitmap(image, this.mBorderSize, this.mBorderSize, null);
    }

    if(source != output){
        source.recycle();
    }
    return output;
}

@Override 
public String key() {
    return "bitmapBorder(" +
            "borderSize=" + this.mBorderSize + ", " +
            "cornerRadius=" + this.mCornerRadius + ", " +
            "color=" + this.mColor +")";
 }
}

以下是一些示例:

你也可以做没有圆角的边框:
new BitmapBorderTransformation(3, Color.WHITE);

于 2015-01-26T05:41:18.433 回答
3

这适用于任何大小的任何图像-

1)首先为不同的分辨率创建一个空的图像容器 2)然后在运行时通过这个得到它的高度和宽度-------

BitmapFactory.Options dimensions = new BitmapFactory.Options(); 
dimensions.inJustDecodeBounds = true;
Bitmap mBitmap = BitmapFactory.decodeResource(activity.getResources(), R.drawable.icon, dimensions);
        int height = dimensions.outHeight;
        int width =  dimensions.outWidth;

3)

Picasso.with(getActivity())
            .load(url)
            .error(R.drawable.image2)
            .placeholder(R.drawable.ic_drawer)
           .resize(width, height )
            .transform(new ImageTrans_roundedcorner())
            .into(imageView1);

4) 现在转换类----

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Bitmap.Config;
import android.graphics.Rect;
import android.graphics.RectF;
import com.squareup.picasso.Transformation;

public class ImageTrans_roundedcorner implements Transformation{

    private int mBorderSize=10;
    private int mCornerRadius = 20;
    private int mColor=Color.BLACK;

    @Override
    public Bitmap transform(Bitmap source) {
        // TODO Auto-generated method stub
        Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, source.getWidth(), source.getHeight());
        final RectF rectF = new RectF(rect);
        final float roundPx = mCornerRadius;

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(source, rect, rect, paint);

     // draw border
        paint.setColor(color);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth((float) mBorderSize);
        canvas.drawRoundRect(rectF, mCornerRadius, mCornerRadius, paint);
        //-------------------

            if(source != output) source.recycle();

            return output;
    }

    @Override
    public String key() {
        // TODO Auto-generated method stub
        return "grayscaleTransformation()";
    }

}
于 2015-06-12T06:31:02.890 回答
2

编辑:我建议的答案是等待 Picasso 2.3,或者现在分叉他们的 github,在那里你实际上可以得到一个 BitmapDrawable。

到目前为止,我发现的一种方法是,您可以将图像加载到 Target 对象中,以这种方式从位图创建自定义可绘制对象,然后将可绘制对象设置到 ImageView 中,无需创建新位图即可在其中进行绘制。

这种方法有点糟糕,但有几个原因:

1)您必须管理目标对象。这些是弱引用(谢天谢地),所以你必须自己跟踪它们。伊克。内存泄漏啊哈。

2)当你收到回调时,你最好检查以确保世界的状态仍然与图片相关,这是你使用毕加索想要避免的一部分。

简而言之,有一些事情似乎阻碍了更好的解决方案。

1) Picasso 将位图包装在 PicassoDrawables 中。这意味着您必须在自定义 imageView 中处理任意可绘制对象(如果您走那条路线),或者此类的特殊情况。2)PicassoDrawable 不公开源位图,因此您必须将drawable 转换为位图(需要创建新的位图,afaict)。3) 没有位图 -> 可绘制的变换功能(原因见#1,很可能)。

很想听听我是否缺少某些东西,或者有人提出了更好的解决方案。现在我最好的计划是要么做上面提出的目标管理,要么分叉毕加索 repo,改变 PicassoDrawable 以获得底层位图的公共访问器,然后在我的 imageView 中以这种方式转换为自定义可绘制对象。

于 2014-03-20T18:26:45.800 回答