图形学移动开发跨平台UI组件【免费下载链接】react-native-skiaHigh-performance React Native Graphics using Skia项目地址https://gitcode.com/gh_mirrors/re/react-native-skia点击查看免费下载输出文章React Native Skia Path Effects 实战指南六种路径效果的用法、参数与源码原理导读Path Effects路径效果是 shopify/react-native-skia 中用来在绘制路径Path或形状Rect等时即时改变其外观形态的声明式组件本质上是 Skia 原生SkPathEffect的 React 封装。本文以 path-effects.md 为骨架完整讲解 Discrete、Dash、Corner、Path1D、Path2D、Line2D 六种路径效果的定义、参数、完整可运行示例与效果图并结合 PathEffect.ts、PathEffects.ts 与 PathEffects.tsRecorder 命令 等源码揭示每个组件背后的原生调用链与参数约束。读完本文你将能够在自己的 Canvas 场景中熟练运用路径效果实现虚线、粗糙手绘风、圆角拐角、自定义笔刷与网点填充等绘制效果。适用前提以下所有组件均需在Canvas内部、作为Path/Rect等绘制节点的子节点使用示例基于当前仓库 example 中的用法版本以仓库package.json实际发布内容为准。背景什么是 PathEffectReact Native Skia 如何封装它在 Skia 中SkPathEffect是一类作用于路径几何数据的处理器它在绘制发生之前修改路径的轮廓例如把路径打碎、加虚线、圆角化或用另一个路径去重复盖章。与滤镜ImageFilter不同PathEffect 改变的是路径本身的形态而非像素颜色。React Native Skia 的封装分为两层声明式组件层渲染器packages/skia/src/renderer/components/pathEffects/下的Discrete.tsx、Dash.tsx、Corner.tsx、Path1D.tsx、Path2D.tsx、Line2D.tsx、Sum.tsx分别渲染skDiscretePathEffect等底层 DOM 节点例如 Discrete.tsx 只是简单地把 props 透传给skDiscretePathEffect seed{seed} {...props} /。属性类型层packages/skia/src/dom/types/PathEffects.ts定义了每个组件的 Props 接口如DiscretePathEffectProps、DashPathEffectProps这些类型同时约束了声明式 API 的参数。在 Skia Worklet 记录阶段Recorder/commands/PathEffects.ts 中的pushPathEffect会把每种节点分发到对应的declareXxxPathEffect函数最终调用ctx.Skia.PathEffect.MakeXxx(...)原生工厂方法并把结果压入ctx.pathEffects栈当路径上有多个效果时composePathEffects会用MakeCompose逐对合并。理解这条链路有助于理解后面每个组件的参数语义与顺序敏感性。DiscretePathEffect把路径打碎成粗糙的手绘线段组件作用与参数DiscretePathEffect创建一个效果把路径按指定长度切成若干小段并将每段的端点以最大偏差随机移离原路径形成类似手绘/锯齿的离散化外观。NameType描述lengthnumber子段的长度。值越小分段越密锯齿感越强。deviationnumber端点随机移动的最大限制偏差量。值越大偏离越剧烈。seednumber修改随机性随机种子详见 SkDiscretePathEffect.h。默认值 0由组件实现提供。children?PathEffect可选的、要叠加应用的路径效果。注意seed在 PathEffects.ts 类型定义 中是必填的但声明式组件 Discrete.tsx 用SkiaDefaultPropsDiscretePathEffectProps, seed为其提供了默认值 0因此 JSX 中可以不传。完整示例import {Canvas, DiscretePathEffect, Path} from shopify/react-native-skia; const logo M256 128.015C256 111.057 234.762...; const Discrete () { return ( Canvas style{{ flex: 1 }} Path path{logo} color#61DAFB DiscretePathEffect length{10} deviation{2} / /Path /Canvas ); };效果图源码级补充参数如何流入原生层在 PathEffect.ts 中对应的原生工厂方法签名与注释为MakeDiscrete(segLength: number, dev: number, seedAssist: number): SkPathEffect; // breaks path into segments of segLength length, and randomly move // the endpoints away from the original path by a maximum of deviation而 Recorder 层 declareDiscretePathEffect 会解构{ length, deviation, seed }后直接调用PathEffect.MakeDiscrete(length, deviation, seed)三者的对应关系一目了然。端到端测试 PathEffects.spec.tsx 中用length{10} deviation{4} seed{0}绘制星形路径并与snapshots/path-effects/discrete.png做快照比对同时特意注明所有与噪声相关的测试只在 E2E 后端运行——因为随机噪声结果依赖具体渲染后端无法在 CPU 后端稳定复现。参数取值建议length越小、deviation越大效果越粗糙。seed固定后同一路径同一参数会得到确定性的随机结果适合做动画中间帧的稳定插值。DashPathEffect虚线/点线效果组件作用与参数DashPathEffect为路径添加**虚线dash**效果。它根据intervals数组定义的开-关序列沿路径绘制线段。NameType描述intervalsnumber[]数组必须包含偶数个条目偶数索引指定实线on段的长度奇数索引指定空白off段的长度。phasenumber相对于 intervals 数组起点的偏移量用于错开虚线相位。默认值 0。children?PathEffect可选的要叠加应用的路径效果。完整示例import {Canvas, DashPathEffect, Path} from shopify/react-native-skia; const logo M256 128.015C256 111.057 234.762...; const Discrete () { return ( Canvas style{{ flex: 1 }} Path path{logo} color#61DAFB stylestroke strokeWidth{4} DashPathEffect intervals{[4, 4]} / /Path /Canvas ); };示例中intervals{[4, 4]}表示画 4 个单位的实线、空 4 个单位的空白形成均匀的虚线。重要提示虚线对描边路径才有直观意义因此示例中Path使用了stylestroke与strokeWidth{4}若用于填充路径效果视觉上不明显。效果图源码级补充intervals 的偶数约束与 phase原生定义在 PathEffect.ts 中MakeDash(intervals: number[], phase?: number): SkPathEffect; // even number of entries with even indicies specifying the length of // the on intervals, and the odd indices specifying the length of off声明式组件 Dash.tsx 直接透传phase可省略Recorder 的 declareDashPathEffect 调用MakeDash(intervals, phase)。phase用于产生跑马灯式的移动虚线通过让phase随时间变化配合 动画钩子可以做出剪裁动画中常见的流动虚线进度效果。CornerPathEffect把锐角变圆角组件作用与参数CornerPathEffect把路径中的尖角替换为指定半径的圆角。NameType描述rnumber圆角半径。children?PathEffect可选的要叠加应用的路径效果。完整示例import {Canvas, CornerPathEffect, Rect} from shopify/react-native-skia; const Discrete () { return ( Canvas style{{ flex: 1 }} Rect x{64} y{16} width{128} height{256 - 16} color#61DAFB CornerPathEffect r{64} / /Rect /Canvas ); };注意本示例的作用对象不是Path而是Rect——路径效果可以作用在任意生成路径的绘制节点上这里是让矩形四角变成半径 64 的圆角。r{64}已接近矩形短边一半因此得到的几乎是一个胶囊形状。效果图源码级补充r 0 时的行为原生注释明确指出边界条件MakeCorner(radius: number): SkPathEffect | null; // if 0, returns null在 declareCornerPathEffect 中当MakeCorner(r)返回null时会抛出CornerPathEffect: couldnt create path effect。因此不要把r设为 0 或负数。作为圆角替代方案Rect自身也支持直接传r属性实现圆角但当你想在任意自定义路径上做圆角化时CornerPathEffect是通用解法。Path1DPathEffect用指定路径盖章出虚线组件作用与参数Path1DPathEffect通过沿路径重复复制replicate指定的子路径来实现虚线每一处盖章都用子路径替换一段实线子路径的朝向可随当前位置的切线与法线旋转。NameType描述pathPathDef要重复复制作为 dash 单元的路径可以是字符串 SVG 路径或SkPath。advancenumber子路径实例之间的间距。phasenumber沿路径的初始位置偏移对 advance 取模用于调整首枚章的位置。stylePath1DEffectStyle在每个点如何变换子路径基于当前位置与切线Translate/Rotate/Morph。children?PathEffect可选的要叠加应用的路径效果。完整示例import {Canvas, Path1DPathEffect, Path} from shopify/react-native-skia; const logo M256 128.015C256 111.057 234.762...; const Path1D () { return ( Canvas style{{ flex: 1 }} Path path{logo} color#61DAFB stylestroke strokeWidth{15} Path1DPathEffect pathM -10 0 L 0 -10, 10 0, 0 10 Z advance{20} phase{0} stylerotate / /Path /Canvas ); };示例中用一个小菱形M -10 0 L 0 -10, 10 0, 0 10 Z作为笔刷advance{20}控制间距stylerotate让每个菱形随路径切线方向旋转形成沿 Logo 轮廓排布的菱形链。效果图源码级补充Path1DEffectStyle 枚举与 worklet 转换原生枚举定义在 PathEffect.tsexport enum Path1DEffectStyle { Translate, // 0仅平移不旋转 Rotate, // 1随切线旋转 Morph, // 2随切线/法线变形 }JSX 中 style 传入的是字符串Recorder 的 declarePath1DPathEffect 使用enumKey(style)把字符串映射回枚举数字后再调用MakePath1D(path, advance, phase, Path1DEffectStyle[enumKey(style)])。三种风格的区别Translate子路径始终保持自身朝向仅做平移排布Rotate子路径随路径切点方向旋转示例所用Morph子路径同时依据切线做更复杂的形态变化。若MakePath1D返回null例如 path 无效Recorder 会抛出Path1DPathEffect: could not create path effect。Path2DPathEffect按矩阵格点盖章填满形状组件作用与参数Path2DPathEffect把指定的子路径按照矩阵定义的网格重复盖章stamp直到填满目标形状。NameType描述pathPathDef要盖章使用的子路径。matrixSkMatrix用于定义网格格点间距/旋转的矩阵。children?PathEffect可选的要叠加应用的路径效果。完整示例import {Canvas, Path2DPathEffect, Path, processTransform2d} from shopify/react-native-skia; const logo M256 128.015C256 111.057 234.762...; const Path2D () { return ( Canvas style{{ flex: 1 }} Path path{logo} color#61DAFB stylestroke strokeWidth{15} Path2DPathEffect pathM -10 0 L 0 -10, 10 0, 0 10 Z matrix{processTransform2d([{ scale: 40 }])} / /Path /Canvas ); };processTransform2d([{ scale: 40 }])生成一个缩放 40 倍的矩阵——矩阵的缩放决定了网格间距子路径M -10 0 L 0 -10, 10 0, 0 10 Z的尺寸约为 20×20缩放 40 后即按 40 单位间距排布。效果图源码级补充processTransform2d 与矩阵几何processTransform2d定义在 core/Matrix.tsexport const processTransform2d (transforms: Transforms3d) { worklet; return processTransform(Skia.Matrix(), transforms); };它把变换描述数组如[{ scale: 40 }]、[{ translateX: 20, translateY: 20 }, { rotate: Math.PI / 4 }]投影到一个新矩阵上。原生工厂方法 MakePath2D 的注释说明the scale of the matrix determines how far apart the path instances should be drawn即矩阵缩放决定盖章间距、旋转决定盖章朝向。Recorder 的 declarePath2DPathEffect 会先processPath把PathDef字符串/对象转为SkPath再调用MakePath2D(matrix, path)当返回null时抛出Path2DPathEffect: invalid path。Line2DPathEffect用平行线纹理填满形状组件作用与参数Line2DPathEffect用一组无限长的平行直线由矩阵决定间距与角度以填充图案的方式盖满目标形状。NameType描述widthnumber线条的宽度必须 0。matrixSkMatrix用于定义网格线间距/朝向的矩阵。children?PathEffect可选的要叠加应用的路径效果。说明原文档参数表中width一行标注的类型有笔误写成了PathDef实际类型为number以 dom/types/PathEffects.ts 中的Line2DPathEffectProps { width: number; matrix: SkMatrix }为准。完整示例import {Canvas, Line2DPathEffect, Path, processTransform2d} from shopify/react-native-skia; const logo M256 128.015C256 111.057 234.762...; const Line2D () { return ( Canvas style{{ flex: 1 }} Path path{logo} color#61DAFB stylestroke strokeWidth{15} Line2DPathEffect width{0} matrix{processTransform2d([{ scale: 8 }])} / /Path /Canvas ); };width{0}生成最细的线scale: 8让平行线以 8 单位间距排布形成细密的剖面线纹理。效果图源码级补充width 的边界条件原生注释对width有硬性约束MakeLine2D(width: number, matrix: SkMatrix): SkPathEffect | null; // width must be 0Recorder 的 declareLine2DPathEffect 在返回null时抛出Line2DPathEffect: could not create path effect。与 Path2D 同理矩阵的缩放决定线距、旋转决定线向矩阵对 Line2D 的效果描述为the scale of the provided matrix will determine how far apart the lines should be drawn, its rotation affects the lines orientation。组合多个路径效果SumPathEffect 与嵌套 children文档中每个组件都声明了可选的children?: PathEffect。当你在一个效果内嵌套另一个效果时React Native Skia 会按声明顺序把它们组合。仓库提供了显式的组合组件SumPathEffect见 Sum.tsx其 Recorder 实现 declareSumPathEffect 会弹出栈中所有已声明效果并用PathEffect.MakeSum依次合并而栈中仅有一个效果时composePathEffects使用MakeCompose(outer, inner)把两个效果按先内后外叠加outer(inner(path))。端到端测试 PathEffects.spec.tsx 演示了求和组合Path path{path} stylestroke strokeWidth{2} colorlightblue SumPathEffect DiscretePathEffect length{10} deviation{4} seed{0} / DiscretePathEffect length{10} deviation{4} seed{12345} / /SumPathEffect /Path测试用两个不同 seed 的离散效果求和生成snapshots/path-effects/sum.png快照——两种随机噪声叠加后形成更复杂的锯齿纹理。原生 MakeSum / MakeCompose 的注释也明确了区别MakeSum是两个效果按顺序先后作用于路径first(path) second(path)MakeCompose是先应用 inner 再应用 outerouter(inner(path))。实际使用时通过直接嵌套 children或显式SumPathEffect都能达到组合目的但组合顺序会影响最终效果需要按预期视觉效果调整声明次序。参数速查与实战建议组件必填参数可选参数典型用途DiscretePathEffectlength,deviationseed默认 0手绘风、粗糙边缘、噪点化描边DashPathEffectintervals偶数长度数组phase默认 0虚线、流动虚线进度动画CornerPathEffectr 0—圆角化任意路径与形状Path1DPathEffectpath,advance,phase,style—自定义笔刷虚线箭头/菱形链Path2DPathEffectpath,matrix—网格盖章填充图案纹理Line2DPathEffectwidth 0,matrix—剖面线、斜线纹理填充实战要点虚线类效果请配合stylestroke与strokeWidth使用Dash 最典型否则效果不明显矩阵类效果Path2D/Line2D矩阵缩放控制单元间距旋转控制图案朝向用processTransform2d([{ scale: N }])即可快速生成组合多个效果时注意顺序——MakeCompose先内后外MakeSum顺序叠加结果截然不同边界条件CornerPathEffect.r 0、Line2DPathEffect.width 0、无效的PathDef都会让原生工厂返回null并在 Recorder 层抛出异常编码时需避开随机类效果Discrete固定seed可获得确定性输出涉及噪声的渲染在 CPU 后端可能不稳定仓库测试将其限定在 E2E 后端运行见 PathEffects.spec.tsx。更完整的 API 类型与原生工厂签名可查阅 dom/types/PathEffects.ts 与 skia/types/PathEffect.ts如果你需要把路径效果与动画结合可进一步参考 动画相关文档。赞分享图形学移动开发跨平台UI组件【免费下载链接】react-native-skiaHigh-performance React Native Graphics using Skia项目地址https://gitcode.com/gh_mirrors/re/react-native-skia点击查看免费下载相关推荐Cytoscape.js 最短路径实战eles.dijkstra() 算法用法、参数与源码原理详解Cytoscape.js 最短路径实战eles.dijkstra 算法用法、参数与源码原理详解 导读 Dijkstra迪杰斯特拉算法是图论中最经典的单源数据可视化MoviePy 淡出效果 FadeOut 深度指南参数、源码原理与实战用法MoviePy 淡出效果 FadeOut 深度指南参数、源码原理与实战用法 本篇指南以 MoviePy 官方 API 参考文档 moviepy.video.f音视频视频处理音频处理在电脑上重温经典Citra 3DS模拟器终极使用指南在电脑上重温经典Citra 3DS模拟器终极使用指南 想在电脑大屏幕上畅玩《精灵宝可梦》、《塞尔达传说》等Nintendo 3DS经典游戏吗Citra模拟器上一篇Moonlight-Switch在任天堂Switch上实现云游戏的完整指南下一篇网站逆向工程检视指南基于 AI 编码 Agent 的像素级克隆五阶段实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 React Native Skia Path Effects 实战指南：六种路径效果的用法、参数与源码原理
图形学移动开发跨平台UI组件【免费下载链接】react-native-skiaHigh-performance React Native Graphics using Skia项目地址https://gitcode.com/gh_mirrors/re/react-native-skia点击查看免费下载输出文章React Native Skia Path Effects 实战指南六种路径效果的用法、参数与源码原理导读Path Effects路径效果是 shopify/react-native-skia 中用来在绘制路径Path或形状Rect等时即时改变其外观形态的声明式组件本质上是 Skia 原生SkPathEffect的 React 封装。本文以 path-effects.md 为骨架完整讲解 Discrete、Dash、Corner、Path1D、Path2D、Line2D 六种路径效果的定义、参数、完整可运行示例与效果图并结合 PathEffect.ts、PathEffects.ts 与 PathEffects.tsRecorder 命令 等源码揭示每个组件背后的原生调用链与参数约束。读完本文你将能够在自己的 Canvas 场景中熟练运用路径效果实现虚线、粗糙手绘风、圆角拐角、自定义笔刷与网点填充等绘制效果。适用前提以下所有组件均需在Canvas内部、作为Path/Rect等绘制节点的子节点使用示例基于当前仓库 example 中的用法版本以仓库package.json实际发布内容为准。背景什么是 PathEffectReact Native Skia 如何封装它在 Skia 中SkPathEffect是一类作用于路径几何数据的处理器它在绘制发生之前修改路径的轮廓例如把路径打碎、加虚线、圆角化或用另一个路径去重复盖章。与滤镜ImageFilter不同PathEffect 改变的是路径本身的形态而非像素颜色。React Native Skia 的封装分为两层声明式组件层渲染器packages/skia/src/renderer/components/pathEffects/下的Discrete.tsx、Dash.tsx、Corner.tsx、Path1D.tsx、Path2D.tsx、Line2D.tsx、Sum.tsx分别渲染skDiscretePathEffect等底层 DOM 节点例如 Discrete.tsx 只是简单地把 props 透传给skDiscretePathEffect seed{seed} {...props} /。属性类型层packages/skia/src/dom/types/PathEffects.ts定义了每个组件的 Props 接口如DiscretePathEffectProps、DashPathEffectProps这些类型同时约束了声明式 API 的参数。在 Skia Worklet 记录阶段Recorder/commands/PathEffects.ts 中的pushPathEffect会把每种节点分发到对应的declareXxxPathEffect函数最终调用ctx.Skia.PathEffect.MakeXxx(...)原生工厂方法并把结果压入ctx.pathEffects栈当路径上有多个效果时composePathEffects会用MakeCompose逐对合并。理解这条链路有助于理解后面每个组件的参数语义与顺序敏感性。DiscretePathEffect把路径打碎成粗糙的手绘线段组件作用与参数DiscretePathEffect创建一个效果把路径按指定长度切成若干小段并将每段的端点以最大偏差随机移离原路径形成类似手绘/锯齿的离散化外观。NameType描述lengthnumber子段的长度。值越小分段越密锯齿感越强。deviationnumber端点随机移动的最大限制偏差量。值越大偏离越剧烈。seednumber修改随机性随机种子详见 SkDiscretePathEffect.h。默认值 0由组件实现提供。children?PathEffect可选的、要叠加应用的路径效果。注意seed在 PathEffects.ts 类型定义 中是必填的但声明式组件 Discrete.tsx 用SkiaDefaultPropsDiscretePathEffectProps, seed为其提供了默认值 0因此 JSX 中可以不传。完整示例import {Canvas, DiscretePathEffect, Path} from shopify/react-native-skia; const logo M256 128.015C256 111.057 234.762...; const Discrete () { return ( Canvas style{{ flex: 1 }} Path path{logo} color#61DAFB DiscretePathEffect length{10} deviation{2} / /Path /Canvas ); };效果图源码级补充参数如何流入原生层在 PathEffect.ts 中对应的原生工厂方法签名与注释为MakeDiscrete(segLength: number, dev: number, seedAssist: number): SkPathEffect; // breaks path into segments of segLength length, and randomly move // the endpoints away from the original path by a maximum of deviation而 Recorder 层 declareDiscretePathEffect 会解构{ length, deviation, seed }后直接调用PathEffect.MakeDiscrete(length, deviation, seed)三者的对应关系一目了然。端到端测试 PathEffects.spec.tsx 中用length{10} deviation{4} seed{0}绘制星形路径并与snapshots/path-effects/discrete.png做快照比对同时特意注明所有与噪声相关的测试只在 E2E 后端运行——因为随机噪声结果依赖具体渲染后端无法在 CPU 后端稳定复现。参数取值建议length越小、deviation越大效果越粗糙。seed固定后同一路径同一参数会得到确定性的随机结果适合做动画中间帧的稳定插值。DashPathEffect虚线/点线效果组件作用与参数DashPathEffect为路径添加**虚线dash**效果。它根据intervals数组定义的开-关序列沿路径绘制线段。NameType描述intervalsnumber[]数组必须包含偶数个条目偶数索引指定实线on段的长度奇数索引指定空白off段的长度。phasenumber相对于 intervals 数组起点的偏移量用于错开虚线相位。默认值 0。children?PathEffect可选的要叠加应用的路径效果。完整示例import {Canvas, DashPathEffect, Path} from shopify/react-native-skia; const logo M256 128.015C256 111.057 234.762...; const Discrete () { return ( Canvas style{{ flex: 1 }} Path path{logo} color#61DAFB stylestroke strokeWidth{4} DashPathEffect intervals{[4, 4]} / /Path /Canvas ); };示例中intervals{[4, 4]}表示画 4 个单位的实线、空 4 个单位的空白形成均匀的虚线。重要提示虚线对描边路径才有直观意义因此示例中Path使用了stylestroke与strokeWidth{4}若用于填充路径效果视觉上不明显。效果图源码级补充intervals 的偶数约束与 phase原生定义在 PathEffect.ts 中MakeDash(intervals: number[], phase?: number): SkPathEffect; // even number of entries with even indicies specifying the length of // the on intervals, and the odd indices specifying the length of off声明式组件 Dash.tsx 直接透传phase可省略Recorder 的 declareDashPathEffect 调用MakeDash(intervals, phase)。phase用于产生跑马灯式的移动虚线通过让phase随时间变化配合 动画钩子可以做出剪裁动画中常见的流动虚线进度效果。CornerPathEffect把锐角变圆角组件作用与参数CornerPathEffect把路径中的尖角替换为指定半径的圆角。NameType描述rnumber圆角半径。children?PathEffect可选的要叠加应用的路径效果。完整示例import {Canvas, CornerPathEffect, Rect} from shopify/react-native-skia; const Discrete () { return ( Canvas style{{ flex: 1 }} Rect x{64} y{16} width{128} height{256 - 16} color#61DAFB CornerPathEffect r{64} / /Rect /Canvas ); };注意本示例的作用对象不是Path而是Rect——路径效果可以作用在任意生成路径的绘制节点上这里是让矩形四角变成半径 64 的圆角。r{64}已接近矩形短边一半因此得到的几乎是一个胶囊形状。效果图源码级补充r 0 时的行为原生注释明确指出边界条件MakeCorner(radius: number): SkPathEffect | null; // if 0, returns null在 declareCornerPathEffect 中当MakeCorner(r)返回null时会抛出CornerPathEffect: couldnt create path effect。因此不要把r设为 0 或负数。作为圆角替代方案Rect自身也支持直接传r属性实现圆角但当你想在任意自定义路径上做圆角化时CornerPathEffect是通用解法。Path1DPathEffect用指定路径盖章出虚线组件作用与参数Path1DPathEffect通过沿路径重复复制replicate指定的子路径来实现虚线每一处盖章都用子路径替换一段实线子路径的朝向可随当前位置的切线与法线旋转。NameType描述pathPathDef要重复复制作为 dash 单元的路径可以是字符串 SVG 路径或SkPath。advancenumber子路径实例之间的间距。phasenumber沿路径的初始位置偏移对 advance 取模用于调整首枚章的位置。stylePath1DEffectStyle在每个点如何变换子路径基于当前位置与切线Translate/Rotate/Morph。children?PathEffect可选的要叠加应用的路径效果。完整示例import {Canvas, Path1DPathEffect, Path} from shopify/react-native-skia; const logo M256 128.015C256 111.057 234.762...; const Path1D () { return ( Canvas style{{ flex: 1 }} Path path{logo} color#61DAFB stylestroke strokeWidth{15} Path1DPathEffect pathM -10 0 L 0 -10, 10 0, 0 10 Z advance{20} phase{0} stylerotate / /Path /Canvas ); };示例中用一个小菱形M -10 0 L 0 -10, 10 0, 0 10 Z作为笔刷advance{20}控制间距stylerotate让每个菱形随路径切线方向旋转形成沿 Logo 轮廓排布的菱形链。效果图源码级补充Path1DEffectStyle 枚举与 worklet 转换原生枚举定义在 PathEffect.tsexport enum Path1DEffectStyle { Translate, // 0仅平移不旋转 Rotate, // 1随切线旋转 Morph, // 2随切线/法线变形 }JSX 中 style 传入的是字符串Recorder 的 declarePath1DPathEffect 使用enumKey(style)把字符串映射回枚举数字后再调用MakePath1D(path, advance, phase, Path1DEffectStyle[enumKey(style)])。三种风格的区别Translate子路径始终保持自身朝向仅做平移排布Rotate子路径随路径切点方向旋转示例所用Morph子路径同时依据切线做更复杂的形态变化。若MakePath1D返回null例如 path 无效Recorder 会抛出Path1DPathEffect: could not create path effect。Path2DPathEffect按矩阵格点盖章填满形状组件作用与参数Path2DPathEffect把指定的子路径按照矩阵定义的网格重复盖章stamp直到填满目标形状。NameType描述pathPathDef要盖章使用的子路径。matrixSkMatrix用于定义网格格点间距/旋转的矩阵。children?PathEffect可选的要叠加应用的路径效果。完整示例import {Canvas, Path2DPathEffect, Path, processTransform2d} from shopify/react-native-skia; const logo M256 128.015C256 111.057 234.762...; const Path2D () { return ( Canvas style{{ flex: 1 }} Path path{logo} color#61DAFB stylestroke strokeWidth{15} Path2DPathEffect pathM -10 0 L 0 -10, 10 0, 0 10 Z matrix{processTransform2d([{ scale: 40 }])} / /Path /Canvas ); };processTransform2d([{ scale: 40 }])生成一个缩放 40 倍的矩阵——矩阵的缩放决定了网格间距子路径M -10 0 L 0 -10, 10 0, 0 10 Z的尺寸约为 20×20缩放 40 后即按 40 单位间距排布。效果图源码级补充processTransform2d 与矩阵几何processTransform2d定义在 core/Matrix.tsexport const processTransform2d (transforms: Transforms3d) { worklet; return processTransform(Skia.Matrix(), transforms); };它把变换描述数组如[{ scale: 40 }]、[{ translateX: 20, translateY: 20 }, { rotate: Math.PI / 4 }]投影到一个新矩阵上。原生工厂方法 MakePath2D 的注释说明the scale of the matrix determines how far apart the path instances should be drawn即矩阵缩放决定盖章间距、旋转决定盖章朝向。Recorder 的 declarePath2DPathEffect 会先processPath把PathDef字符串/对象转为SkPath再调用MakePath2D(matrix, path)当返回null时抛出Path2DPathEffect: invalid path。Line2DPathEffect用平行线纹理填满形状组件作用与参数Line2DPathEffect用一组无限长的平行直线由矩阵决定间距与角度以填充图案的方式盖满目标形状。NameType描述widthnumber线条的宽度必须 0。matrixSkMatrix用于定义网格线间距/朝向的矩阵。children?PathEffect可选的要叠加应用的路径效果。说明原文档参数表中width一行标注的类型有笔误写成了PathDef实际类型为number以 dom/types/PathEffects.ts 中的Line2DPathEffectProps { width: number; matrix: SkMatrix }为准。完整示例import {Canvas, Line2DPathEffect, Path, processTransform2d} from shopify/react-native-skia; const logo M256 128.015C256 111.057 234.762...; const Line2D () { return ( Canvas style{{ flex: 1 }} Path path{logo} color#61DAFB stylestroke strokeWidth{15} Line2DPathEffect width{0} matrix{processTransform2d([{ scale: 8 }])} / /Path /Canvas ); };width{0}生成最细的线scale: 8让平行线以 8 单位间距排布形成细密的剖面线纹理。效果图源码级补充width 的边界条件原生注释对width有硬性约束MakeLine2D(width: number, matrix: SkMatrix): SkPathEffect | null; // width must be 0Recorder 的 declareLine2DPathEffect 在返回null时抛出Line2DPathEffect: could not create path effect。与 Path2D 同理矩阵的缩放决定线距、旋转决定线向矩阵对 Line2D 的效果描述为the scale of the provided matrix will determine how far apart the lines should be drawn, its rotation affects the lines orientation。组合多个路径效果SumPathEffect 与嵌套 children文档中每个组件都声明了可选的children?: PathEffect。当你在一个效果内嵌套另一个效果时React Native Skia 会按声明顺序把它们组合。仓库提供了显式的组合组件SumPathEffect见 Sum.tsx其 Recorder 实现 declareSumPathEffect 会弹出栈中所有已声明效果并用PathEffect.MakeSum依次合并而栈中仅有一个效果时composePathEffects使用MakeCompose(outer, inner)把两个效果按先内后外叠加outer(inner(path))。端到端测试 PathEffects.spec.tsx 演示了求和组合Path path{path} stylestroke strokeWidth{2} colorlightblue SumPathEffect DiscretePathEffect length{10} deviation{4} seed{0} / DiscretePathEffect length{10} deviation{4} seed{12345} / /SumPathEffect /Path测试用两个不同 seed 的离散效果求和生成snapshots/path-effects/sum.png快照——两种随机噪声叠加后形成更复杂的锯齿纹理。原生 MakeSum / MakeCompose 的注释也明确了区别MakeSum是两个效果按顺序先后作用于路径first(path) second(path)MakeCompose是先应用 inner 再应用 outerouter(inner(path))。实际使用时通过直接嵌套 children或显式SumPathEffect都能达到组合目的但组合顺序会影响最终效果需要按预期视觉效果调整声明次序。参数速查与实战建议组件必填参数可选参数典型用途DiscretePathEffectlength,deviationseed默认 0手绘风、粗糙边缘、噪点化描边DashPathEffectintervals偶数长度数组phase默认 0虚线、流动虚线进度动画CornerPathEffectr 0—圆角化任意路径与形状Path1DPathEffectpath,advance,phase,style—自定义笔刷虚线箭头/菱形链Path2DPathEffectpath,matrix—网格盖章填充图案纹理Line2DPathEffectwidth 0,matrix—剖面线、斜线纹理填充实战要点虚线类效果请配合stylestroke与strokeWidth使用Dash 最典型否则效果不明显矩阵类效果Path2D/Line2D矩阵缩放控制单元间距旋转控制图案朝向用processTransform2d([{ scale: N }])即可快速生成组合多个效果时注意顺序——MakeCompose先内后外MakeSum顺序叠加结果截然不同边界条件CornerPathEffect.r 0、Line2DPathEffect.width 0、无效的PathDef都会让原生工厂返回null并在 Recorder 层抛出异常编码时需避开随机类效果Discrete固定seed可获得确定性输出涉及噪声的渲染在 CPU 后端可能不稳定仓库测试将其限定在 E2E 后端运行见 PathEffects.spec.tsx。更完整的 API 类型与原生工厂签名可查阅 dom/types/PathEffects.ts 与 skia/types/PathEffect.ts如果你需要把路径效果与动画结合可进一步参考 动画相关文档。赞分享图形学移动开发跨平台UI组件【免费下载链接】react-native-skiaHigh-performance React Native Graphics using Skia项目地址https://gitcode.com/gh_mirrors/re/react-native-skia点击查看免费下载相关推荐Cytoscape.js 最短路径实战eles.dijkstra() 算法用法、参数与源码原理详解Cytoscape.js 最短路径实战eles.dijkstra 算法用法、参数与源码原理详解 导读 Dijkstra迪杰斯特拉算法是图论中最经典的单源数据可视化MoviePy 淡出效果 FadeOut 深度指南参数、源码原理与实战用法MoviePy 淡出效果 FadeOut 深度指南参数、源码原理与实战用法 本篇指南以 MoviePy 官方 API 参考文档 moviepy.video.f音视频视频处理音频处理在电脑上重温经典Citra 3DS模拟器终极使用指南在电脑上重温经典Citra 3DS模拟器终极使用指南 想在电脑大屏幕上畅玩《精灵宝可梦》、《塞尔达传说》等Nintendo 3DS经典游戏吗Citra模拟器上一篇Moonlight-Switch在任天堂Switch上实现云游戏的完整指南下一篇网站逆向工程检视指南基于 AI 编码 Agent 的像素级克隆五阶段实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考