react-native-skia 图像偏移过滤器 Offset 完全指南：属性、示例与底层实现

图形学移动开发跨平台UI组件【免费下载链接】react-native-skiaHigh-performance React Native Graphics using Skia项目地址https://gitcode.com/gh_mirrors/re/react-native-skia点击查看免费下载本文围绕 react-native-skia 提供的Offset图像过滤器展开讲解如何沿 X/Y 轴平移被过滤的图像涵盖组件属性、声明式用法、与Skia.ImageFilter.MakeOffset底层 API 的对应关系以及如何将其与Blur等过滤器组合使用。读完本文你将掌握在 apps/docs/docs/image-filters/offset.md 场景下实现像素级平移、组合滤镜与 Web 端兼容性处理的具体方案。Offset 是什么Offset是 react-native-skia 提供的图像过滤器Image Filter组件。图像过滤器是一类作用于图像所有像素颜色位上的效果见 图像过滤器总览而Offset的作用非常直观将输入图像沿 X 轴与 Y 轴平移指定的像素距离其余像素保持原样。该过滤器与 SVG 的feOffset滤镜即 Web 标准中的feOffset元素行为一致因此熟悉 SVG 滤镜的开发者可以无缝迁移到 react-native-skia。组件属性Offset组件接受以下属性名称类型说明xnumber沿 X 轴的偏移量单位像素。ynumber沿 Y 轴的偏移量单位像素。children?ImageFilter可选的图像过滤器会先被应用再执行本偏移。从源码看Offset的组件实现位于 packages/skia/src/renderer/components/imageFilters/Offset.tsx其类型定义OffsetImageFilterProps位于 packages/skia/src/dom/types/ImageFilters.tsexport interface OffsetImageFilterProps extends ChildrenProps { x: number; y: number; }组件默认值为x 0、y 0即不传属性时过滤器不产生任何平移效果。x、y均可为负值向相反方向平移。基础示例平移一张图片下面是最简单的用法——在Canvas中绘制一张图片并应用Offset将其向右下角各平移 64 像素import { Canvas, Image, Offset, useImage, Fill } 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 }} Fill colorlightblue / Image image{image} x{0} y{0} width{256} height{256} fitcover Offset x{64} y{64} / /Image /Canvas ); };要点说明useImage返回的图片加载完成前为null因此需要先做空值判断如上例中的if (!image)提前返回Offset作为Image的子组件children使用形成先渲染图片、再对结果施加偏移的滤镜管线背景先填充了lightblue这样偏移后露出的画布区域可见能直观看到平移产生的空边效果fitcover会让图片按覆盖方式填充到 256×256 的区域。运行效果如下图所示完整示例源自 offset.md 示例代码组合滤镜Offset 作为子过滤器管道的一环Offset的children属性允许传入另一个图像过滤器使其先于偏移执行。这在构建复合效果时非常实用例如先模糊、再平移import { Canvas, Image, Offset, Blur, useImage } from shopify/react-native-skia; const Composed () { 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 Offset x{40} y{40} Blur blur{6} modeclamp / /Offset /Image /Canvas ); };这里Blur作为Offset的子节点先执行模糊模糊结果再被整体平移 40 像素。这种子过滤器先应用、父过滤器后应用的嵌套语义与 图像过滤器总览 中介绍的组合方式如ColorMatrix嵌套在Blur内一脉相承也呼应了 SVG 滤镜 DAG有向无环图中的输入-输出串联模型。底层实现从组件到 Skia.ImageFilter.MakeOffset声明式组件如何被翻译为底层 APIOffset组件本身是一个轻量封装Offset.tsx它把x、y转发给 DOM 节点skOffsetImageFilter。在渲染记录Recorder层declareOffsetImageFilter负责把属性翻译成 Skia 工厂调用packages/skia/src/sksg/Recorder/commands/ImageFilters.tsconst declareOffsetImageFilter ( ctx: DrawingContext, props: OffsetImageFilterProps ) { worklet; const { x, y } props; const imgf ctx.Skia.ImageFilter.MakeOffset(x, y, null); ctx.imageFilters.push(imgf); };注意这里传给MakeOffset的第三个参数是null表示使用动态源图像即当前正在绘制的输入内容作为过滤输入。这解释了声明式用法中为何Offset无需显式指定输入——它天然作用于其宿主元素如Image的渲染结果。命令式 APISkia.ImageFilter.MakeOffset如果你更偏好命令式写法可以直接使用Skia.ImageFilter.MakeOffset工厂方法类型签名见 packages/skia/src/skia/types/ImageFilter/ImageFilterFactory.tsMakeOffset( dx: number, dy: number, input?: SkImageFilter | null, // 为 null 时使用动态源图像 cropRect?: SkRect | null // 可选裁剪输入与输出 ): SkImageFilter;参数说明dx/dy沿 X / Y 轴的偏移量input输入过滤器为null时使用动态源图像例如保存的图层或当前绘制内容cropRect可选的裁剪矩形同时裁剪输入与输出。该命令式过滤器同样可以作为ImageFilter filter{...} /的filter属性传入声明式组件。仓库的 e2e 测试packages/skia/src/renderer/tests/e2e/ImageFilter.spec.tsx展示了这一用法const offsetFilter Skia.ImageFilter.MakeOffset(20, 20, null); const img await surface.draw( Group ImageFilter filter{offsetFilter} / Circle cx{50} cy{50} r{30} colorblue / /Group ); checkImage(img, docPath(image-filter/offset-filter.png));同一个测试文件还验证了偏移 模糊的复合过滤器写法Skia.ImageFilter.MakeOffset(10, 10, blurFilter)与声明式children嵌套在语义上完全等价。组合与合成顺序在渲染记录器中多个过滤器通过Skia.ImageFilter.MakeCompose(outer, inner)依次合成composeImageFilters后弹出的过滤器作为外层的outer先弹出的作为内层的inner。因此嵌套顺序决定了效果的执行顺序——越内层的子过滤器越先作用于源图像这一点在组合Blur与Offset时需特别留意。平台差异React Native Web 上的注意点react-native-skia 同时支持原生Android/iOS与 Web 平台。在 Web 端MakeOffset由 CanvasKit 实现packages/skia/src/skia/web/JsiSkImageFilterFactory.tsMakeOffset(dx, dy, input?, cropRect?) { const inputFilter input null || input undefined ? null : JsiSkImageFilter.fromValue(input); if (cropRect) { console.warn(cropRect is not supported on React Native Web for MakeOffset); } const filter this.CanvasKit.ImageFilter.MakeOffset(dx, dy, inputFilter); return new JsiSkImageFilter(this.CanvasKit, filter); }两点平台差异值得记住cropRect在 Web 端不被支持传入时会打印一条警告cropRect is not supported on React Native Web for MakeOffset并被忽略因此在跨平台项目中应避免依赖cropRect参数input为null或undefined时Web 端同样会回退为使用动态源图像行为与原生端一致。典型应用场景Offset虽然简单却是很多复杂效果的基础构件常见用途包括投影/描边效果DropShadow过滤器内部正是通过偏移 模糊 混合实现的。事实上MakeInnerShadow的源码ImageFilters.ts就调用了MakeOffset(dx, dy, f1)来定位阴影先生成轮廓再偏移出阴影位置最后模糊。像素级平移将贴图、文字或图形整体移动若干像素制造错位或重影效果复合滤镜的中间步骤作为过滤器 DAG 中的一环例如先偏移再混合MakeCompose/MakeBlend实现更精细的合成控制动画偏移由于Offset的属性可以被 react-native-skia 的动画系统驱动x、y支持传入动画值可以轻松实现图片缓慢滑动、视差滚动等动效。小结Offset是 react-native-skia 中最基础的图像过滤器之一等价于 SVG 的feOffset作用是把输入图像沿 X/Y 轴平移属性极简x、y两个必选数字children可嵌套其他过滤器实现先过滤、再偏移底层由Skia.ImageFilter.MakeOffset(dx, dy, input, cropRect)实现声明式组件与命令式 API 完全互通Web 端基于 CanvasKit 实现但cropRect不被支持跨平台开发时需规避。如需查看更多过滤器可继续阅读 图像过滤器总览、模糊滤镜 Blur、位移映射 DisplacementMap 与 阴影 Shadows。赞分享图形学移动开发跨平台UI组件【免费下载链接】react-native-skiaHigh-performance React Native Graphics using Skia项目地址https://gitcode.com/gh_mirrors/re/react-native-skia点击查看免费下载相关推荐React Native Skia Morphology 图像滤镜基于 Skia 的腐蚀erode与膨胀dilate实现指南React Native Skia Morphology 图像滤镜基于 Skia 的腐蚀erode与膨胀dilate实现指南 Morphology形图形学移动开发跨平台UI组件Rust 标准库指针偏移详解ptr::offset 的语义、安全契约与底层实现Rust 标准库指针偏移详解 ptr::offset 的语义、安全契约与底层实现 指针偏移pointer offset是 Rust 中所有内存遍历与数据结编程语言编译器语言运行时标准库告别直升机模式华硕笔记本风扇静音改造完全指南告别直升机模式华硕笔记本风扇静音改造完全指南 你是否曾在深夜工作时笔记本风扇突然起飞打断你的思绪或者在视频会议中风扇噪音让你不得不重复发言如果桌面应用系统编程上一篇SQLModel 删除数据教程用 session.delete() 与 commit 完成数据库 DELETE 操作下一篇HoppscotchAPI测试认证提升职业竞争力的途径创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考