canvas教程

Android中圆角矩形和圆形的多种实现方式

字号+ 作者:H5之家 来源:H5之家 2017-02-24 12:03 我要评论( )

这篇文章主要介绍了Android中圆角矩形和圆形的多种实现方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Android中实现圆角矩形和圆形有很多种方式,其中最常见的方法有ImageLoader设置Option和自定义View。

1.ImageLoader加载图片

public static DisplayImageOptions getRoundOptions() { DisplayImageOptions options = new DisplayImageOptions.Builder() // 是否设置为圆角,弧度为多少,当弧度为90时显示的是一个圆 .displayer(new RoundedBitmapDisplayer(30)) .build(); return options; }

ImageLoader.getInstance().displayImage(imageURL, imageView, Options.getRoundOptions());

2.自定义View实现
自定义View实现圆角矩形和圆形也有很多方法,其中最常见的就是利用Xfermode,Shader。本文就是使用BitmapShader实现圆角的绘制。

自定义CircleImageView
 浅谈BitmapShader
BitmapShader是Shader的子类,可以通过Paint.setShader(Shader shader)进行设置,这里我们只关注BitmapShader,构造方法:
mBitmapShader = new BitmapShader(bitmap,TileMode.CLAMP, TileMode.CLAMP);
参数1:bitmap
参数2,参数3:TileMode;
TileMode的取值有三种:
CLAMP 拉伸
REPEAT 重复
MIRROR 镜像
 

重复:就是横向、纵向不断重复这个bitmap
镜像:横向不断翻转重复,纵向不断翻转重复;
拉伸:重复图片最后的那一个像素;横向的最后一个横行像素,不断的重复,纵项的那一列像素,不断的重复;
现在大概明白了,BitmapShader通过设置给mPaint,然后用这个mPaint绘图时,就会根据你设置的TileMode,对绘制区域进行着色。
对于我们的圆角,以及圆形,我们设置的模式都是CLAMP,但是你会不会会有一个疑问:
view的宽或者高大于我们的bitmap宽或者高岂不是会拉伸?
嗯,我们会为BitmapShader设置一个matrix,去适当的放大或者缩小图片,不会让“ view的宽或者高大于我们的bitmap宽或者高 ”此条件成立的。

 自定义属性 

<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable> <attr format="enum"> <enum value="0"/> <enum value="1"/> </attr> <attr format="dimension" /> <attr format="dimension" /> <attr format="color" /> </declare-styleable> </resources>

 获取自定义属性

public CircleImageView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView, defStyle, 0); // 获取类型 type = a.getInt(R.styleable.CircleImageView_type, TYPE_CIRCLE); // 获取圆角半径 mRoundRadius = a.getDimensionPixelSize(R.styleable.CircleImageView_round_Radius, DEFAULT_ROUND_RADIUS); // 获取边界的宽度 mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleImageView_border_width, DEFAULT_BORDER_WIDTH); // 获取边缘的颜色 mBorderColor = a.getColor(R.styleable.CircleImageView_border_color,DEFAULT_BORDER_COLOR); //调用 recycle() 回收TypedArray,以便后面重用 a.recycle(); init(); }

 onMeasure

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); /** * 如果类型是圆形,则强制改变view的宽高一致,以小值为准 */ if (type == TYPE_CIRCLE) { mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight()); setMeasuredDimension(mWidth, mWidth); } }

 设置初始化参数

/** * 作用就是保证第一次执行setup函数里下面代码要在构造函数执行完毕时调用 */ private void init() { //在这里ScaleType被强制设定为CENTER_CROP,就是将图片水平垂直居中,进行缩放 super.setScaleType(SCALE_TYPE); mReady = true; if (mSetupPending) { setup(); mSetupPending = false; } } /** * 这个函数很关键,进行图片画笔和边界画笔(Paint)一些重绘参数初始化: * 构建渲染器BitmapShader用Bitmap来填充绘制区域,设置样式以及内外圆半径计算等,以及调用updateShaderMatrix()函数和 invalidate()函数; */ private void setup() { //因为mReady默认值为false,所以第一次进这个函数的时候if语句为真进入括号体内 //设置mSetupPending为true然后直接返回,后面的代码并没有执行。 if (!mReady) { mSetupPending = true; return; } //防止空指针异常 if (mBitmap == null) { return; } // 构建渲染器,用mBitmap来填充绘制区域 ,参数值代表如果图片太小的话 就直接拉伸 mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); // 设置图片画笔反锯齿 mBitmapPaint.setAntiAlias(true); // 设置图片画笔渲染器 mBitmapPaint.setShader(mBitmapShader); // 设置边界画笔样式 mBorderPaint.setStyle(Paint.Style.STROKE); mBorderPaint.setAntiAlias(true); mBorderPaint.setColor(mBorderColor); mBorderPaint.setStrokeWidth(mBorderWidth); //这个地方是取的原图片的宽高 mBitmapHeight = mBitmap.getHeight(); mBitmapWidth = mBitmap.getWidth(); //设置含边界显示区域,取的是CircleImageView的布局实际大小 mBorderRect.set(0, 0, getWidth(), getHeight()); //初始图片显示区域为mBorderRect减去边缘部分 mDrawableRect.set(mBorderWidth, mBorderWidth, mBorderRect.width() - mBorderWidth, mBorderRect.height() - mBorderWidth); //下面计算的值都是为onDraw中画图做准备 if (type == TYPE_CIRCLE) { //计算 圆形带边界部分(外圆)的半径,取mBorderRect的宽高减去一个边缘大小的一半的较小值 mBorderRadius = (mBorderRect.width() - mBorderWidth)/2; //这里计算的是内圆的半径,也即去除边界宽度的半径 mDrawableRadius = mDrawableRect.width()/2; } else if (type == TYPE_ROUND) { //如果是圆角矩形,重新计算边缘区域,使处于边缘正中央 mBorderRect.set(mBorderWidth/2, mBorderWidth/2, getWidth() - mBorderWidth/2, getHeight() - mBorderWidth/2); } //设置渲染器的变换矩阵也即是mBitmap用何种缩放形式填充 updateShaderMatrix(); //手动触发ondraw()函数 完成最终的绘制 invalidate(); }

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Canvas版画图、圆角矩形、圆形、矩形、图形填充、mvc模式重新整

    Canvas版画图、圆角矩形、圆形、矩形、图形填充、mvc模式重新整

    2016-05-20 12:00

  • html5 Canvas画图教程(10)―把面拆成线条模拟出圆角矩形

    html5 Canvas画图教程(10)―把面拆成线条模拟出圆角矩形

    2016-03-02 14:26

  • canvas绘制圆角矩形

    canvas绘制圆角矩形

    2016-02-07 19:00

  • HTML5 Canvas自定义圆角矩形与虚线示例代码

    HTML5 Canvas自定义圆角矩形与虚线示例代码

    2015-10-07 14:29

网友点评
s