React Native Skia 位移贴图（DisplacementMap）图像滤镜完整指南：原理、参数与源码解析

图形学移动开发跨平台UI组件【免费下载链接】react-native-skiaHigh-performance React Native Graphics using Skia项目地址https://gitcode.com/gh_mirrors/re/react-native-skia点击查看免费下载DisplacementMap是 React Native Skia 提供的图像滤镜组件它借用子图像通常是噪声着色器的像素通道值对目标图像进行空间扭曲实现水波、涟漪、液化等变形效果其语义与 SVG 的feDisplacementMap完全一致。读完本文你将掌握位移贴图滤镜的位移公式、全部参数与取值含义、与 Perlin 噪声Turbulence的组合用法并通过仓库源码理解其底层实现链路与常见坑点。什么是位移贴图滤镜位移贴图Displacement Map是图像处理中最常见的空间变形手段之一它不用颜色矩阵去改变像素的色值而是根据**另一张图贴图**中特定颜色通道的数值去计算每个像素应该从哪个位置采样从而把画面推挤成起伏扭曲的样子。在 React Native Skia 中DisplacementMap组件与 SVG 标准元素feDisplacementMap语义一致文档原文在 apps/docs/docs/image-filters/displacement-map.md。核心变换公式如下P(x,y) ← P( x scale * (XC(x,y) - 0.5), y scale * (YC(x,y) - 0.5))其中P(x, y)是子图像即被扭曲的原始画面在(x, y)处的像素P(x, y)是目标位置输出画面处的像素XC(x, y)、YC(x, y)分别是贴图中由channelX、channelY指定的颜色通道在(x, y)处的分量值归一化到 01scale是位移缩放因子。也就是说输出像素的取样点被贴图通道值拉开或拉近当通道值为 0.5 时(XC - 0.5) 0该像素不发生偏移当通道值趋向 0 时沿负方向偏移趋向 1 时沿正方向偏移。scale决定了通道值差 0.5 时对应的最大偏移像素数。参数说明参数类型说明channelXColorChannel用于沿 X 轴位移的颜色通道取值r、g、b、achannelYColorChannel用于沿 Y 轴位移的颜色通道取值r、g、b、ascalenumber位移缩放因子决定扭曲强度children?ImageFilter可选子元素作为先应用的图像滤镜 / 位移贴图来源其中ColorChannel类型在仓库中的定义位于 packages/skia/src/skia/types/ImageFilter/ImageFilterFactory.ts是一个枚举R / G / B / AReact 组件层的 props 类型定义DisplacementMapImageFilterProps位于 packages/skia/src/dom/types/ImageFilters.ts其中channelX、channelY是SkEnumtypeof ColorChannelscale为number三者均为必填。实际使用中channelX与channelY可以指向不同的通道。文档示例选择channelXg绿色通道驱动 X 轴偏移与channelYaAlpha 通道驱动 Y 轴偏移而常用的Turbulence噪声贴图在不同通道上有不同的灰度分布因此换用r、b等通道会得到完全不同的扭曲纹理走向——这是调参时最容易出效果差异的地方。组件使用示例用 Perlin 噪声扭曲图片文档示例与仓库 e2e 测试完全一致使用 Perlin 噪声Turbulence组件作为位移贴图对一张图片施加波纹扭曲import { Canvas, Image, Turbulence, DisplacementMap, useImage } from shopify/react-native-skia; const Filter () { const image useImage(require(./assets/oslo.jpg)); if (!image) { return null; } return ( Canvas style{{ width: 256, height: 256 }} Image image{image} x{0} y{0} width{256} height{256} fitcover DisplacementMap channelXg channelYa scale{20} Turbulence freqX{0.01} freqY{0.05} octaves{2} seed{2} / /DisplacementMap /Image /Canvas ); };这里几个值得注意的点Turbulence作为DisplacementMap的子元素提供的是逐像素的通道值供channelX/channelY采样。freqX、freqY控制噪声频率数值越小扭曲的波纹越平缓、尺度越大octaves控制噪声叠加的层数层数越多细节越丰富seed控制随机种子改变扭曲纹理的形态。Turbulence的完整用法见 Perlin 噪声文档。scale{20}表示通道值偏离 0.5 时最多让像素偏移 20 个单位scale越大变形越剧烈过大的值会让画面撕裂感明显。DisplacementMap必须作为Image或其他可绘制节点的子节点存在它作用于其父节点的绘制结果。关于children参数的类型文档参数表标注为可选的ImageFilter但从仓库的 sksg 录制实现看该组件实际期望子元素是一个 shader如Turbulence在 packages/skia/src/sksg/Recorder/commands/ImageFilters.ts 的declareDisplacementMapImageFilter中实现会先从绘制上下文中弹出一个 shaderconst shader ctx.shaders.pop(); if (!shader) { throw new Error(DisplacementMap expects a shader as child); } const map ctx.Skia.ImageFilter.MakeShader(shader); const imgf ctx.Skia.ImageFilter.MakeDisplacementMap( ColorChannel[enumKey(channelX)], ColorChannel[enumKey(channelY)], scale, map, null ); ctx.imageFilters.push(imgf);可以看到子 shader 首先通过MakeShader被转换成一张贴图SkImageFilter随后与channelX、channelY、scale一起传入MakeDisplacementMap并作为图像滤镜压入绘制上下文。如果忘记给DisplacementMap传入子元素运行时会抛出DisplacementMap expects a shader as child错误这是使用中最常见的报错之一。底层 API 与跨端实现命令式 APIMakeDisplacementMap滤镜底层的工厂方法定义在 packages/skia/src/skia/types/ImageFilter/ImageFilterFactory.ts 的ImageFilterFactory接口中MakeDisplacementMap( channelX: ColorChannel, channelY: ColorChannel, scale: number, in1: SkImageFilter, input?: SkImageFilter | null, cropRect?: SkRect | null ): SkImageFilter;其中in1是作为位移贴图的图像滤镜即由 shader 转换而来input是被扭曲的源图传null时使用动态源图像即父节点的绘制结果cropRect可对输入输出做裁剪。这也是声明式DisplacementMap组件在底层最终调用到的 API。Web 端CanvaKit实现在 Web 平台上实现位于 packages/skia/src/skia/web/JsiSkImageFilterFactory.ts 的MakeDisplacementMap它通过getEnum(this.CanvasKit, ColorChannel, channelX)将 TS 层的通道枚举映射为 CanvaKit 的枚举值再调用CanvasKit.ImageFilter.MakeDisplacementMap(channelX, channelY, scale, in1, inputFilter)。注意该实现会在传入cropRect时打印一条警告cropRect is not supported on React Native Web for MakeDisplacementMap说明 Web 端暂不支持裁剪矩形参数。组件封装React 组件层只是一个薄封装packages/skia/src/renderer/components/imageFilters/DisplacementMap.tsx 将 props 直接透传给 DOM 节点skDisplacementMapImageFilter该节点随后进入 sksg 录制管线被上文所述的 Recorder 命令消费。整个调用链可以概括为DisplacementMap channelX channelY scale → DOM 节点 skDisplacementMapImageFilter → sksg Recorder: declareDisplacementMapImageFilter → Skia.ImageFilter.MakeShader(子 shader) → Skia.ImageFilter.MakeDisplacementMap(channelX, channelY, scale, map) → 原生 Skia / Web CanvaKit 实现测试验证文档即测试仓库将文档示例直接固化为 e2e 测试见 packages/skia/src/renderer/tests/e2e/ImageFilters.spec.tsx 中的use the displacement map as documented用例它使用与本文示例完全一致的参数channelXg、channelYa、scale{20}、Turbulence freqX{0.01} freqY{0.05} octaves{2} seed{2}对oslo.jpg施加位移滤镜后与基准截图比对。这说明文档示例是经过渲染验证、可直接照抄运行的代码也意味着你可以把该测试作为调参的参考基准。小结与调参建议DisplacementMap是 React Native Skia 图像滤镜体系中功能最物理的一支——它不做颜色混合而是通过贴图通道驱动空间取样。实用建议贴图来源优先用TurbulencePerlin 噪声天然平滑连续适合水面、熔岩、能量场等扭曲效果也可以尝试其它 shader甚至用运行时着色器Runtime Shader自定义贴图生成逻辑。channelX与channelY搭配不同的通道例如ga、rb组合不同通道可让 X/Y 方向呈现不同的扭曲纹理若两个方向使用同一通道则扭曲更对称。scale从小往大调先给5再逐步增大到20、40避免一开始就出现过度撕裂。子元素必填忘记传Turbulence等 shader 会直接抛错这是最常见的集成问题。滤镜整体的组合方式如多层滤镜嵌套、与Blur、Offset、Shadow搭配可进一步参考 图像滤镜总览 文档。赞分享图形学移动开发跨平台UI组件【免费下载链接】react-native-skiaHigh-performance React Native Graphics using Skia项目地址https://gitcode.com/gh_mirrors/re/react-native-skia点击查看免费下载相关推荐react-native-skia 图像模糊滤镜 Blur 完全指南Sigma 参数与 TileMode 边缘处理详解react native skia 图像模糊滤镜 Blur 完全指南Sigma 参数与 TileMode 边缘处理详解 本文以 react native sk图形学移动开发跨平台UI组件React Native Skia Morphology 图像滤镜基于 Skia 的腐蚀erode与膨胀dilate实现指南React Native Skia Morphology 图像滤镜基于 Skia 的腐蚀erode与膨胀dilate实现指南 Morphology形图形学移动开发跨平台UI组件告别直升机模式华硕笔记本风扇静音改造完全指南告别直升机模式华硕笔记本风扇静音改造完全指南 你是否曾在深夜工作时笔记本风扇突然起飞打断你的思绪或者在视频会议中风扇噪音让你不得不重复发言如果桌面应用系统编程上一篇从入门到精通Yolov7-tracker核心功能详解与环境搭建教程下一篇视频分析革命3分钟看懂AI如何让长视频变精华创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考