美文网首页高级UI自定义控件Android网易课
Paint方法总结(二):着色渲染器Shader

Paint方法总结(二):着色渲染器Shader

作者: Fizzzzer | 来源:发表于2019-08-08 23:50 被阅读1次

    setShader(Shader shader):设置着色器,对图层进行渲染,Shader一共有五个子类

    • 1、LinearGradient 线性渲染器

       /**
           * Create a shader that draws a linear gradient along a line.
        *
        * @param x0           The x-coordinate for the start of the gradient line
        * @param y0           The y-coordinate for the start of the gradient line
        * @param x1           The x-coordinate for the end of the gradient line
        * @param y1           The y-coordinate for the end of the gradient line
        * @param colors       The colors to be distributed along the gradient line
        * @param positions    May be null. The relative positions [0..1] of
        *                     each corresponding color in the colors array. If this is null,
        *                     the the colors are distributed evenly along the gradient line.
        * @param tile         The Shader tiling mode
       */
       public LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[],
               @Nullable float positions[], @NonNull TileMode tile)
      

      参数说明

    x0,y0,x1,y1:渐变的起始点位置

    int[] colors:需要渐变的颜色数组

    TileMode tile:着色规则(稍后的位图着色规则中做详细说明)

    float[] position:需要渐变的位置数组,范围0-1。这里position的个数和color的个数要相同,不然系统会报出异常,使用的时候需要注意一下

    效果示例图:

    null.png position.png
    • 2、RadialGradient:环形渲染

        /**
         * Create a shader that draws a radial gradient given the center and radius.
         *
         * @param centerX  The x-coordinate of the center of the radius
         * @param centerY  The y-coordinate of the center of the radius
         * @param radius   Must be positive. The radius of the circle for this gradient.
         * @param colors   The colors to be distributed between the center and edge of the circle
         * @param stops    May be <code>null</code>. Valid values are between <code>0.0f</code> and
         *                 <code>1.0f</code>. The relative position of each corresponding color in
         *                 the colors array. If <code>null</code>, colors are distributed evenly
         *                 between the center and edge of the circle.
         * @param tileMode The Shader tiling mode
         */
        public RadialGradient(float centerX, float centerY, float radius,
                @NonNull @ColorInt int colors[], @Nullable float stops[],
                @NonNull TileMode tileMode)
      

      参数说明

      centerX、centerY:辐射中心的坐标

      radius:辐射半径

      colors[]:渐变颜色数组

      stops:同线性变换,这里stop数组表示一个渐变位置

      tileMode:末尾着色规则(同上,稍后做差异说明)

      效果示例图如下:

      null.png position.png
    • 3、SweepGradient:扫描渲染

        /**
             * A Shader that draws a sweep gradient around a center point.
             *
             * @param cx       The x-coordinate of the center
             * @param cy       The y-coordinate of the center
             * @param colors   The colors to be distributed between around the center.
             *                 There must be at least 2 colors in the array.
             * @param positions May be NULL. The relative position of
             *                 each corresponding color in the colors array, beginning
             *                 with 0 and ending with 1.0. If the values are not
             *                 monotonic, the drawing may produce unexpected results.
             *                 If positions is NULL, then the colors are automatically
             *                 spaced evenly.
             */
            public SweepGradient(float cx, float cy,
                    @NonNull @ColorInt int colors[], @Nullable float positions[])
      

      参数说明

      cx、cy:扫描中心点坐标

      colors:渐变颜色数组

      position渐变颜色位置

      说明一下:颜色渐变的方向是按照顺时针的方向进行渐变的

      效果图如下:

      sweep.png
    • 4、BitmapShader:位图渲染

        /**
             * Call this to create a new shader that will draw with a bitmap.
             *
             * @param bitmap The bitmap to use inside the shader
             * @param tileX The tiling mode for x to draw the bitmap in.
             * @param tileY The tiling mode for y to draw the bitmap in.
             */
            public BitmapShader(@NonNull Bitmap bitmap, @NonNull TileMode tileX, @NonNull TileMode tileY)
      

      参数说明

      bitmap:需要渲染的目标位图

      tileX:横向剩余方向的着色规则;类型为TileMode

      tileY:纵向剩余方向的着色规则,类型为TileMode

      TileMode参数说明:

      如果控件区域大小大于指定的渲染区域,那么这个参数指定未渲染到的图层的绘制方式。

      主要有三种方式;

      • TileMode.CLAMP:表示超过渲染区域未渲染的地方以渲染的最后一个像素色值进行渲染

        效果示例图:

      clamp.png
      • TileMode.REPEAT:表示超过渲染区域未渲染的地方以渲染的地方为样本进行重复渲染

        效果示例图

        repeat.png
      • TileMode.MIRROR:表示超过渲染区域未渲染的地方以渲染的地方为样本来进行镜像渲染

        效果示例图

        mirror.png

        当然也可以对tileX和tileY分别指定不同的TileMode,这里就不放示例图了,大家可以自己去实践试一试

    • 5、ComposeShader:组合渲染

        /**
             * Create a new compose shader, given shaders A, B, and a combining PorterDuff mode.
             * When the mode is applied, it will be given the result from shader A as its
             * "dst", and the result from shader B as its "src".
             *
             * @param shaderA  The colors from this shader are seen as the "dst" by the mode
             * @param shaderB  The colors from this shader are seen as the "src" by the mode
             * @param mode     The PorterDuff mode that combines the colors from the two shaders.
            */
            public ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB,
                    @NonNull PorterDuff.Mode mode)
      

      参数说明

      shaderA、shaderB:需要进行组合的渲染器A、B

      mode:两个渲染器进行组合的模式,这个组合模式设计各式各样的算法,这个在后面做专门的说明

      这里先看一下组合后的效果,用前面做的线性渲染器和位图渲染器来做一个示例

      示例代码:

        ComposeShader composeShader = new ComposeShader(getLiearGradient(),getBitmapShader(bitmap), PorterDuff.Mode.MULTIPLY);
      

      示例效果:

      compose.png

    相关文章

      网友评论

        本文标题:Paint方法总结(二):着色渲染器Shader

        本文链接:https://www.haomeiwen.com/subject/bnfqjctx.html