react-native-skia 混合着色器指南：用 Blend 与 ColorShader 组合着色效果

图形学移动开发跨平台UI组件【免费下载链接】react-native-skiaHigh-performance React Native Graphics using Skia项目地址https://gitcode.com/gh_mirrors/re/react-native-skia点击查看免费下载本篇指南基于 react-native-skia 官方文档中的 Blending and Colors 章节讲解两个最基础、最通用的 Shader 声明式组件Blend以指定BlendMode组合多个子着色器与ColorShader用单一颜色填充整个绘制区域。读完本篇你将掌握如何在 JSX 声明树中声明、嵌套这两类着色器理解它们从 React 组件到 SkiaShader.MakeBlend/ 颜色着色器的底层调用链并了解着色器参数如freqX、octaves等在类型系统中的完整约束。Blend 混合着色器用 BlendMode 组合多个 ShaderBlend返回一个将给定子着色器按BlendMode组合起来的 shader。它是实现混合色彩、叠加纹理等视觉效果的声明式入口例如把一张湍流噪声叠加在径向渐变之上。属性说明名称类型说明modeBlendMode混合模式取值见 BlendMode 属性说明childrenReactNode参与混合的子着色器数量不限从类型定义看Blend的 props 由mode枚举与children子节点构成定义在 BlendPropsexport interface BlendProps extends ChildrenProps { mode: SkEnumtypeof BlendMode; }这里SkEnumtypeof BlendMode意味着mode可以直接传字符串如difference类型系统会约束为合法的BlendMode枚举值。示例代码import React from react; import { Canvas, Rect, Turbulence, Skia, Shader, Fill, RadialGradient, Blend, vec } from shopify/react-native-skia; export const BlendDemo () { return ( Canvas style{{ flex: 1 }} Rect x{0} y{0} width{256} height{256} Blend modedifference RadialGradient r{128} c{vec(128, 128)} colors{[blue, yellow]} / Turbulence freqX{0.05} freqY{0.05} octaves{4} / /Blend /Rect /Canvas ); };示例中两个子着色器说明RadialGradient以vec(128, 128)为圆心、半径128的径向渐变颜色从blue过渡到yellowTurbulence湍流噪声着色器。其完整参数约束可在 TurbulenceProps 中确认freqX、freqY噪声频率、octaves叠加层数示例中为 4、seed随机种子、tileWidth/tileHeight平铺尺寸。该示例的渲染结果为蓝黄径向渐变与湍流噪声按difference差值混合后的图像即上文配图所示的多彩纹理。底层实现从 JSX 到 Skia.Shader.MakeBlendBlend组件本体非常薄仅负责把 props 透传给底层声明节点 skBlendexport const Blend (props: SkiaPropsBlendProps) { return skBlend {...props} /; };skBlend是 sksg 声明树SkSG DOM中的一个固有元素在 Elements.tsx 中注册为skBlend: SkiaPropsBlendProps。真正的着色器组合发生在录制阶段——当声明树被录制为 Skia 命令时declareBlend 会把Blend下累积的所有子 shader 取出并用原生 API 组合const declareBlend (ctx: DrawingContext, props: BlendProps) { worklet; const blend BlendMode[enumKey(props.mode as BlendProps[mode])]; const shaders ctx.shaders.splice(0, ctx.shaders.length); if (shaders.length 0) { const composer ctx.Skia.Shader.MakeBlend.bind(ctx.Skia.Shader, blend); ctx.shaders.push(composeDeclarations(shaders, composer)); } };从源码结构看这段逻辑说明了三点mode字符串通过enumKey转换为BlendMode枚举子着色器按声明顺序从上下文 shader 栈中弹出最终调用Skia.Shader.MakeBlend(mode, ...shaders)完成组合。因此子着色器的书写顺序会影响混合结果先声明的作为 source 侧参与混合这一点在调整mode效果时值得留意。ColorShader 颜色着色器纯色填充整块区域ColorShader返回一个具有给定颜色的着色器是最简单的 shader 形式适合纯色背景、占位填充等场景。属性说明名称类型说明colorstring颜色值CSS 颜色字符串或色值对应类型定义为 ColorPropsexport interface ColorProps { color: Color; }示例代码import React from react; import { Canvas, Skia, Fill, ColorShader } from shopify/react-native-skia; export const BlendDemo () { return ( Canvas style{{ flex: 1 }} Fill ColorShader colorlightBlue / /Fill /Canvas ); };Fill是铺满画布的绘制节点ColorShader将其着色为lightBlue渲染结果为一块纯色区域同样ColorShader组件只是一个对声明节点 skColorShader 的薄封装在 sksg 元素表中注册于 Elements.tsx录制时按NodeType.ColorShader分发到 Shaders.ts 命令处理器。小结Blend用于组合任意数量的子着色器mode取BlendMode枚举值子着色器顺序影响混合结果ColorShader是最简着色器仅需一个color属性即可为绘制区域提供纯色着色两者都遵循JSX 组件 → sksg 声明节点 → 录制为 Skia 命令的统一管线底层分别落到Skia.Shader.MakeBlend与颜色着色器的创建路径更多着色器类型如LinearGradient、RadialGradient、SweepGradient、Turbulence、ImageShader的属性定义集中在 Shaders.ts可按同样模式组合使用。赞分享图形学移动开发跨平台UI组件【免费下载链接】react-native-skiaHigh-performance React Native Graphics using Skia项目地址https://gitcode.com/gh_mirrors/re/react-native-skia点击查看免费下载相关推荐React Native Skia着色器语言终极指南7天掌握自定义图形效果编程React Native Skia着色器语言终极指南7天掌握自定义图形效果编程 想要在React Native应用中创建惊艳的视觉效果吗 React N图形学移动开发跨平台UI组件RetroArch高级着色器技术HLSL与GLSL混合使用RetroArch高级着色器技术HLSL与GLSL混合使用 引言着色器技术在RetroArch中的核心地位 着色器Shader是RetroArch实现高游戏开发跨平台音视频如何快速上手AionUi5步完成本地AI工具图形化配置如何快速上手AionUi5步完成本地AI工具图形化配置 AionUi是一款免费、本地、开源的GUI应用程序专为Gemini CLI、Claude Code、人工智能AI 应用大模型AI Agent交互助手前端上一篇终极WiFi二维码卡片生成指南快速创建专业WiFi连接卡片的完整方法下一篇Gumbo-Parser发布检查清单确保版本质量的终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考