V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
bowen7
V2EX  ›  分享创造

[开源] react-rough-fiber 一个以手绘风格绘制已有 SVG 库的 React 渲染器

  •  3
     
  •   bowen7 · 2023-04-23 13:34:08 +08:00 · 2131 次点击
    这是一个创建于 571 天前的主题,其中的信息可能已经有所发展或是发生改变。

    介绍

    使用 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>
      )
    }
    

    simple demo

    与 SVG Icon / SVG Emoji 集成:

    icon demo

    与图标库 recharts 集成:

    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 集成
    10 条回复    2023-04-28 09:36:59 +08:00
    me221
        1
    me221  
       2023-04-23 13:56:36 +08:00
    太牛了!
    Alexonx
        2
    Alexonx  
       2023-04-23 14:22:42 +08:00
    牛批 一直在找一个漂亮的手绘风格的 Icon 库 现在这个渲染器完美解决了 ❤
    justin2018
        3
    justin2018  
       2023-04-23 18:05:46 +08:00
    这个好~ 感谢分享
    K1W1
        4
    K1W1  
       2023-04-23 18:21:53 +08:00 via iPhone
    牛哇
    BaffinLee
        5
    BaffinLee  
       2023-04-23 19:24:24 +08:00
    awesome!
    IamJ
        6
    IamJ  
       2023-04-23 20:18:58 +08:00 via Android
    不错,喜欢这风格
    Cryse
        7
    Cryse  
       2023-04-24 03:57:27 +08:00
    赞,非常有创意啊
    taylorins
        8
    taylorins  
       2023-04-24 10:23:00 +08:00
    小前端路过,好漂亮收藏了!
    AlanWang3
        9
    AlanWang3  
       2023-04-24 15:49:23 +08:00   ❤️ 1
    赞!我之前也用 roughjs 做过类似的东西,不过做的比较粗糙。https://github.com/3Alan/alan-ui
    D2h0VL89HMAU417B
        10
    D2h0VL89HMAU417B  
       2023-04-28 09:36:59 +08:00
    收藏了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1505 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 17:21 · PVG 01:21 · LAX 09:21 · JFK 12:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.