React Native Skia 阴影滤镜实战：用 Shadow 组件实现投影、内阴影与拟物化设计

图形学移动开发跨平台UI组件【免费下载链接】react-native-skiaHigh-performance React Native Graphics using Skia项目地址https://gitcode.com/gh_mirrors/re/react-native-skia点击查看免费下载ShadowDropShadow是 React Native Skia 提供的图像滤镜Image Filter组件用于在输入内容下方绘制投影Drop Shadow并可通过shadowOnly只渲染阴影、通过inner切换为内阴影Inner Shadow其效果与 CSS/SVG 的filter: drop-shadow()一一对应。读完本文你将掌握Shadow全部属性的语义与默认行为能独立实现投影组合、内阴影镂刻以及基于双阴影的 Neumorphism新拟态卡片效果并了解其底层在 SkiaMakeDropShadow系列工厂方法与滤镜 DAG 中的实现机制。一、Shadow 组件是什么在 React Native Skia 中Shadow是一个声明式的图像滤镜组件需要作为绘制节点如RoundedRect、Path、Image等的子节点使用而不是独立绘制的元素。它作用于“输入内容”——即它所挂载的父节点所绘制的内容在其下方生成一个有偏移、有高斯模糊、可指定颜色的阴影。从源码结构看Shadow组件本身只是一个极薄的声明式包装// packages/skia/src/renderer/components/imageFilters/Shadow.tsx import type { DropShadowImageFilterProps } from ../../../dom/types; export const Shadow (props: SkiaPropsDropShadowImageFilterProps) { return skDropShadowImageFilter {...props} /; };它最终对应 DOM 节点类型NodeType.DropShadowImageFilter见 NodeType.ts在渲染时被推入绘制上下文中的 image filter 栈由declareDropShadowImageFilter处理见 ImageFilters.ts。提示DropShadow滤镜等价于其 SVG/CSS 对应物因为 Box 阴影方案要快得多详见第四节。二、属性一览Shadow的属性定义在 ImageFilters.tsexport interface DropShadowImageFilterProps extends ChildrenProps { dx: number; dy: number; blur: number; color: Color; inner?: boolean; shadowOnly?: boolean; }NameType说明dxnumber阴影沿 X 轴的偏移量dynumber阴影沿 Y 轴的偏移量blurnumber阴影的模糊半径高斯模糊 sigmacolorColor投影颜色支持十六进制字符串、命名色等 Color 类型值inner?boolean为true时阴影绘制在输入内容内部内阴影shadowOnly?boolean为true时结果只包含阴影不包含输入内容本身children?ImageFilter可选的子图像滤镜先应用于输入内容再叠加本阴影其中color会被processColor统一转换为 Skia 的SkColordx、dy、blur直接透传给底层工厂方法。结合实现代码ImageFilters.ts可以看到三个可选标志的完整组合逻辑inner为false且shadowOnly为false调用ImageFilter.MakeDropShadow(dx, dy, blur, blur, color, null)——标准投影结果包含输入内容shadowOnly为true调用MakeDropShadowOnly(...)——只输出阴影输入内容被剔除便于在滤镜 DAG 中灵活组合inner为true走自定义的MakeInnerShadow(...)实现shadowOnly决定内阴影阶段是否包含原始内容。在底层工厂方法签名中见 ImageFilterFactory.tsblur实际上会被同时作为 X/Y 两个方向的 sigma即sigmaX sigmaY blur传给MakeDropShadow/MakeDropShadowOnly此外这两个工厂方法还接受可选的input与cropRect参数分别用于指定输入滤镜与裁剪区域JS 侧声明式用法下默认使用动态源图像。三、Drop Shadow投影实战Neumorphism下面的示例在同一个圆角矩形上叠加了两层方向相反的投影——右上偏冷色、左下偏暖色这正是 Neumorphism新拟态卡片最常见的双阴影配方。它等价于以下 CSS 写法.paint { filter: drop-shadow(12px 12px 25px #93b8c4) drop-shadow(-12px -12px 25px #c7f8ff); }对应的 React Native Skia 代码import { Shadow, Fill, RoundedRect, Canvas } from shopify/react-native-skia; const Neumorphism () { return ( Canvas style{{ width: 256, height: 256 }} Fill colorlightblue / RoundedRect x{32} y{32} width{192} height{192} r{32} colorlightblue Shadow dx{12} dy{12} blur{25} color#93b8c4 / Shadow dx{-12} dy{-12} blur{25} color#c7f8ff / /RoundedRect /Canvas ); };要点拆解多个Shadow依次叠加两个滤镜按声明顺序先后作用于同一输入内容最终通过MakeCompose(outer, inner)组合成一条滤镜链见 ImageFilters.ts 的composeImageFilters偏移方向决定立体感dx/dy同时取正值表示阴影向右下延伸光源在左上同时取负值则向左上延伸光源在右下一正一负组合即可模拟环境光与点光源的双重照明blur即模糊半径数值越大阴影边缘越柔和、越“弥散”25 是文档示例中较为温和的中等值color使用十六进制色值也支持lightblue这类命名色与Skia.Color()返回的SkColor值。效果该用例与仓库中的端到端测试一一对应在 ImageFilters.spec.tsx 中测试用surface.draw渲染相同结构Fill lightblue 圆角矩形 两个Shadow并与docPath(image-filters/dropshadow.png)基准图对比阈值 0.05验证渲染结果与文档示例一致。四、Inner Shadow内阴影实战给Shadow加上inner属性阴影就会被裁剪进输入内容的内部呈现出“内容向内凹陷”的效果——适合镂空按钮、凹槽输入框、内嵌面板等场景。将上例的两个投影改为内阴影import { Shadow, Fill, RoundedRect, Canvas } from shopify/react-native-skia; const Neumorphism () { return ( Canvas style{{ width: 256, height: 256 }} Fill colorlightblue / RoundedRect x{32} y{32} width{192} height{192} r{32} colorlightblue Shadow dx{12} dy{12} blur{25} color#93b8c4 inner / Shadow dx{-12} dy{-12} blur{25} color#c7f8ff inner / /RoundedRect /Canvas ); };与投影版唯一的区别就是每个Shadow都多了inner标志。效果内阴影的底层原理源码级在 ImageFilters.ts 的MakeInnerShadow实现中Skia 会构建一条滤镜 DAG用MakeColorFilter(MakeBlend(Black, Dst))提取原始图形的“源图”source graphic用MakeColorFilter(MakeBlend(Black, SrcIn))提取原始图形的 alpha 通道作为sourceAlpha通过MakeColorFilter(MakeMatrix(AlphaSaturate))先把 alpha 饱和成硬轮廓解决半透明图形内阴影失真问题对应 issue #2990依次叠加SrcOut颜色混合、MakeOffset(dx, dy)偏移、MakeBlur模糊生成“形状外部的阴影”用MakeBlend(SrcIn, sourceAlpha, ...)把阴影裁剪回形状内部即得到内阴影若shadowOnly为假再通过MakeCompose把sourceGraphic与内阴影以SrcOver混合恢复内容本体。该实现同样在测试用例中有验证见 ImageFilters.spec.tsxinner双阴影渲染对比innershadow.png以及 [L246-L296]对文字路径Path同时叠加绿色内阴影与蓝色外阴影并与快照snapshots/image-filter/test-shadow.png对比。什么时候别用 Shadow 做内阴影文档明确提醒如果只是想给圆角矩形渲染内阴影BoxBoxShadow方案要快得多见 Box 文档。BoxShadow额外提供spread属性阴影扩散范围并且是专门为矩形/圆角矩形优化的内阴影原语而Shadow是通用图像滤镜需经过上述多级滤镜 DAG适合任意形状路径、文字、位图等。原则规则几何体优先用 Box任意形状再用 Shadow。五、进阶组合shadowOnly、children 与阴影复用5.1 shadowOnly只画阴影不画内容shadowOnly为true时结果只保留阴影本身输入内容被剔除。典型用途把阴影从内容中解耦配合位移/缩放单独摆放在滤镜 DAG 中把“阴影层”当作中间产物继续叠加其他滤镜与Blend、Merge等滤镜组合实现多图层合成。它映射到底层MakeDropShadowOnly工厂方法——该方法与MakeDropShadow的算法完全一致唯一区别是结果图像不包含输入内容见 ImageFilterFactory.ts 的注释说明。测试用例 ImageFilters.spec.tsx 展示了shadowOnly的用法黄色圆角矩形 dx-12 dy-12 blur25 colormagenta shadowOnly渲染结果对比基准图dropshadow-only.png可直观看到只有品红色阴影、没有黄色内容。5.2 children先应用子滤镜children属性接受另一个ImageFilter如Blur、ColorMatrix、Offset等它会先作用于输入内容再生成阴影。这使Shadow可以参与滤镜组合链例如先对内容做模糊/调色再基于处理后的结果投射阴影。关于图像滤镜的一般组合方式可参考 Image Filters 总览 中的嵌套示例Blur内嵌ColorMatrix。5.3 组合范例内阴影 外投影同屏inner与shadowOnly可以同时使用内阴影 只画阴影两个Shadow也可以分别设置不同标志混排——例如对一个Path文字同时加外投影与内阴影见测试 ImageFilters.spec.tsxPath path{path} colorred Shadow dx{0} dy{4} blur{1} color#00FF00 inner / Shadow dx{0} dy{4} blur{0} color#0000ff / /Path注意这里第二个Shadow的blur{0}模糊半径可以为 0此时阴影退化为纯偏移的硬阴影等价于直接使用Offset滤镜见 offset.md常用于制造锐利的描边式投影。六、小结与速查Shadow是声明式图像滤镜挂在绘制节点内部使用等价于 CSSdrop-shadow()核心参数dx/dy偏移、blur模糊半径同时作为 X/Y 两个方向的 sigma、color阴影颜色inner决定内阴影shadowOnly决定是否剔除输入内容两者可组合多阴影按声明顺序叠加组合最终以MakeCompose组成滤镜链底层映射非内阴影走MakeDropShadow/MakeDropShadowOnly内阴影走自定义MakeInnerShadow滤镜 DAGalpha 饱和 偏移 模糊 SrcIn 裁剪圆角矩形的内阴影优先使用BoxBoxShadow更快且支持spread全部属性、类型与渲染逻辑均可在仓库中溯源Shadow 组件、属性类型、声明式实现、底层工厂 API、端到端测试。赞分享图形学移动开发跨平台UI组件【免费下载链接】react-native-skiaHigh-performance React Native Graphics using Skia项目地址https://gitcode.com/gh_mirrors/re/react-native-skia点击查看免费下载相关推荐探索React Native的阴影魔法react-native-shadow-2探索React Native的阴影魔法react native shadow 2 在移动应用开发的世界中细节往往决定成败。阴影效果作为提升UI质感的关键元素上一篇QuickRecorder免费轻量 macOS 录屏工具7 种录制模式一次讲清下一篇OpCore-Simplify 实战教程四个阶段自动生成一份可引导的 OpenCore EFI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考