圖形學(xué)移動(dòng)開發(fā)跨平臺(tái)UI組件【免費(fèi)下載鏈接】react-native-skiaHigh-performance React Native Graphics using Skia項(xiàng)目地址https://gitcode.com/gh_mirrors/re/react-native-skia點(diǎn)擊查看免費(fèi)下載ShadowDropShadow是 React Native Skia 提供的圖像濾鏡Image Filter組件用于在輸入內(nèi)容下方繪制投影Drop Shadow并可通過(guò)shadowOnly只渲染陰影、通過(guò)inner切換為內(nèi)陰影Inner Shadow其效果與 CSS/SVG 的filter: drop-shadow()一一對(duì)應(yīng)。讀完本文你將掌握Shadow全部屬性的語(yǔ)義與默認(rèn)行為能獨(dú)立實(shí)現(xiàn)投影組合、內(nèi)陰影鏤刻以及基于雙陰影的 Neumorphism新擬態(tài)卡片效果并了解其底層在 SkiaMakeDropShadow系列工廠方法與濾鏡 DAG 中的實(shí)現(xiàn)機(jī)制。一、Shadow 組件是什么在 React Native Skia 中Shadow是一個(gè)聲明式的圖像濾鏡組件需要作為繪制節(jié)點(diǎn)如RoundedRect、Path、Image等的子節(jié)點(diǎn)使用而不是獨(dú)立繪制的元素。它作用于“輸入內(nèi)容”——即它所掛載的父節(jié)點(diǎn)所繪制的內(nèi)容在其下方生成一個(gè)有偏移、有高斯模糊、可指定顏色的陰影。從源碼結(jié)構(gòu)看Shadow組件本身只是一個(gè)極薄的聲明式包裝// packages/skia/src/renderer/components/imageFilters/Shadow.tsx import type { DropShadowImageFilterProps } from ../../../dom/types; export const Shadow (props: SkiaPropsDropShadowImageFilterProps) { return skDropShadowImageFilter {...props} /; };它最終對(duì)應(yīng) DOM 節(jié)點(diǎn)類型NodeType.DropShadowImageFilter見(jiàn) NodeType.ts在渲染時(shí)被推入繪制上下文中的 image filter 棧由declareDropShadowImageFilter處理見(jiàn) ImageFilters.ts。提示DropShadow濾鏡等價(jià)于其 SVG/CSS 對(duì)應(yīng)物因?yàn)?Box 陰影方案要快得多詳見(jiàn)第四節(jié)。二、屬性一覽Shadow的屬性定義在 ImageFilters.tsexport interface DropShadowImageFilterProps extends ChildrenProps { dx: number; dy: number; blur: number; color: Color; inner?: boolean; shadowOnly?: boolean; }NameType說(shuō)明dxnumber陰影沿 X 軸的偏移量dynumber陰影沿 Y 軸的偏移量blurnumber陰影的模糊半徑高斯模糊 sigmacolorColor投影顏色支持十六進(jìn)制字符串、命名色等 Color 類型值inner?boolean為true時(shí)陰影繪制在輸入內(nèi)容內(nèi)部?jī)?nèi)陰影shadowOnly?boolean為true時(shí)結(jié)果只包含陰影不包含輸入內(nèi)容本身children?ImageFilter可選的子圖像濾鏡先應(yīng)用于輸入內(nèi)容再疊加本陰影其中color會(huì)被processColor統(tǒng)一轉(zhuǎn)換為 Skia 的SkColordx、dy、blur直接透?jìng)鹘o底層工廠方法。結(jié)合實(shí)現(xiàn)代碼ImageFilters.ts可以看到三個(gè)可選標(biāo)志的完整組合邏輯inner為false且shadowOnly為false調(diào)用ImageFilter.MakeDropShadow(dx, dy, blur, blur, color, null)——標(biāo)準(zhǔn)投影結(jié)果包含輸入內(nèi)容shadowOnly為true調(diào)用MakeDropShadowOnly(...)——只輸出陰影輸入內(nèi)容被剔除便于在濾鏡 DAG 中靈活組合inner為true走自定義的MakeInnerShadow(...)實(shí)現(xiàn)shadowOnly決定內(nèi)陰影階段是否包含原始內(nèi)容。在底層工廠方法簽名中見(jiàn) ImageFilterFactory.tsblur實(shí)際上會(huì)被同時(shí)作為 X/Y 兩個(gè)方向的 sigma即sigmaX sigmaY blur傳給MakeDropShadow/MakeDropShadowOnly此外這兩個(gè)工廠方法還接受可選的input與cropRect參數(shù)分別用于指定輸入濾鏡與裁剪區(qū)域JS 側(cè)聲明式用法下默認(rèn)使用動(dòng)態(tài)源圖像。三、Drop Shadow投影實(shí)戰(zhàn)Neumorphism下面的示例在同一個(gè)圓角矩形上疊加了兩層方向相反的投影——右上偏冷色、左下偏暖色這正是 Neumorphism新擬態(tài)卡片最常見(jiàn)的雙陰影配方。它等價(jià)于以下 CSS 寫法.paint { filter: drop-shadow(12px 12px 25px #93b8c4) drop-shadow(-12px -12px 25px #c7f8ff); }對(duì)應(yīng)的 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 ); };要點(diǎn)拆解多個(gè)Shadow依次疊加兩個(gè)濾鏡按聲明順序先后作用于同一輸入內(nèi)容最終通過(guò)MakeCompose(outer, inner)組合成一條濾鏡鏈見(jiàn) ImageFilters.ts 的composeImageFilters偏移方向決定立體感dx/dy同時(shí)取正值表示陰影向右下延伸光源在左上同時(shí)取負(fù)值則向左上延伸光源在右下一正一負(fù)組合即可模擬環(huán)境光與點(diǎn)光源的雙重照明blur即模糊半徑數(shù)值越大陰影邊緣越柔和、越“彌散”25 是文檔示例中較為溫和的中等值color使用十六進(jìn)制色值也支持lightblue這類命名色與Skia.Color()返回的SkColor值。效果該用例與倉(cāng)庫(kù)中的端到端測(cè)試一一對(duì)應(yīng)在 ImageFilters.spec.tsx 中測(cè)試用surface.draw渲染相同結(jié)構(gòu)Fill lightblue 圓角矩形 兩個(gè)Shadow并與docPath(image-filters/dropshadow.png)基準(zhǔn)圖對(duì)比閾值 0.05驗(yàn)證渲染結(jié)果與文檔示例一致。四、Inner Shadow內(nèi)陰影實(shí)戰(zhàn)給Shadow加上inner屬性陰影就會(huì)被裁剪進(jìn)輸入內(nèi)容的內(nèi)部呈現(xiàn)出“內(nèi)容向內(nèi)凹陷”的效果——適合鏤空按鈕、凹槽輸入框、內(nèi)嵌面板等場(chǎng)景。將上例的兩個(gè)投影改為內(nèi)陰影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 ); };與投影版唯一的區(qū)別就是每個(gè)Shadow都多了inner標(biāo)志。效果內(nèi)陰影的底層原理源碼級(jí)在 ImageFilters.ts 的MakeInnerShadow實(shí)現(xiàn)中Skia 會(huì)構(gòu)建一條濾鏡 DAG用MakeColorFilter(MakeBlend(Black, Dst))提取原始圖形的“源圖”source graphic用MakeColorFilter(MakeBlend(Black, SrcIn))提取原始圖形的 alpha 通道作為sourceAlpha通過(guò)MakeColorFilter(MakeMatrix(AlphaSaturate))先把 alpha 飽和成硬輪廓解決半透明圖形內(nèi)陰影失真問(wèn)題對(duì)應(yīng) issue #2990依次疊加SrcOut顏色混合、MakeOffset(dx, dy)偏移、MakeBlur模糊生成“形狀外部的陰影”用MakeBlend(SrcIn, sourceAlpha, ...)把陰影裁剪回形狀內(nèi)部即得到內(nèi)陰影若shadowOnly為假再通過(guò)MakeCompose把sourceGraphic與內(nèi)陰影以SrcOver混合恢復(fù)內(nèi)容本體。該實(shí)現(xiàn)同樣在測(cè)試用例中有驗(yàn)證見(jiàn) ImageFilters.spec.tsxinner雙陰影渲染對(duì)比innershadow.png以及 [L246-L296]對(duì)文字路徑Path同時(shí)疊加綠色內(nèi)陰影與藍(lán)色外陰影并與快照snapshots/image-filter/test-shadow.png對(duì)比。什么時(shí)候別用 Shadow 做內(nèi)陰影文檔明確提醒如果只是想給圓角矩形渲染內(nèi)陰影BoxBoxShadow方案要快得多見(jiàn) Box 文檔。BoxShadow額外提供spread屬性陰影擴(kuò)散范圍并且是專門為矩形/圓角矩形優(yōu)化的內(nèi)陰影原語(yǔ)而Shadow是通用圖像濾鏡需經(jīng)過(guò)上述多級(jí)濾鏡 DAG適合任意形狀路徑、文字、位圖等。原則規(guī)則幾何體優(yōu)先用 Box任意形狀再用 Shadow。五、進(jìn)階組合shadowOnly、children 與陰影復(fù)用5.1 shadowOnly只畫陰影不畫內(nèi)容shadowOnly為true時(shí)結(jié)果只保留陰影本身輸入內(nèi)容被剔除。典型用途把陰影從內(nèi)容中解耦配合位移/縮放單獨(dú)擺放在濾鏡 DAG 中把“陰影層”當(dāng)作中間產(chǎn)物繼續(xù)疊加其他濾鏡與Blend、Merge等濾鏡組合實(shí)現(xiàn)多圖層合成。它映射到底層MakeDropShadowOnly工廠方法——該方法與MakeDropShadow的算法完全一致唯一區(qū)別是結(jié)果圖像不包含輸入內(nèi)容見(jiàn) ImageFilterFactory.ts 的注釋說(shuō)明。測(cè)試用例 ImageFilters.spec.tsx 展示了shadowOnly的用法黃色圓角矩形 dx-12 dy-12 blur25 colormagenta shadowOnly渲染結(jié)果對(duì)比基準(zhǔn)圖dropshadow-only.png可直觀看到只有品紅色陰影、沒(méi)有黃色內(nèi)容。5.2 children先應(yīng)用子濾鏡children屬性接受另一個(gè)ImageFilter如Blur、ColorMatrix、Offset等它會(huì)先作用于輸入內(nèi)容再生成陰影。這使Shadow可以參與濾鏡組合鏈例如先對(duì)內(nèi)容做模糊/調(diào)色再基于處理后的結(jié)果投射陰影。關(guān)于圖像濾鏡的一般組合方式可參考 Image Filters 總覽 中的嵌套示例Blur內(nèi)嵌ColorMatrix。5.3 組合范例內(nèi)陰影 外投影同屏inner與shadowOnly可以同時(shí)使用內(nèi)陰影 只畫陰影兩個(gè)Shadow也可以分別設(shè)置不同標(biāo)志混排——例如對(duì)一個(gè)Path文字同時(shí)加外投影與內(nèi)陰影見(jiàn)測(cè)試 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注意這里第二個(gè)Shadow的blur{0}模糊半徑可以為 0此時(shí)陰影退化為純偏移的硬陰影等價(jià)于直接使用Offset濾鏡見(jiàn) offset.md常用于制造銳利的描邊式投影。六、小結(jié)與速查Shadow是聲明式圖像濾鏡掛在繪制節(jié)點(diǎn)內(nèi)部使用等價(jià)于 CSSdrop-shadow()核心參數(shù)dx/dy偏移、blur模糊半徑同時(shí)作為 X/Y 兩個(gè)方向的 sigma、color陰影顏色inner決定內(nèi)陰影shadowOnly決定是否剔除輸入內(nèi)容兩者可組合多陰影按聲明順序疊加組合最終以MakeCompose組成濾鏡鏈底層映射非內(nèi)陰影走M(jìn)akeDropShadow/MakeDropShadowOnly內(nèi)陰影走自定義MakeInnerShadow濾鏡 DAGalpha 飽和 偏移 模糊 SrcIn 裁剪圓角矩形的內(nèi)陰影優(yōu)先使用BoxBoxShadow更快且支持spread全部屬性、類型與渲染邏輯均可在倉(cāng)庫(kù)中溯源Shadow 組件、屬性類型、聲明式實(shí)現(xiàn)、底層工廠 API、端到端測(cè)試。贊分享圖形學(xué)移動(dòng)開發(fā)跨平臺(tái)UI組件【免費(fèi)下載鏈接】react-native-skiaHigh-performance React Native Graphics using Skia項(xiàng)目地址https://gitcode.com/gh_mirrors/re/react-native-skia點(diǎn)擊查看免費(fèi)下載相關(guān)推薦探索React Native的陰影魔法react-native-shadow-2探索React Native的陰影魔法react native shadow 2 在移動(dòng)應(yīng)用開發(fā)的世界中細(xì)節(jié)往往決定成敗。陰影效果作為提升UI質(zhì)感的關(guān)鍵元素上一篇QuickRecorder免費(fèi)輕量 macOS 錄屏工具7 種錄制模式一次講清下一篇OpCore-Simplify 實(shí)戰(zhàn)教程四個(gè)階段自動(dòng)生成一份可引導(dǎo)的 OpenCore EFI創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考