自定义View实现渲染

标签: android 自定义View 图片渲染 PorterDuff
5733人阅读 评论(0) 收藏 举报
分类:

阅读前可以先看Android自定义图表:ChartView

需求:

通过以上例子我们修改测试数据后,拿到的View图像是这样的:

这里写图片描述

而我们要的效果是纵坐标7.45以上与5.97以下的部分为红色,7.45与6.43间为绿色,6.18与6.43之间为黄色,效果如下:

这里写图片描述

有了解自定义View的同学应该清楚从一个点画到另一个点的过程中,通过Paint与canvas.drawLine()绘制一条不同颜色的线是很不容易做到的,如果分成两条不同的线,无疑是更加增大了怎个绘制过程的复杂度。
那么我们如何去做成下图的这种效果。

1、初始化渲染背景的Rect

private Rect mColorBgRect = new Rect(0, mTopPadding, w, mColEndY);

2、渲染背景笔

    // 渲染背景笔
    public void shaderColorBgPaint(Rect rect) {
        LinearGradient linearGradient = new LinearGradient(rect.left, rect.top, rect.left, rect.bottom, getShaderColor(), getShaderPosition(), Shader.TileMode.MIRROR);
        mColorBgPaint.setShader(linearGradient);
    }

    // 将正常理解的颜色@COLORS_SHADER转换为LinearGradient绘制所需的颜色
    public int[] getShaderColor(){
        int[] colors = new int[COLORS_SHADER.length * 2];
        for (int i = 0, len = colors.length; i < len ; i+=2) {
            colors[i] = COLORS_SHADER[i/2];
            colors[i+1] = COLORS_SHADER[i/2];
        }
        return colors;
    }

    // 将正常理解的比例@RATIOS_SHADER转换为LinearGradient绘制所需的比例
    public float[] getShaderPosition() {
        float[] position = new float[COLORS_SHADER.length * 2];
        position[0] = JOIN_SHADER;
        position[1] = RATIOS_SHADER[0] - JOIN_SHADER;
        for (int i = 1, len = RATIOS_SHADER.length; i < len ; i++) {
            position[i*2] = RATIOS_SHADER[i-1] + JOIN_SHADER;
            position[i*2+1] = RATIOS_SHADER[i] - JOIN_SHADER;
        }
        return position;
    }

3、设置setShader()所需要的Shader

mColorBgPaint.setShader(linearGradient);  

4、绘制一个渲染的背景

      // 绘制一个渲染的背景
        Bitmap tagBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
        Canvas tagCanvas = new Canvas(tagBitmap);
        tagCanvas.drawRect(mColorBgRect, mColorBgPaint);

5、绘制显示的数据–这里是曲线

        // 绘制曲线
        Bitmap curveBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
        Canvas curveCanvas = new Canvas(curveBitmap);
        drawCurve(curveCanvas);  //这个方法是具体的绘制,后面会给出源码地址

6、设置合成模式PorterDuff.Mode.DST_IN

        Paint paint = new Paint(); 
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); // 设置合成模式
        tagCanvas.drawBitmap(curveBitmap, mMatrix, paint);

其中具体的PorterDuff.Mode.DST_IN为 取两层绘制交集。显示下层这里就是取下层的背景色。
具体关于setXfermode的了解,可以看以下链接
android PorterDuffXfermode ,PorterDuff.Mode 使用 以及Porter-Duff规则详解

7、绘制渲染后的曲线图

    // 绘制渲染后的曲线图
    private void drawBeautifulCurve(Canvas canvas) {
        if (mCurveBitmap == null) {
            mCurveBitmap = getBeautfulCurve();
        }
        canvas.drawBitmap(mCurveBitmap, 0, 0, null);
    }

通过以上步骤即可完成对图形的渲染绘制,具体的代码已更新至Github中,

本期优化内容:

1、添加点击、滑动事件,通过点击与滑动即可查看当前点的具体信息。
2、优化屏幕适配。
3、点击外区域取消当前信息显示。
4、渲染当前先的绘制颜色。

以下是最新下载链接:

Github下载地址:https://github.com/JackWaiting/ChartView

查看评论

android-View 的渲染

》Android4.4 browser与之前版本最大的不同就是在保持webview控件接口不变的情况下,将内核换成了chromium32。随之,它的硬件加速渲染架构也与之前版本和chromium本身都...
  • ShareUs
  • ShareUs
  • 2016年01月29日 00:01
  • 1319

UIView 绘制渲染机制

前言APP 页面优化 对小编来说一直是难题,最近一直在不断的学习和总结 ,发现APP页面优化说到底离不开 view的绘制和渲染机制。网上有很多精彩的博客,小编借鉴之前N多大牛研究成果,同时结合自己遇到...
  • u014641631
  • u014641631
  • 2016年09月06日 19:09
  • 5019

Android 中的view 的渲染

最近在项目中用到一问题: 检查了很多遍代码逻辑和代码并没有问题,但就是报空指针.终于找到了问题的原因:  view渲染 以上是我默认选中第一个页面 运行之后 报空指针  修改之后:...
  • u012949047
  • u012949047
  • 2016年08月21日 17:45
  • 501

关于view渲染的深入了解

最近在objc上看到的关于底层渲染view的一些知识,下面可以给大家分享下。 首先是图形堆栈,what is 图形堆栈,意思就是说当你的像素映射到屏幕上的时候,后台做了很多的处理,因为像素是由红,绿...
  • zya7016312
  • zya7016312
  • 2015年07月20日 12:05
  • 327

View渲染机制

写在开头 本文章学习了View的渲染机制,了解它对于布局优化会有很大的帮助,可以加深对过度渲染导致的UI卡顿的了解并提出更合适的解决方案。站在前人的肩膀上学习,在此表示感谢。 如何查看过度绘制...
  • say_from_wen
  • say_from_wen
  • 2018年01月19日 09:25
  • 251

注册自定义元素,组件化渲染

前述 从H5开始多了一些header、footer 、article这种标签,这种标签与div 没什么什么差异性,只是它更具有语义性,你看到它的标签名称就能知道这标签是干嘛的. 那web页面语义化对于...
  • long5305350
  • long5305350
  • 2016年11月09日 12:03
  • 300

handsontable自定义渲染

来源:https://www.cnblogs.com/QiuJL/p/6972327.html本文主要介绍在使用Handsontable过程中,对加载的数据进行字体颜色、样式(style)、数据格式化...
  • rentian1
  • rentian1
  • 2018年03月15日 21:41
  • 148

Android性能优化之视图篇(渲染机制)

**本篇重点是——–如何解决过度绘制** 众所周知的Android系统每隔16ms重新绘制一次activity,也就是说你的app必须在16ms内完成屏幕刷新的所有逻辑操作,这样才能达到60帧/s。...
  • Applicaton
  • Applicaton
  • 2016年08月19日 17:14
  • 3577

从 View 绘制谈性能优化

转载请注明出处:http://blog.csdn.net/wl9739/article/details/57416433在开发过程中,往往会听到 “性能优化” 这个概念,这个概念很大,比如网络性能优化...
  • wl9739
  • wl9739
  • 2017年02月26日 16:02
  • 1044

自定义View实现渲染

阅读前可以先看Android自定义图表:ChartView需求:通过以上例子我们修改测试数据后,拿到的View图像是这样的:而我们要的效果是纵坐标7.45以上与5.97以下的部分为红色,7.45与6....
  • zhanggang740
  • zhanggang740
  • 2016年06月29日 17:15
  • 5733
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 26万+
    积分: 2688
    排名: 1万+
    博客专栏
    文章分类
    最新评论