[开源] react-rough-fiber 一个以手绘风格绘制已有 SVG 库的 React 渲染器
bowen7 · 2023-04-23 13:34:08 +08:00 · 2696 次点击这是一个创建于 917 天前的主题，其中的信息可能已经有所发展或是发生改变。
介绍
使用 react-rough-fiber ，可以非常方便地集成已有的 SVG 库，将它们渲染成手绘风格的图形
它的实现原理是 React Renderer + Rough.js 。如果你对实现的过程有兴趣，可以看看我的这篇 博客
测试用例 涵盖 React 17 & 18
安装
npm i react-rough-fiber react-reconciler
⚠️：如果你使用的是 React 17 ，则需要安装 [email protected]
使用
最少只需要加三行代码，就可以将 SVG 渲染成手绘风格，一个最基本的演示
import { RoughSVG } from 'react-rough-fiber'
export default function App() {
return (
<RoughSVG>
<svg viewBox="0 0 128 128" width="128" height="128">
<circle cx={64} cy={64} r={48} stroke="currentColor" fill="#82ca9d" />
</svg>
</RoughSVG>
)
}
与 SVG Icon / SVG Emoji 集成：
与图标库 recharts 集成：
可以传入 Roug.js 配置更改手绘风格。配置支持函数类型，可根据不同形状，返回不同配置
文档中有很多示例：
FAQ
Q: 适用于所有 SVG 库吗
A：并不是。react-rough-fiber 是一个 React renderer ，只适用于用 React 创建的元素。例如 ECharts 等，它们是不基于任何框架的渲染逻辑（比如 ECharts 的 ZRender)，所以无法适用 react-rough-fiber
Q：那也无法适用于本地 /网络 SVG 文件？
A：可以使用 SVGR 将本地的 SVG 转化为 React Component ；可以使用 react-inlinesvg 加载 SVG 字符串 /网络 SVG 文件，转换为 React Component. 这里有一个简单的 例子
关于
react-rough-fiber 基于或灵感来自以下开源项目：
如果你发现了任何 Bug ，可以在 Issue 提出；有任何讨论、建议，可以在这里或者 Github Discussions 留言
第 1 条附言 · 2023-04-23 14:24:50 +08:00
与图标库 recharts 集成 => 与图表库 recharts 集成
 |
1
me221 2023-04-23 13:56:36 +08:00
太牛了!
|
 |
2
Alexonx 2023-04-23 14:22:42 +08:00
牛批 一直在找一个漂亮的手绘风格的 Icon 库 现在这个渲染器完美解决了 ❤
|
 |
3
justin2018 2023-04-23 18:05:46 +08:00
这个好~ 感谢分享
|
 |
4
K1W1 2023-04-23 18:21:53 +08:00 via iPhone
牛哇
|
 |
5
BaffinLee 2023-04-23 19:24:24 +08:00
awesome!
|
 |
6
IamJ 2023-04-23 20:18:58 +08:00 via Android
不错，喜欢这风格
|
 |
7
Cryse 2023-04-24 03:57:27 +08:00
赞，非常有创意啊
|
 |
8
taylorins 2023-04-24 10:23:00 +08:00
小前端路过，好漂亮收藏了！
|
 |
9
AlanWang3 2023-04-24 15:49:23 +08:00  1
赞！我之前也用 roughjs 做过类似的东西，不过做的比较粗糙。https://github.com/3Alan/alan-ui
|
 |
10
D2h0VL89HMAU417B 2023-04-28 09:36:59 +08:00
收藏了
|
Select Language