转换黑白的加载控件

转换黑白的加载控件

看到腾讯动漫的一个加载控件是自己的图标由黑白变成彩色，就研究了一下写了一个类似效果的控件.
为了实现这个效果，开始我觉得用两张bitmap重叠实现最好了，先将一张黑白化，在让两张重叠的现实。后来我发现了 paint的setColorFilter的方法，通过这个方法我们可以轻松渲染出黑白的图片。闲话少说上代码：

public class GraphDrawable extends Drawable {public  static int MAX_NUM = 100;private Paint mPaint;private Paint mBPaint;private Bitmap bitmap;private int CurrentNum;private int MaxNum = MAX_NUM;private int height;private int width;private Rect mSrcRect = new Rect();private Rect mSrcRect2 = new Rect();private Rect mDesRect = new Rect();private Rect mDesRect2 = new Rect();private int colorheight;private int whiteheight;private int colorbitmapheight;private int whitebitmapheight;public GraphDrawable() {mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);mBPaint = new Paint(Paint.ANTI_ALIAS_FLAG);ColorMatrixColorFilter colorFilter = new ColorMatrixColorFilter(new float[]{0.33F, 0.59F, 0.11F, 0, 0,0.33F, 0.59F, 0.11F, 0, 0,0.33F, 0.59F, 0.11F, 0, 0,0, 0, 0, 1, 0,});mBPaint.setColorFilter(colorFilter);}public void setFrame(int height,int width){this.height = height;this.width = width;}public void setBitmap(Bitmap bitmap){this.bitmap = bitmap;}public void setPercent(int percentnum){if(percentnum <= MaxNum) {this.CurrentNum = percentnum;colorbitmapheight = (int)((double)CurrentNum / (double)MaxNum * bitmap.getHeight() );whitebitmapheight = bitmap.getHeight() - colorbitmapheight;colorheight =(int)((double)colorbitmapheight / (double)bitmap.getHeight() * height );whiteheight = height - colorheight;Log.d("height","bitmap height : " + whitebitmapheight + "r height : " + whiteheight);}}@Overridepublic void draw(Canvas canvas) {if(bitmap != null) {mSrcRect.set(0, 0, bitmap.getWidth(), whitebitmapheight);mSrcRect2.set(0,whitebitmapheight,bitmap.getWidth(),bitmap.getHeight());mDesRect.set(0, 0, width, whiteheight);mDesRect2.set(0, whiteheight,width,height);canvas.drawBitmap(bitmap, mSrcRect, mDesRect, mBPaint);canvas.drawBitmap(bitmap,mSrcRect2,mDesRect2,mPaint);}}@Overridepublic void setAlpha(int alpha) {}@Overridepublic void setColorFilter(ColorFilter colorFilter) {}@Overridepublic int getOpacity() {return PixelFormat.TRANSLUCENT;}
}

我将图片的渲染方法放到了GraphDrawable这个类中，而控制展现的在ImageLoadView这个View中

public class ImageLoadView extends View {private GraphDrawable mDrawable;public ImageLoadView(Context context) {super(context);}public ImageLoadView(Context context, AttributeSet attrs) {super(context, attrs);}public ImageLoadView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}public void setImageResource(int id){mDrawable = new GraphDrawable();Bitmap bitmap = BitmapFactory.decodeResource(getResources(),id);mDrawable.setBitmap(bitmap);invalidate();}public void percent(int percent){mDrawable.setPercent(percent);invalidate();}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);if(mDrawable != null){mDrawable.setFrame(getHeight(),getWidth());mDrawable.draw(canvas);}}
}

效果如下图

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！