iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Android高级渲染,画笔渲染通过paint.setShader
  • 949
分享到

Android高级渲染,画笔渲染通过paint.setShader

画笔Android 2022-06-06 13:06:11 949人浏览 泡泡鱼
摘要

1. 基础了解:    Android高级渲染,图层渲染  渲染:Shader     BitmapShader        图形渲染     LinearGradient

1. 基础了解:   

Android高级渲染,图层渲染
 渲染:Shader
    BitmapShader        图形渲染
    LinearGradient   线性渲染
    RadialGradient    环形渲染
    SweepGradient   梯度渲染(扫描渲染)
    ComposeShader   组合渲染
    paint.setShader(bitmapShader);  效果展示,设置画笔渲染,画笔在图层上渲染,图片未摆满控件,摆放模式

1.xml布局:



 2. MyView 控件代码: 
         * 图片平铺模式:
         * TileMode.CLAMP: 图片已经方向,拉伸最后一个像素去平铺空余地方
         * TileMode.MIRROR: 通过翻转铺满剩下地方
         *  TileMode.REPEAT: 不断重复图片填充画面
        bitmapShader = new BitmapShader(bitmap, TileMode.REPEAT, TileMode.REPEAT);
        paint.setShader(bitmapShader);


package com.denganzhi.myapplication;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.graphics.Shader.TileMode;

public class MyView extends View {
    Bitmap bitmap=null;
    Paint paint=null;
    public MyView(Context context) {
        super(context);
    }
    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
          bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.avatar3);
          paint=new Paint();
    }
    private BitmapShader bitmapShader;
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        bitmapShader = new BitmapShader(bitmap, TileMode.REPEAT, TileMode.REPEAT);
        paint.setShader(bitmapShader);
        canvas.drawRect(new Rect(0,0,400,400),paint);
        // 绘制在图层去,不会影响空间区域
       // canvas.drawBitmap(bitmap,0,0,paint);
    }
}

3.效果图:

 2.实现通过paint.setShader 绘制圆角图片

原理:paint.setShader把图片绘制在图层中,然后在用canvas在上面绘制一个圆

xml布局:


  
    

Java代码实现: 


package com.denganzhi.myapplication;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.graphics.Shader.TileMode;

public class MyView extends View {
    Bitmap bitmap=null;
    Paint paint=null;
    public MyView(Context context) {
        super(context);
    }
    private int width;
    private int height;
    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
          bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bg);
          paint=new Paint();
        width = bitmap.getWidth();
        height = bitmap.getHeight();
    }
    private BitmapShader bitmapShader;
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        bitmapShader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
        paint.setShader(bitmapShader);
      //  canvas.drawRect(new Rect(0,0,400,400),paint);
        // 这里必须要宽、高小的值来计算半径
        if(height>width){
            canvas.drawCircle(width/2,width/2, width/2,paint);
        }else{
            canvas.drawCircle(height/2,height/2, height/2,paint);
        }
        // 绘制在图层去,不会影响空间区域
       // canvas.drawBitmap(bitmap,0,0,paint);
    }
}

效果图:

  3.LinearGradient: 线性渐变

基本使用1:


 
    

 Java代码使用:


package com.denganzhi.myapplication;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Shader;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

public class LinnearView extends View  {
    Paint paint=null;
    public LinnearView(Context context) {
        super(context);
    }
    public LinnearView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
    }
    int[] colors={Color.RED,Color.BLACK,Color.YELLOW};
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
         LinearGradient linearGradient=new LinearGradient(0,100.0f,200.0f,100.0f,colors,null, Shader.TileMode.CLAMP);
         paint.setShader(linearGradient);
         canvas.drawRect(new Rect(0,0,400,200),paint);
    }
}

 效果:

   4.实现文字: 使用线性渐变实现文字渐变功能

实现原理:在歌词上2个字节的位置设置渐变,文字与渐变进行融合,使用setTranslate 改变渐变位置

4. 1xml代码布局:



 4.2. Java 代码布局:


package com.denganzhi.myapplication;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Shader;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.TextView;

public class MyLinearView extends TextView {
    Paint paint=null;
    LinearGradient linearGradient=null;
    Matrix matrix=null;
    float cureentgriendSize=0 ;  //等于2个文字大小
    public MyLinearView(Context context) {
        super(context);
    }
    public MyLinearView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }
    // 试图显示的时候,调用一次
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 这里必须要getPaint
        paint = getPaint();
        //GradientSize=两个文字的大小
        String text = getText().toString();
        float textWidth = paint.measureText(text);
        int GradientSize =(int) (3*textWidth/text.length());
        // 开始位置向左偏移3个位置渐变
        linearGradient = new LinearGradient(-GradientSize, 0, 0, 0, new int[]{0x22ffffff,0xffffffff,0x22ffffff}, new float[]{0,0.5f,1}, Shader.TileMode.CLAMP);//边缘融合
        paint.setShader(linearGradient);
        matrix = new Matrix();
    //    postInvalidate();
    }
    private float translateX;
    private float deltaX = 20;
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float textWidth = getPaint().measureText(getText().toString());
        translateX += deltaX;  //20
        if(translateX > textWidth + 1|| translateX < 1){
            deltaX = -deltaX;
        }
//		matrix.setScale(sx, sy)
        // 设置 渲染切换
        matrix.setTranslate(translateX, 0);
        linearGradient.setLocalMatrix(matrix);
        postInvalidateDelayed(50);
    }
}

4.3. 显示效果图: 


作者:小置同学


--结束END--

本文标题: Android高级渲染,画笔渲染通过paint.setShader

本文链接: https://www.lsjlt.com/news/29126.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 3D高级渲染器Artlantis 2020 Mac
    Artlantis Studio  2020 for Mac是Mac平台上一款专业的3D高级渲染器,artlantis mac破解版专为设计师和建筑师所设计,能够为您快速创建出VR全景,动画和3D透视图等效果。artlantis ...
    99+
    2023-06-05
  • C#中wpf如何通过HwndHost渲染视频
    这篇文章主要为大家展示了“C#中wpf如何通过HwndHost渲染视频”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“C#中wpf如何通过HwndHost渲染视频”这篇文章吧。一、如何实现通过继承...
    99+
    2023-06-25
  • Vue如何通过JSX动态渲染组件
    这篇文章主要介绍“Vue如何通过JSX动态渲染组件”,在日常操作中,相信很多人在Vue如何通过JSX动态渲染组件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue如何通过JSX动态渲染组件”的疑惑有所帮助!...
    99+
    2023-07-04
  • C# wpf 通过HwndHost渲染视频的实现方法
    目录前言一、如何实现二、使用方式三、示例总结前言 日常开发中,特别是音视频开发,需要在界面上渲染视频,比如制作一个播放器、或者视频编辑工具、以及视频会议客户端。通常拿到的是像素格式数...
    99+
    2024-04-02
  • 聊聊Vue怎么通过JSX动态渲染组件
    3.2 基本用法3.2.1 函数式组件我们在组件中,也可以嵌入ButtonCounter组件。const ButtonCounter = { name: "button-counter", props: [&qu...
    99+
    2023-05-14
    组件 JSX Vue vue3
  • Vue查询数据并通过bootstarp table渲染数据
    目录需求1.需求分析和步骤:2. 更新问题:3.columns属性需求 把页面进行改造把apptoken,appkey列隐藏,并且更改该列为企业秘钥,列下显示查看公司秘钥 如图: ...
    99+
    2024-04-02
  • Vue怎么查询数据并通过bootstarp table渲染数据
    本文小编为大家详细介绍“Vue怎么查询数据并通过bootstarp table渲染数据”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue怎么查询数据并通过bootstarp table渲染数据”文章能帮助大家解决疑惑...
    99+
    2023-06-30
  • 如何通过php函数解决页面渲染慢的问题?
    在开发网页应用的过程中,页面渲染慢是一个常见的问题。用户访问一个网页时,如果页面渲染时间过长,可能会导致用户的不耐烦,甚至放弃访问。因此,加快页面渲染速度对于提高用户体验和页面性能至关重要。PHP 是一种广泛使用的服务器端编程语言,它拥有丰...
    99+
    2023-10-21
    PHP函数 页面渲染
  • 如何通过nodejs服务器读取HTML文件渲染到页面
    这篇文章主要介绍了如何通过nodejs服务器读取HTML文件渲染到页面,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1.分别简单实现三个备用...
    99+
    2024-04-02
  • express框架通过ejs模板渲染输出页面实例分析
    1、前言   上一节的get请求中,处理函数通过res.send返回了一段html代码,这让我们很兴奋。我们终于可以给用户返回html页面了。 &ems...
    99+
    2023-05-20
    express ejs node.js
  • Element通过v-for循环渲染的form表单校验的实现
    目录普通的form表单校验v-for 循坏的表单校验实现的代码普通的form表单校验 日常业务开发中,对于中后台管理系统,form表单校验是一个很常见的问题。 查阅Element官方...
    99+
    2024-04-02
  • Vue通过字符串关键字符实现动态渲染input输入框
    目录问题描述{ xxx } 标识字符渲染Dom组件设计组件开发重点输入完成事件动态编辑文本今天做一个简单的demo,就是有一个字符串,字符串里面有标识符,前端检测到标识符之后,需要将...
    99+
    2022-12-08
    Vue动态渲染input输入框 Vue 渲染input输入框 Vue input输入框
  • 如何通过递归方法实现用json-diff渲染json字符串对比结果
    目录前言分析json-diff的结构用递归方法拼接json字符串字符串修改非数组对象修改数组对象修改总结前言 上一篇,对比了js-diff和json-diff,发现js-diff对比...
    99+
    2022-12-08
    json-diff渲染json字符串 json diff
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作