如何爲滑動的圓形裁剪圖像製作邊框

29

4版

我做了這個方式，RoundedCorners類：

import android.content.Context; 
import android.graphics.Bitmap; 
import android.graphics.BitmapShader; 
import android.graphics.Canvas; 
import android.graphics.Color; 
import android.graphics.Paint; 
import android.graphics.RectF; 
import android.graphics.Shader; 

import com.bumptech.glide.Glide; 
import com.bumptech.glide.load.Transformation; 
import com.bumptech.glide.load.engine.Resource; 
import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool; 
import com.bumptech.glide.load.resource.bitmap.BitmapResource; 

import java.security.MessageDigest; 



public class RoundedCornersTransformation implements Transformation<Bitmap> { 

    public enum CornerType { 
     ALL, 
     TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT, 
     TOP, BOTTOM, LEFT, RIGHT, 
     OTHER_TOP_LEFT, OTHER_TOP_RIGHT, OTHER_BOTTOM_LEFT, OTHER_BOTTOM_RIGHT, 
     DIAGONAL_FROM_TOP_LEFT, DIAGONAL_FROM_TOP_RIGHT, BORDER 
    } 

    private BitmapPool mBitmapPool; 
    private int mRadius; 
    private int mDiameter; 
    private int mMargin; 
    private CornerType mCornerType; 
    private String mColor; 
    private int mBorder; 

    public RoundedCornersTransformation(Context context, int radius, int margin) { 
     this(context, radius, margin, CornerType.ALL); 
    } 

    public RoundedCornersTransformation(Context context, int radius, int margin, String color, int border) { 
     this(context, radius, margin, CornerType.BORDER); 
     mColor = color; 
     mBorder = border; 
    } 

    public RoundedCornersTransformation(BitmapPool pool, int radius, int margin) { 
     this(pool, radius, margin, CornerType.ALL); 
    } 

    public RoundedCornersTransformation(Context context, int radius, int margin, 
             CornerType cornerType) { 
     this(Glide.get(context).getBitmapPool(), radius, margin, cornerType); 
    } 

    public RoundedCornersTransformation(BitmapPool pool, int radius, int margin, 
             CornerType cornerType) { 
     mBitmapPool = pool; 
     mRadius = radius; 
     mDiameter = mRadius * 2; 
     mMargin = margin; 
     mCornerType = cornerType; 
    } 

    @Override 
    public Resource<Bitmap> transform(Context context, Resource<Bitmap> resource, int outWidth, int outHeight) { 
     Bitmap source = resource.get(); 

     int width = source.getWidth(); 
     int height = source.getHeight(); 

     Bitmap bitmap = mBitmapPool.get(width, height, Bitmap.Config.ARGB_8888); 
     if (bitmap == null) { 
      bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); 
     } 

     Canvas canvas = new Canvas(bitmap); 
     Paint paint = new Paint(); 
     paint.setAntiAlias(true); 
     paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)); 
     drawRoundRect(canvas, paint, width, height); 
     return BitmapResource.obtain(bitmap, mBitmapPool); 
    } 

    private void drawRoundRect(Canvas canvas, Paint paint, float width, float height) { 
     float right = width - mMargin; 
     float bottom = height - mMargin; 

     switch (mCornerType) { 
      case ALL: 
       canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, paint); 
       break; 
      case TOP_LEFT: 
       drawTopLeftRoundRect(canvas, paint, right, bottom); 
       break; 
      case TOP_RIGHT: 
       drawTopRightRoundRect(canvas, paint, right, bottom); 
       break; 
      case BOTTOM_LEFT: 
       drawBottomLeftRoundRect(canvas, paint, right, bottom); 
       break; 
      case BOTTOM_RIGHT: 
       drawBottomRightRoundRect(canvas, paint, right, bottom); 
       break; 
      case TOP: 
       drawTopRoundRect(canvas, paint, right, bottom); 
       break; 
      case BOTTOM: 
       drawBottomRoundRect(canvas, paint, right, bottom); 
       break; 
      case LEFT: 
       drawLeftRoundRect(canvas, paint, right, bottom); 
       break; 
      case RIGHT: 
       drawRightRoundRect(canvas, paint, right, bottom); 
       break; 
      case OTHER_TOP_LEFT: 
       drawOtherTopLeftRoundRect(canvas, paint, right, bottom); 
       break; 
      case OTHER_TOP_RIGHT: 
       drawOtherTopRightRoundRect(canvas, paint, right, bottom); 
       break; 
      case OTHER_BOTTOM_LEFT: 
       drawOtherBottomLeftRoundRect(canvas, paint, right, bottom); 
       break; 
      case OTHER_BOTTOM_RIGHT: 
       drawOtherBottomRightRoundRect(canvas, paint, right, bottom); 
       break; 
      case DIAGONAL_FROM_TOP_LEFT: 
       drawDiagonalFromTopLeftRoundRect(canvas, paint, right, bottom); 
       break; 
      case DIAGONAL_FROM_TOP_RIGHT: 
       drawDiagonalFromTopRightRoundRect(canvas, paint, right, bottom); 
       break; 
      case BORDER: 
       drawBorder(canvas, paint, right, bottom); 
       break; 
      default: 
       canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, paint); 
       break; 
     } 
    } 

    private void drawTopLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, mMargin + mDiameter), 
       mRadius, mRadius, paint); 
     canvas.drawRect(new RectF(mMargin, mMargin + mRadius, mMargin + mRadius, bottom), paint); 
     canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), paint); 
    } 

    private void drawTopRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, mMargin + mDiameter), mRadius, 
       mRadius, paint); 
     canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint); 
     canvas.drawRect(new RectF(right - mRadius, mMargin + mRadius, right, bottom), paint); 
    } 

    private void drawBottomLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, mMargin + mDiameter, bottom), 
       mRadius, mRadius, paint); 
     canvas.drawRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom - mRadius), paint); 
     canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), paint); 
    } 

    private void drawBottomRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(right - mDiameter, bottom - mDiameter, right, bottom), mRadius, 
       mRadius, paint); 
     canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint); 
     canvas.drawRect(new RectF(right - mRadius, mMargin, right, bottom - mRadius), paint); 
    } 

    private void drawTopRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right, bottom), paint); 
    } 

    private void drawBottomRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin, mMargin, right, bottom - mRadius), paint); 
    } 

    private void drawLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), paint); 
    } 

    private void drawRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint); 
    } 

    private void drawOtherTopLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom - mRadius), paint); 
    } 

    private void drawOtherTopRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom - mRadius), paint); 
    } 

    private void drawOtherBottomLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius, 
       paint); 
     canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right - mRadius, bottom), paint); 
    } 

    private void drawOtherBottomRightRoundRect(Canvas canvas, Paint paint, float right, 
               float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius, 
       paint); 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin + mRadius, mMargin + mRadius, right, bottom), paint); 
    } 

    private void drawDiagonalFromTopLeftRoundRect(Canvas canvas, Paint paint, float right, 
                float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, mMargin + mDiameter), 
       mRadius, mRadius, paint); 
     canvas.drawRoundRect(new RectF(right - mDiameter, bottom - mDiameter, right, bottom), mRadius, 
       mRadius, paint); 
     canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right - mDiameter, bottom), paint); 
     canvas.drawRect(new RectF(mMargin + mDiameter, mMargin, right, bottom - mRadius), paint); 
    } 

    private void drawDiagonalFromTopRightRoundRect(Canvas canvas, Paint paint, float right, 
                float bottom) { 
     canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, mMargin + mDiameter), mRadius, 
       mRadius, paint); 
     canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, mMargin + mDiameter, bottom), 
       mRadius, mRadius, paint); 
     canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom - mRadius), paint); 
     canvas.drawRect(new RectF(mMargin + mRadius, mMargin + mRadius, right, bottom), paint); 
    } 

    private void drawBorder(Canvas canvas, Paint paint, float right, 
          float bottom) { 

     // stroke 
     Paint strokePaint = new Paint(); 
     strokePaint.setStyle(Paint.Style.STROKE); 
     if (mColor != null) { 
      strokePaint.setColor(Color.parseColor(mColor)); 
     } else { 
      strokePaint.setColor(Color.BLACK); 
     } 
     strokePaint.setStrokeWidth(mBorder); 

     canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, paint); 

     // stroke 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, strokePaint); 
    } 


    @Override 
    public void updateDiskCacheKey(MessageDigest messageDigest) { 

    } 

    public String getId() { 
     return "RoundedTransformation(radius=" + mRadius + ", margin=" + mMargin + ", diameter=" 
       + mDiameter + ", cornerType=" + mCornerType.name() + ")"; 
    } 
}

現在，在您的活動，你必須把這個：

public static int sCorner = 15; 
public static int sMargin = 2; 
public static int sBorder = 10; 
public static String sColor = "#7D9067"; 


    ... 

    ImageView imageView = (ImageView) findViewById(R.id.activity_main_image_view); 


    ImageView mImageViewBorder = (ImageView) findViewById(R.id.activity_main_image_view_border); 


    .... 
      // Rounded corners 
     Glide.with(this).load("http://scareface.jpeg") 
     .apply(RequestOptions.bitmapTransform(
     new RoundedCornersTransformation(this, sCorner, sMargin))).into(mImageView); 

     // Rounded corners with border 
     Glide.with(this).load("http://scareface.jpeg") 
     .apply(RequestOptions.bitmapTransform(
     new RoundedCornersTransformation(this, sCorner, sMargin, sColor, sBorder))).into(mImageViewBorder);

您可以在github中查看我的示例。

你也可以檢查這個post和這個library爲版本3。

來源

2016-04-02 11:19:30 Cabezas

+2

原來從這裏..我猜 https://github.com/wasabeef/glide-transformations –

+0

它不起作用。 –

+0

你的問題是哪一個？我是否能幫助？ @ShajeelAfzal – Cabezas

18

繪製對象爲ImageView的circle.xml圈邊界

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval"> 

<solid android:color="@android:color/transparent" /> 
<stroke 
    android:width="@dimen/et_thick" 
    android:color="@color/profile_pic_round" /> 

<corners android:radius="@dimen/default_corner_radius" />

和佈局會是這樣

確保您的ImageView的高度和寬度下，然後RelativeLayout的高度和寬度

<RelativeLayout 
    android:layout_width="150dp" 
    android:layout_height="150dp" 
    android:background="@drawable/circle">// set circle drawable here 

    <ImageView 
     android:id="@+id/profile_pic" 
     android:layout_width="145dp" 
     android:layout_height="145dp" 
     android:layout_centerInParent="true" /> 
</RelativeLayout>

和programetically設置圖像的circuler這樣

Glide.with(mContext) 
      .load(imagePath)//<= path of image 
      .bitmapTransform(new CropCircleTransform(mContext))//<= For Circuler image 
      .into(ivProfileImage);//<= your Imageview

來源

2015-12-02 09:12:38

+0

你應該加上'compile'jp.wasabeef：gli de-transformations：2.0.1'' gradle for'CropCircleTransform' –

6

好辦法做這件事情，而無需使用任何外部佈局

public static <T> void circleImage(final ImageView imageView, T uri, final boolean border) { 
    Glide.with(imageView.getContext()).load(uri).asBitmap().centerCrop().into(new BitmapImageViewTarget(imageView) { 
     @Override 
     protected void setResource(Bitmap resource) { 
      RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(imageView.getContext().getResources(), border ? addWhiteBorder(resource, imageView.getContext()) : resource); 
      circularBitmapDrawable.setCircular(true); 
      imageView.setImageDrawable(circularBitmapDrawable); 
     } 
    }); 
}

添加邊框與位圖

private static Bitmap addBorder(Bitmap resource, Context context) { 
    int w = resource.getWidth(); 
    int h = resource.getHeight(); 
    int radius = Math.min(h/2, w/2); 
    Bitmap output = Bitmap.createBitmap(w + 8, h + 8, Bitmap.Config.ARGB_8888); 
    Paint p = new Paint(); 
    p.setAntiAlias(true); 
    Canvas c = new Canvas(output); 
    c.drawARGB(0, 0, 0, 0); 
    p.setStyle(Paint.Style.FILL); 
    c.drawCircle((w/2) + 4, (h/2) + 4, radius, p); 
    p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); 
    c.drawBitmap(resource, 4, 4, p); 
    p.setXfermode(null); 
    p.setStyle(Paint.Style.STROKE); 
    p.setColor(ContextCompat.getColor(context, R.color.colorPrimary)); 
    p.setStrokeWidth(3); 
    c.drawCircle((w/2) + 4, (h/2) + 4, radius, p); 
    return output; 
}

來源

2017-04-04 10:15:47 wadali

+0

哇，大+1的傢伙 –

如何爲滑動的圓形裁剪圖像製作邊框

回答

相關問題