鸿蒙学习笔记——Shader(着色器)

兄弟们的 PTSD 好点没？症状严重的不建议往下看~点个赞就可以走了 🤡🤡🤡

为什么开头要聊这个呢？我 CN Dota 老粉了呀。今年 TI 前 LGD 的状态，和最后的结果真的很失望。国庆前还刚拿了个小比赛冠军。对手还是同一个对手~～

国庆的时候，更了个文 HarmoneyOS 国庆节国旗头像怎么画？ 去看文章 juejin 或 Github。文中用到了 LinearShader，即线性着色器。当时一知半解的写完了，发了文章。经过学习和demo，就有了这篇文章，记录下这几个 Shader 的使用。

下面是正文内容

Shader 着色器

LinearShader 线性着色器

可以通过该类定义一个线性着色器。

LinearShader linearShader = new LinearShader(
                    new Point[]{new Point(0, 0), new Point(component.getWidth() / 2f, 0)}, 
                    new float[]{0f, 1f},
                    new Color[]{Color.RED, Color.TRANSPARENT}, mTileMode 
            );

上述代码，定义了一个水平方向，component的一半宽的着色区域，从左向右绘制红色->透明。

预览

CLAMP_TILEMODE	MIRROR_TILEMODE	REPEAT_TILEMODE

SweepShader

扫描着色器。想象一下摊煎饼那个动作，顺时针刮一圈。TileMode 不影响该着色器。

// 第一、二个参数为圆心坐标
SweepShader sweepShader = new SweepShader(component.getWidth() / 2f,
                    component.getHeight() / 2f,
                    new Color[]{Color.RED, Color.TRANSPARENT},
                    new float[]{0f, 1f}
            );

预览

RadialShader径向着色器

该着色器沿着半径方向，从圆心向外着色。

// 第一个参数为圆心坐标，第二个参数为半径
RadialShader radialShader = new RadialShader(
                    new Point(component.getWidth() / 2f, component.getHeight() / 2f),
                    component.getHeight() / 2f, new float[]{0f, 1f},
                    new Color[]{new Color(Color.rgb(0xFF, 0xFF, 0x01)), Color.TRANSPARENT},
                    mTileMode
            );

预览

CLAMP_TILEMODE	MIRROR_TILEMODE	REPEAT_TILEMODE

PixelMapShader 位图着色器

使用位图作为着色器的内容。

PixelMap pixelMaps = PixelMapUtils.createPixelMapByResId(ResourceTable.Media_lgd, getContext()).get();
PixelMapHolder pixelMapHolder = new PixelMapHolder(pixelMaps);
// 第二、第三个参数分别为水平、垂直方向的 TileMode。可以分别指定，不要求一致，这里写成一样纯粹是因为懒
PixelMapShader pixelMapShader = new PixelMapShader(pixelMapHolder, mTileMode, mTileMode);

看这个 LGD 的小图标在小图标右边贴边的位置是几个像素的红色，这也是为什么下面预览中 CLAMP_MODE 中右边会显示为一条线。

预览

CLAMP_TILEMODE	MIRROR_TILEMODE	REPEAT_TILEMODE

GroupShader 组合着色器

随意组合两个着色器。根据参数三定义的 BlendMode 处理两种着色器的效果

GroupShader groupShader = new GroupShader(sweepShader, radialShader, BlendMode.DST_IN);

留意第三个参数传入了一个 BlendMode。相信做 Android 的都不陌生了。带个图，不赘述 |

预览

CLAMP_TILEMODE	MIRROR_TILEMODE	REPEAT_TILEMODE

Demo 中结合了 SweepShader 和 RadialShader ，

newStops（newPositions） & newColors

前三个着色器构造方法中，都传入了一个 float[] 和 Color[] 的参数。

newStops（newPositions）

float 数组定义newColors中定义的着色器颜色（ShaderColor）在着色器中的位置。该参数可以为 null，这样定义的 newColors 将均匀绘制。

// API 里面一样的功能，整出来两名字了。❌差评

newColors

Color 数组定义着色器颜色

TileMode

去看文章 HarmoneyOS 国庆节国旗头像怎么画？ juejin 或 Github。里面提到了这几个模式的使用

DEMO 地址

AvatarDemoFor101

上述所有代码均在 lice/DifferentShaderAbilitySlice.java 文件中.

Last

写得不好，看个热闹就行，真要学技术还是得看官方文档（// 官网看着也挺难受的）。

工友们。共勉

另外没赶上头七发这篇文章。没能给看文章的兄弟们续上buff，遗憾了。🤕