web-dev-qa-db-ja.com

画像の丸みを帯びた画像のボーダーを追加android

私が持っているもの ::私はpicasssoを使用して円として画像を作成しているImageviewを持っています enter image description here

何をすべきか ::現在の実装を使用して丸い画像に黒い境界線を追加したい、サードパーティのライブラリを使用せずにこれを達成する方法

Picasso.with(this)
.load("http://i.imgur.com/DvpvklR.png")
.transform(new RoundedTransformation(50, 4))
.resize(100, 100)
.centerCrop().into(imageView1);

RoundedTransformation.Java

// enables hardware accelerated rounded corners
// original idea here : http://www.curious-creature.org/2012/12/11/Android-recipe-1-image-with-rounded-corners/
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";
    }
}

編集

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();
        }

        Paint paint1 = new Paint();      
        Paint1.setColor(Color.RED);
        Paint1.setStyle(Style.STROKE);
        Paint1.setAntiAlias(true);
        Paint1.setStrokeWidth(2);
        canvas.drawCircle((source.getWidth() - margin)/2, (source.getHeight() - margin)/2, radius-2, Paint1);


        return output;
    }

    @Override
    public String key() {
        return "rounded";
    }
}

enter image description here

androidpicasso
18
Devrath

別のペイントdrawCircleでobjectを使用できます。例えば：

Paint paint = new Paint();      
Paint.setColor(Color.RED);
Paint.setStyle(Style.STROKE);
Paint.setAntiAlias(true);
Paint.setStrokeWidth(2);
canvas.drawCircle((source.getWidth() - margin)/2, (source.getHeight() - margin)/2, radius-2, Paint);

また、drawRoundRectを使用して円を描く代わりに、drawCircleを使用できます

9
Blackbelt

blackbelt のおかげで、最終的な変換クラス

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.drawCircle((source.getWidth() - margin)/2, (source.getHeight() - margin)/2, radius-2, Paint);

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

        Paint paint1 = new Paint();      
        Paint1.setColor(Color.RED);
        Paint1.setStyle(Style.STROKE);
        Paint1.setAntiAlias(true);
        Paint1.setStrokeWidth(2);
        canvas.drawCircle((source.getWidth() - margin)/2, (source.getHeight() - margin)/2, radius-2, Paint1);


        return output;
    }

    @Override
    public String key() {
        return "rounded";
    }
}
19
Devrath

BlackBeltとDevrathの回答は素晴らしいです。このクラスのKotlinバージョンを探している場合は、次のようになります。

class RoundedBorderTransform(private val radius: Int, private val margin: Int) : com.squareup.picasso.Transformation {

override fun transform(source: Bitmap?): Bitmap {
    val Paint = Paint()
    Paint.isAntiAlias = true
    Paint.shader = BitmapShader(source!!, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)

    val output = Bitmap.createBitmap(source.width, source.height, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(output)
    canvas.drawCircle((source.width - margin) / 2f, (source.height - margin) / 2f, radius - 2f, Paint)

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

    val borderPaint = Paint()
    borderPaint.color = Color.RED
    borderPaint.style = Paint.Style.STROKE
    borderPaint.isAntiAlias = true
    borderPaint.strokeWidth = 2f
    canvas.drawCircle((source.width - margin) / 2f, (source.height - margin) / 2f, radius - 2f, borderPaint)

    return output
}

override fun key(): String {
    return "roundedBorder"
}

}

1
Tô Minh Tiến