自定义圆形图片

简介: 圆形图片相必是项目开发中也是不少用的一个知识点吧。 那么这里学习一下简单的制作圆形图片,主要运用 BitmapShader 类的知识来实现   一、首先,了解一下 BitmapShader 类 BitmapShader是Shader的子类,可以通过Paint.

圆形图片相必是项目开发中也是不少用的一个知识点吧。

那么这里学习一下简单的制作圆形图片,主要运用 BitmapShader 类的知识来实现

 

一、首先,了解一下 BitmapShader 类

BitmapShader是Shader的子类,可以通过Paint.setShader(Shader shader)进行设置

看一下BitmapShader 的构造方法

BitmapShader bitmapShader = new BitmapShader(bitmap,TileMode, TileMode);

调用这个方法来产生一个画有一个位图的渲染器(Shader)

看参数

bitmap 即在渲染器内的位图

TileMode ,分为三类

1、CLAMP  :如果渲染器超出原始边界范围,会复制范围内边缘染色,即拉伸

2、REPEAT :横向和纵向的重复渲染器图片,平铺,即重复

3、MIRROR :横向和纵向的重复渲染器图片,这个和REPEAT重复方式不一样,他是以镜像方式平铺,类似于湖上的物体和湖中的倒影

 

使用这个类的目的,就是把它的对象设置给Paint ,而Paint会根据TileMode进行绘制位图

 

二、实现圆形图片步骤

首先,ImageView和ImageButton需要图片,

有两种生成圆形图片的方法

1、自定义View继承ImageView、ImageButton

2、imageView.setXXX();

看下ImageView的设置图片方法:

1 ImageView imageView = new ImageView(this);
2 
3 imageView.setImageDrawable();  // 参数为一个Drawable 对象
4 imageView.setImageResource();  // 参数为一个资源文件
5 imageView.setImageBitmap();    // 参数为一个Bitmap 对象

 

那么我们这里实现方法为 自定义继承Drawable类 ,运用 imageView.setImageDrawable(); 设置圆形图片

实现步骤:

1、新建一个类继承Drawable

添加成员变量

private Paint paint;     //自定义必备画笔类
private Bitmap bitmap;   //将Bitmap 转为Drawable ,
private int width;       // 圆形图片的宽度
private int height;      // 圆形图片的高度
private int radiu;       // 圆形图片的半径

2、重写构造方法 

 1 public CircleImageView(Bitmap bitmap) {
 2         this.bitmap = bitmap;
 3         BitmapShader bitmapShader =
 4                 new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
 5 
 6         paint = new Paint();
 7         //抗锯齿 ,使得边缘光滑
 8         paint.setAntiAlias(true);
 9         //得到bitmap位图的宽高
10         width = bitmap.getWidth();
11         height = bitmap.getHeight();
12        //获取bitmap位图的宽高中的最小值,作为圆形图片的半径
13         radiu =Math.min(bitmap.getWidth(), bitmap.getHeight())/2;
14 
15         // 设置shader
16         paint.setShader(bitmapShader);
17     }

 

3、重写其他必要方法

@Override
    public void draw(Canvas canvas) {
        // 以bitmap中心点为圆心,长宽最小边为半径画圆,将Bitmap填充到圆中
        canvas.drawCircle(width/2,height/2,radiu,paint);
    }

    //设置透明度
    @Override
    public void setAlpha(int i) {
        paint.setAlpha(i);
    }

    //设置颜色
    @Override
    public void setColorFilter(ColorFilter colorFilter) {
        paint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }


    @Override
    public int getIntrinsicHeight() {
        return width;
    }

    @Override
    public int getIntrinsicWidth() {
        return width;
    }

 

完整代码:

 1 package com.xqx.CircleImageView;
 2 
 3 import android.graphics.*;
 4 import android.graphics.drawable.Drawable;
 5 
 6 
 7 public class CircleImageView extends Drawable {
 8 
 9     private Paint paint;
10     private Bitmap bitmap;
11     private int width;
12     private int height;
13     private int radiu;
14 
15     public CircleImageView(Bitmap bitmap) {
16         this.bitmap = bitmap;
17         BitmapShader bitmapShader =
18                 new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
19 
20         paint = new Paint();
21         //抗锯齿 ,使得边缘光滑
22         paint.setAntiAlias(true);
23         //获取bitmap位图的宽高中的最小值,作为圆形图片的
24         width = bitmap.getWidth();
25         height = bitmap.getHeight();
26         radiu =Math.min(bitmap.getWidth(), bitmap.getHeight())/2;
27 
28         // 设置shader
29         paint.setShader(bitmapShader);
30     }
31 
32     @Override
33     public void draw(Canvas canvas) {
34         // 以bitmap中心点为圆心,长宽最小边为半径画圆,将Bitmap填充到圆中
35         canvas.drawCircle(width/2,height/2,radiu,paint);
36     }
37 
38     //设置透明度
39     @Override
40     public void setAlpha(int i) {
41         paint.setAlpha(i);
42     }
43 
44     //设置颜色
45     @Override
46     public void setColorFilter(ColorFilter colorFilter) {
47         paint.setColorFilter(colorFilter);
48     }
49 
50     @Override
51     public int getOpacity() {
52         return PixelFormat.TRANSLUCENT;
53     }
54 
55 
56     @Override
57     public int getIntrinsicHeight() {
58         return width;
59     }
60 
61     @Override
62     public int getIntrinsicWidth() {
63         return width;
64     }
65 }
CircleImageView

 

4、运用

 1 package com.xqx.CircleImageView;
 2 
 3 import android.app.Activity;
 4 import android.graphics.*;
 5 import android.os.Bundle;
 6 import android.widget.ImageView;
 7 
 8 public class MainActivity extends Activity {
 9     private ImageView imageView;
10     @Override
11     public void onCreate(Bundle savedInstanceState) {
12         super.onCreate(savedInstanceState);
13         setContentView(R.layout.main);
14         imageView = (ImageView) findViewById(R.id.img);
15         Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.icon);
16         imageView.setImageDrawable(new CircleImageView(bitmap));
17     }
18 }

 

效果图:

 

       圆形图片                    原图               

 

                

 

 

 

 

可以看出,生成的圆形图片坐标圆点为原图的中心点,而直径为原图长宽中较短的那一个的边的长度

 

 

---------------------------------------------------------------------------------------------

学习来源:CirleDrawImage圆角图片

在该基础上进行部分修改,思路或代码若有问题,欢迎指出。

总结此方法的缺点:

1、该方法无法缩放原图,若原图宽高不一致,则显示效果不佳,无法正常显示出较长边的部分内容

2、圆形图片的效果有一定的损耗,效果不佳

适用于对图片精美度要求不高的需求使用

 

自定义View继承ImageView 则能更好的解决这些问题,待我有空再总结。。

 

第三方类库学习笔记:CustomShapeImageView 自定义形状的ImageView

相关文章
|
4月前
|
前端开发
Canvas绘画之多边形画板,绘制多边形,携带背景图和绘画功能,带有全部清除的功能,用这个
Canvas绘画之多边形画板,绘制多边形,携带背景图和绘画功能,带有全部清除的功能,用这个
|
4月前
根据图片获取图片中最多的颜色
根据图片获取图片中最多的颜色
|
4月前
|
机器学习/深度学习 前端开发 算法
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
84 0
|
4月前
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
420 0
|
5月前
给图片添加圆角功能,圆角透明
给图片添加圆角功能,圆角透明
26 0
|
6月前
|
前端开发
|
前端开发 Android开发
制作圆形图片,你会以下几种?
制作圆形图片,你会以下几种?
制作圆形图片,你会以下几种?
|
iOS开发
封装图片设置为圆形
封装图片设置为圆形
118 0
封装图片设置为圆形
|
C# 图形学 索引
上传图片时,使用GDI+中重绘方式将CMYK图片转为RGB图片
原文:上传图片时,使用GDI+中重绘方式将CMYK图片转为RGB图片 我们知道,如果网站上传图片时,如果用户上传的是CMYK图片,那么在网站上将是无法显示的,通常的现象是出现一个红叉。
1215 0
openlayers之绘制矩形星星拉框放大自定义图形
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/83036414 简介:openlayers绘制矩形、星星、拉框绘制,以及自定义图形。
1623 0