关闭

自定义View实现渲染

标签: android自定义View图片渲染PorterDuff
5572人阅读 评论(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

2
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

android-View 的渲染

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

Android 中的view 的渲染

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

UIView 绘制渲染机制

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

从 View 绘制谈性能优化

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

Android View绘制和显示原理简介

现在越来越多的应用开始重视流畅度方面的测试,了解Android应用程序是如何在屏幕上显示的则是基础中的基础,就让我们一起看看小小屏幕中大大的学问。这也是我下篇文章——《Android应用流畅度测试分析...
  • zhangcanyan
  • zhangcanyan
  • 2016-10-14 18:08
  • 2879

Android View绘制流程(看过最详细的一篇)

一、官方文档      先是看了一下官方的文档, 地址是http://developer.android.com/guide/topics/ui/how-android-draws.html...
  • u011052996
  • u011052996
  • 2015-03-31 14:03
  • 2132

自己写的一个Java渲染模板引擎:SimpleV

Java渲染模板框架有很多,著名的有Velocity等。鉴于最近在学习java,所以自己实现了一个。
  • neuxq
  • neuxq
  • 2016-12-30 10:07
  • 1223

xamarin.forms中自定义控件的android实现

之前有介绍了forms和native的交互处理,为了使用第三方的android插件,做了forms到native的跳转,这时会有个性能问题:forms和native的出入口必须为指定的MainActi...
  • rucilengluo
  • rucilengluo
  • 2016-12-06 15:43
  • 1315

UIView 绘制渲染机制

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

用QT的model/view/delegate接口实现自定义的窗口渲染

欢迎提出意见,因为本就是为交流而分享。 qt的model接口(qabstractItemModel)管理的数据抽象来说是节点树,最顶层的根节点可以有N行M列个子item,而每个item又可以有自己...
  • upnow2014
  • upnow2014
  • 2015-03-15 17:12
  • 1397
    个人资料
    • 访问:254658次
    • 积分:2585
    • 等级:
    • 排名:第16307名
    • 原创:34篇
    • 转载:0篇
    • 译文:2篇
    • 评论:67条
    博客专栏
    文章分类
    最新评论