Paint升級(jí)之Shader

渲染器

Shader.TileMode 三個(gè)類型
1.CLAMP
當(dāng)填充區(qū)域大于填充物，會(huì)以填充物體最后一個(gè)像素水平或者垂直方向上的延申
2.REPEAT
以填充物水平和垂直方向上的復(fù)制平鋪填充
3.MIRROR（鏡像）
以填充物水平或者垂直方向上的翻轉(zhuǎn)平鋪填充

1.效果

如下圖：分別是 1：線性 2：環(huán)形 3：掃描 4：位圖 5：組合

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)) //環(huán)形渲染器
        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 表示渲染的起點(diǎn)
         * x1,y1 表示渲染的終點(diǎn)
         * colors[]表示渲染顏色的集合
         * positions[]對(duì)應(yīng)顏色集合每個(gè)顏色從哪個(gè)位置渲染(按照百分比的 ositions[0...1])
         * tile 端點(diǎn)范圍之外的著色規(guī)則
         */
        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.環(huán)形渲染（RadialGradient）
    fun RadialGradient(canvas: Canvas?) {
        /**
         * 環(huán)形渲染
         * RadialGradient(float centerX, float centerY, float radius,int[] colors,float[] positions,TileMode tile)
         * centerX,centerY 表示渲染的中心
         * radius 表示環(huán)形渲染半徑
         * colors[]表示渲染顏色的集合
         * positions[]對(duì)應(yīng)顏色集合每個(gè)顏色從哪個(gè)位置渲染(按照百分比的 ositions[0...1])
         * tile 端點(diǎn)范圍之外的著色規(guī)則
         */
        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[]對(duì)應(yīng)顏色集合每個(gè)顏色從哪個(gè)位置渲染(按照百分比的 ositions[0...1])
         * tile 端點(diǎn)范圍之外的著色規(guī)則
         */
        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 端點(diǎn)范圍之外的著色規(guī)則
         * tileY 端點(diǎn)范圍之外的著色規(guī)則·
         */
        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 表示渲染的起點(diǎn)
         * x1,y1 表示渲染的終點(diǎn)
         * colors[]表示渲染顏色的集合
         * positions[]對(duì)應(yīng)顏色集合每個(gè)顏色從哪個(gè)位置渲染(按照百分比的 ositions[0...1])
         * tile 端點(diǎn)范圍之外的著色規(guī)則
         */
        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環(huán)形渲染
     */
    fun RadialGradient(canvas: Canvas?) {
        /*
         *
         * RadialGradient(float centerX, float centerY, float radius,int[] colors,float[] positions,TileMode tile)
         * centerX,centerY 表示渲染的中心
         * radius 表示環(huán)形渲染半徑
         * colors[]表示渲染顏色的集合
         * positions[]對(duì)應(yīng)顏色集合每個(gè)顏色從哪個(gè)位置渲染(按照百分比的 ositions[0...1])
         * tile 端點(diǎn)范圍之外的著色規(guī)則
         */
        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[]對(duì)應(yīng)顏色集合每個(gè)顏色從哪個(gè)位置渲染(按照百分比的 ositions[0...1])
         * tile 端點(diǎn)范圍之外的著色規(guī)則
         */
        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 端點(diǎn)范圍之外的著色規(guī)則
         * tileY 端點(diǎn)范圍之外的著色規(guī)則
         */
        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)
    }

    /**
     * 渲染器 簡(jiǎn)潔版
     */
    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)
    }


}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容