Paint升级之Shader

渲染器

Shader.TileMode 三个类型
1.CLAMP
当填充区域大于填充物,会以填充物体最后一个像素水平或者垂直方向上的延申
2.REPEAT
以填充物水平和垂直方向上的复制平铺填充
3.MIRROR(镜像)
以填充物水平或者垂直方向上的翻转平铺填充

1.效果

如下图:分别是 1:线性 2:环形 3:扫描 4:位图 5:组合

Paint升级之Shader_第1张图片
0001.jpg
    override fun draw(canvas: Canvas?) {
        super.draw(canvas)
        setShader(canvas)
    }
    fun setShader(canvas: Canvas?){
        canvas?.drawLine(50F,50F,600F,50F,mPaint)
        mPaint.setShader(SweepGradient(200F, 200F, Color.RED, Color.YELLOW)) //环形渲染器
        canvas?.drawLine(50F,150F,600F,150F,mPaint)
    }
2.线性渲染(LinearGradient)
    fun LinearGradient(canvas: Canvas?) {
        /**
         * LinearGradient(float x0, float y0, float x1, float y1,int[] colors,float[] positions,TileMode tile)
         * x0,y0 表示渲染的起点
         * x1,y1 表示渲染的终点
         * colors[]表示渲染颜色的集合
         * positions[]对应颜色集合每个颜色从哪个位置渲染(按照百分比的 ositions[0...1])
         * tile 端点范围之外的着色规则
         */
        mPaint.setShader(LinearGradient(0F,0F,500F,500F, intArrayOf(Color.BLUE,Color.RED,Color.YELLOW),
            floatArrayOf(0F,0.5F,1F),Shader.TileMode.CLAMP))
        canvas?.drawRect(0F,0F,500F,500F,mPaint)
    }
3.环形渲染(RadialGradient)
    fun RadialGradient(canvas: Canvas?) {
        /**
         * 环形渲染
         * RadialGradient(float centerX, float centerY, float radius,int[] colors,float[] positions,TileMode tile)
         * centerX,centerY 表示渲染的中心
         * radius 表示环形渲染半径
         * colors[]表示渲染颜色的集合
         * positions[]对应颜色集合每个颜色从哪个位置渲染(按照百分比的 ositions[0...1])
         * tile 端点范围之外的着色规则
         */
        mPaint.setShader(RadialGradient(250F,250F,250F, intArrayOf(Color.BLUE,Color.RED,Color.YELLOW),
            floatArrayOf(0F,0.5F,1F),Shader.TileMode.MIRROR))
        canvas?.drawRect(0F,0F,500F,500F,mPaint)
    }
4.扫描渲染(SweepGradient)
    fun SweepGradient(canvas: Canvas?) {
        /*
         *
         * RadialGradient(float centerX, float centerY, float radius,int[] colors,float[] positions,TileMode tile)
         * centerX,centerY 表示渲染的中心
         * colors[]表示渲染颜色的集合
         * positions[]对应颜色集合每个颜色从哪个位置渲染(按照百分比的 ositions[0...1])
         * tile 端点范围之外的着色规则
         */
        mPaint.setShader(
            SweepGradient(
                250F, 250F, intArrayOf(Color.BLUE, Color.RED, Color.YELLOW),
                floatArrayOf(0F, 0.5F, 1F)
            )
        )
        canvas?.drawRect(0F, 0F, 500F, 500F, mPaint)
    }
4.位图渲染(BitmapShader)
    fun BitmapShader(canvas: Canvas?) {
        /*
         *  BitmapShader(@NonNull Bitmap bitmap, @NonNull TileMode tileX, @NonNull TileMode tileY)
         * bitmap 渲染图片
         * tileX 端点范围之外的着色规则
         * tileY 端点范围之外的着色规则·
         */
        mPaint.setShader(BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR))
        canvas?.drawRect(0F, 0F, 500F, 500F, mPaint)
    }
5.组合渲染(ComposeShader)

ComposeShader 例如 LinearGradient+BitmapGradient

fun ComposeShader(canvas: Canvas?) {
        /*
         * ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB, @NonNull PorterDuff.Mode mode)
         * shaderA 渲染器A
         * shaderB 渲染器B
         * mode 渲染模式
         */
        var mRadialGradient = RadialGradient(
            250F, 250F, 250F, intArrayOf(Color.BLUE, Color.RED, Color.YELLOW),floatArrayOf(0F, 0.5F, 1F), Shader.TileMode.MIRROR )
        var mBitmapShader = BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR)
        mPaint.setShader(ComposeShader(mBitmapShader,  mRadialGradient, PorterDuff.Mode.LIGHTEN))
        canvas?.drawRect(0F, 0F, 500F, 500F, mPaint)
    }

示例代码


class ShaderExample:View {
    constructor(context: Context?) : this(context,null)
    constructor(context: Context?, attrs: AttributeSet?) : this(context, attrs,0)
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    )

    var mPaint = Paint()
    lateinit var mBitmap: Bitmap

    init {
        mPaint.setARGB(255, 255, 0, 0)
        mPaint.isAntiAlias = true //是否抗锯齿
        mPaint.style = Paint.Style.FILL // 描边填充效果 1.STROKE 描边 2.FIll 填充 3.FILL_AND_STROKE 描边+填充
        mPaint.strokeWidth = 50F // 描边宽度
        mBitmap = BitmapFactory.decodeResource(context.resources, R.mipmap.img_01)
    }

    override fun draw(canvas: Canvas?) {
        super.draw(canvas)
        LinearGradient(canvas)
        RadialGradient(canvas)
        SweepGradient(canvas)
        BitmapShader(canvas)
        ComposeShader(canvas)
    }

    /**
     * 1线性渲染
     */
    fun LinearGradient(canvas: Canvas?) {
        /*
         * LinearGradient(float x0, float y0, float x1, float y1,int[] colors,float[] positions,TileMode tile)
         * x0,y0 表示渲染的起点
         * x1,y1 表示渲染的终点
         * colors[]表示渲染颜色的集合
         * positions[]对应颜色集合每个颜色从哪个位置渲染(按照百分比的 ositions[0...1])
         * tile 端点范围之外的着色规则
         */
        mPaint.setShader(
            LinearGradient(
                0F, 0F, 500F, 500F, intArrayOf(Color.BLUE, Color.RED, Color.YELLOW),
                floatArrayOf(0F, 0.5F, 1F), Shader.TileMode.CLAMP
            )
        )
        canvas?.drawRect(0F, 0F, 500F, 500F, mPaint)
    }

    /**
     *2环形渲染
     */
    fun RadialGradient(canvas: Canvas?) {
        /*
         *
         * RadialGradient(float centerX, float centerY, float radius,int[] colors,float[] positions,TileMode tile)
         * centerX,centerY 表示渲染的中心
         * radius 表示环形渲染半径
         * colors[]表示渲染颜色的集合
         * positions[]对应颜色集合每个颜色从哪个位置渲染(按照百分比的 ositions[0...1])
         * tile 端点范围之外的着色规则
         */
        mPaint.setShader(
            RadialGradient(
                750F, 250F, 250F, intArrayOf(Color.BLUE, Color.RED, Color.YELLOW),
                floatArrayOf(0F, 0.5F, 1F), Shader.TileMode.MIRROR
            )
        )
        canvas?.drawRect(500F, 0F, 1000F, 500F, mPaint)
    }

    /**
     * 3扫描渲染
     */
    fun SweepGradient(canvas: Canvas?) {
        /*
         *
         * RadialGradient(float centerX, float centerY, float radius,int[] colors,float[] positions,TileMode tile)
         * centerX,centerY 表示渲染的中心
         * colors[]表示渲染颜色的集合
         * positions[]对应颜色集合每个颜色从哪个位置渲染(按照百分比的 ositions[0...1])
         * tile 端点范围之外的着色规则
         */
        mPaint.setShader(
            SweepGradient(
                250F, 750F, intArrayOf(Color.BLUE, Color.RED, Color.YELLOW),
                floatArrayOf(0F, 0.5F, 1F)
            )
        )
        canvas?.drawRect(0F, 500F, 500F, 1000F, mPaint)
    }

    /**
     *4位图渲染
     */
    fun BitmapShader(canvas: Canvas?) {
        /*
         *  BitmapShader(@NonNull Bitmap bitmap, @NonNull TileMode tileX, @NonNull TileMode tileY)
         * bitmap 渲染图片
         * tileX 端点范围之外的着色规则
         * tileY 端点范围之外的着色规则
         */
        mPaint.setShader(BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR))
        canvas?.drawRect(500F, 500F, 1000F, 1000F, mPaint)
    }

    /**
     *5组合渲染
     */
    fun ComposeShader(canvas: Canvas?) {
        /*
         * ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB, @NonNull PorterDuff.Mode mode)
         * shaderA 渲染器A
         * shaderB 渲染器B
         * mode 渲染模式
         */
        var mRadialGradient = RadialGradient(
            250F, 1250F, 250F, intArrayOf(Color.BLUE, Color.RED, Color.YELLOW),floatArrayOf(0F, 0.5F, 1F), Shader.TileMode.MIRROR )
        var mBitmapShader = BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR)
        mPaint.setShader(ComposeShader(mBitmapShader,  mRadialGradient, PorterDuff.Mode.LIGHTEN))
        canvas?.drawRect(0F, 1000F, 500F, 1500F, mPaint)
    }

    /**
     * 渲染器 简洁版
     */
    fun setShader(canvas: Canvas?) {
        canvas?.drawLine(50F, 50F, 600F, 50F, mPaint)
        mPaint.setShader(SweepGradient(200F, 200F, Color.RED, Color.YELLOW)) //渲染器
        canvas?.drawLine(50F, 150F, 600F, 150F, mPaint)
    }


}

你可能感兴趣的:(Paint升级之Shader)