android绘制圆形图片的两种方式示例

android绘制圆形图片的两种方式示例,第1张

概述android绘制圆形图片的两种方式看下效果先下面有完整的示例代码使用BitmapShader(着色器)

androID绘制圆形图片的两种方式

看下效果先

下面有完整的示例代码

使用BitmapShader(着色器)

我们在绘制vIEw 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap当做一种颜色 设置给paint,paint都已经有颜色了 你想让它方了,圆了,扁了 还不是看你心情 canvas调用那个方法咯

实现的大致思路如下:

1. 创建一个类 继承imageVIEw 重写onDraw()

2. 获取到bitmap图片

3. 计算图片的缩放比例 使用矩阵matrix 进行缩放

4. 创建BitmapShader着色器 设置缩放矩阵

5. paint设置着色器 绘制

具体实现 注释也标注的很清楚

  private voID shadercircle(Canvas canvas){    //获取Drawable    Drawable resources=getDrawable();    float scale = 1.0f;//缩放比例    int mRadius=0;//圆的半径    if (resources instanceof BitmapDrawable){      //获取bitmap      Bitmap bitmap=((BitmapDrawable) resources).getBitmap();      if (bitmap==null) return;      // 获取bitmap宽高中的小值      int minBitMap = Math.min(bitmap.getWIDth(),bitmap.getHeight());      //取vIEw宽高中的小值 尽量保证图片内容的显示      int minValue=Math.min(getWIDth(),getHeight());      //设置半径      mRadius=minValue/2;      //计算缩放比例 一定要*1.0f 因为int之间的计算结果会四舍五入0或1 效果就不美丽了      scale=minValue*1.0f/minBitMap;      //设置缩放比例      matrix.setScale(scale,scale);      /**       * 创建着色器 设置着色模式       * TileMode的取值有三种:       * CLAMP 拉伸 REPEAT 重复  MIRROR 镜像       */      BitmapShader shader=new BitmapShader(bitmap,Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);      //设置矩阵      shader.setLocalMatrix(matrix);      paint.setShader(shader);      canvas.drawCircle(mRadius,mRadius,paint);    }  }

使用Xfermode 设置图片相交模式

简单说呢 在一张画布上画了两张图片 这两张图的以怎样的方式显示出来 例如:只显示上层图片,只显示下层图片 ,显示两张图的交集部分 等等等

实现思路

1.创建一个空bitmap 根据这个bitmap创建一个Canvas

2.设置Canvas透明 画一个想要实现的形状

3.设置图形相交模式

4.获取图片资源 绘制到Canvas

实现代码

 private Bitmap getCircleBitmap(){    Drawable drawable=getDrawable();    if (drawable instanceof BitmapDrawable) {      Paint paint=new Paint();      paint.setAntiAlias(true);      //获取资源图片      Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();      //创建空位图      Bitmap output=Bitmap.createBitmap(getWIDth(),getHeight(),Bitmap.Config.ARGB_8888);      //创建画板      Canvas canvas=new Canvas(output);      //绘制整个画板为透明      canvas.drawcolor(color.transparent);      paint.setcolor(color.WHITE);      //绘制圆角图片      if (type==ROUND){        canvas.drawRoundRect(new RectF(0,getWIDth(),getHeight()),mRound,paint);      }else{        //绘制圆形图片              //取vIEw宽高中的小值 尽量保证图片内容的显示        int minValue = Math.min(getWIDth(),getHeight());        //设置半径        mRadius = minValue / 2;        canvas.drawCircle(mRadius,paint);      }      //设置图形相交模式      paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));      Rect src=new Rect(0,bitmap.getWIDth(),bitmap.getHeight());      Rect dst=new Rect(0,output.getWIDth(),output.getHeight());      canvas.drawBitmap(bitmap,src,dst,paint);      return output;    }    return null;  }

这个特别经典的图......

PorterDuff.Mode.CLEAR 清除画布上图像PorterDuff.Mode.SRC 显示上层图像PorterDuff.Mode.DST 显示下层图像PorterDuff.Mode.SRC_OVER上下层图像都显示,上层居上显示PorterDuff.Mode.DST_OVER 上下层都显示,下层居上显示PorterDuff.Mode.SRC_IN 取两层图像交集部分只显示上层图像PorterDuff.Mode.DST_IN 取两层图像交集部分,只显示下层图像PorterDuff.Mode.SRC_OUT 取上层图像非交集部分PorterDuff.Mode.DST_OUT 取下层图像非交集部分PorterDuff.Mode.SRC_Atop 取下层图像非交集部分与上层图像交集部分PorterDuff.Mode.DST_Atop 取上层图像非交集部分与下层图像交集部分PorterDuff.Mode.XOR 取两层图像的非交集部分

参考文档

继承ImageVIEw完成圆形和圆角图片控件的实现过程(使用着色器)

  <declare-styleable name="circleimage">    <attr name="imageRound" format="dimension"/>    <attr name="imageType">      <enum name="circle" value="0"/>      <enum name="round" value="1"/>    </attr>  </declare-styleable>
public class circleimage extends ImageVIEw {  private Matrix matrix;  private Paint paint;  private int mRound;//圆角度数  private int mRadius;//圆的半径  private int type;//控件类型  private final int CIRCLE=0;//圆形  private final int ROUND=1;//圆角  public circleimage(Context context) {    super(context,null);  }  public circleimage(Context context,AttributeSet attrs) {    super(context,attrs);    matrix=new Matrix();    paint=new Paint();    paint.setAntiAlias(true);    initAttrValues(context,attrs);  }  @OverrIDe  protected voID onDraw(Canvas canvas) {    if (getDrawable() == null) {      return;    }    setShader();    if (type==CIRCLE){      canvas.drawCircle(mRadius,paint);    }else{      canvas.drawRoundRect(new RectF(0,paint);    }  }  /**   * 初始化属性集合   * @param context   * @param attrs   */  private voID initAttrValues(Context context,AttributeSet attrs){    TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.circleimage);    for (int i=0;i<typedArray.getIndexCount();i++){      int index=typedArray.getIndex(i);      switch (index){        case R.styleable.circleimage_imageRound:          mRound =typedArray.getDimensionPixelSize(index,(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,10,getResources().getdisplayMetrics()));          break;        case R.styleable.circleimage_imageType:          type=typedArray.getInt(index,CIRCLE);          break;      }    }  }  /**   * 设置着色器   */  private voID setShader() {    //获取Drawable    Drawable resources=getDrawable();    float scale = 1.0f;//缩放比例    if (resources instanceof BitmapDrawable) {      //获取bitmap      Bitmap bitmap = ((BitmapDrawable) resources).getBitmap();      if (bitmap == null) return;      //圆形      if (type==CIRCLE){        // 获取bitmap宽高中的小值        int minBitMap = Math.min(bitmap.getWIDth(),bitmap.getHeight());        //取vIEw宽高中的小值 尽量保证图片内容的显示        int minValue = Math.min(getWIDth(),getHeight());        //设置半径        mRadius = minValue / 2;        //计算缩放比例 一定要*1.0f 因为int之间的计算结果会四舍五入0或1 效果就不美丽了        scale = minValue * 1.0f / minBitMap;      }else{        //比较vIEw和图片宽高比例大的 要让缩放后的图片大于vIEw        scale = Math.max(getWIDth() * 1.0f / bitmap.getWIDth(),getHeight()            * 1.0f / bitmap.getHeight());      }      //设置缩放比例      matrix.setScale(scale,scale);      /**       * 创建着色器 设置着色模式       * TileMode的取值有三种:       * CLAMP 拉伸 REPEAT 重复  MIRROR 镜像       */      BitmapShader shader = new BitmapShader(bitmap,Shader.TileMode.CLAMP);      //设置矩阵      shader.setLocalMatrix(matrix);      //设置着色      paint.setShader(shader);    }  }  /**   * 测试转换效果 没什么卵用 可以删除   * @param event   * @return   */  @OverrIDe  public boolean ontouchEvent(MotionEvent event) {    if (event.getAction()==MotionEvent.ACTION_DOWN){      if (type==CIRCLE){        mRound =10;        type=ROUND;      }else{        type=CIRCLE;      }      invalIDate();    }    return super.ontouchEvent(event);  }}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的android绘制圆形图片的两种方式示例全部内容,希望文章能够帮你解决android绘制圆形图片的两种方式示例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1141590.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-31
下一篇 2022-05-31

发表评论

登录后才能评论

评论列表(0条)

保存