爱意满满的作品展示区。
xiaoiver

我正在写一份无限画布教程

  •  4
     
  •   xiaoiver · Mar 18, 2025 · 3987 views
    This topic created in 446 days ago, the information mentioned may be changed or developed.

    你一定见过甚至使用过各种包含无限画布的应用,infinitecanvas 上就展示了从设计工具到创意画板在内的众多案例,其中不乏一些知名产品包括 Figma 、Modyfi 、Motiff 、rnote 、tldraw 、excalidraw 等等。

    作为一个前端,我对其中涉及到的渲染技术很感兴趣。尽管 tldraw 、excalidraw 等普遍使用易用性更高的 Canvas2D / SVG 技术,但 JS 和 Rust 生态中也有很多编辑器、设计工具使用更底层的渲染技术对 2D 图形进行 GPU 加速,以获得更好的性能和体验。

    因此在这个教程中,我希望实现以下特性:

    • 使用支持 WebGL1/2 和 WebGPU 的硬件抽象层。
    • 使用 SDF 渲染圆、椭圆、矩形等。
    • GPU 加速的文本和贝塞尔曲线渲染。
    • 使用 rough.js 支持手绘风格。
    • 使用 CRDT 支持协同 Yjs 。

    目前已经写了十多章了,希望得到更多关注!

    项目地址: https://github.com/xiaoiver/infinite-canvas-tutorial

    19 replies    2025-03-18 18:01:43 +08:00
    chingli
        1
    chingli  
       Mar 18, 2025 via Android
    这个也太强了,现代计算机绘图技术之集大成,一定认真学习。
    shilianmlxg
        2
    shilianmlxg  
       Mar 18, 2025 via iPhone
    tql 正好现在在学可视化拖拽
    xiaoiver
        3
    xiaoiver  
    OP
       Mar 18, 2025
    @chingli 谢谢支持,但也没这么夸张😊。借鉴了非常多已有的实践,在过程中我也在学习,也是想做这个教程的初衷。
    Rrrrrr
        4
    Rrrrrr  
       Mar 18, 2025
    先 收藏 再看
    kenberkeley
        5
    kenberkeley  
       Mar 18, 2025 via iPhone
    请收下我的膝盖。
    rekulas
        6
    rekulas  
       Mar 18, 2025
    写图形的都是大佬
    KMpAn8Obw1QhPoEP
        7
    KMpAn8Obw1QhPoEP  
       Mar 18, 2025 via Android
    大佬🐮🍺 已 star 不过好像有点太硬核了 在线求一份 Canvas/SVG 制作画布的教程…
    SayHelloHi
        8
    SayHelloHi  
       Mar 18, 2025
    在线求一份 Canvas/SVG 制作画布的教程 +1
    sakura0508
        9
    sakura0508  
       Mar 18, 2025
    🐮🍺 先 start 再看
    Hanser002
        10
    Hanser002  
       Mar 18, 2025
    太赞了!最近正好在研究 webGPU
    boyzhang
        11
    boyzhang  
       Mar 18, 2025
    很强啊,收藏了,有空就学习下
    Daru
        12
    Daru  
       Mar 18, 2025
    太強了,正好需要這個,收藏了
    Chiqing
        13
    Chiqing  
       Mar 18, 2025
    想问问佬,这种教程网站是有模板的吗,感觉看过几次类似风格的
    sankemao
        14
    sankemao  
       Mar 18, 2025
    之前写画布应用的时候参考过
    xiaoiver
        15
    xiaoiver  
    OP
       Mar 18, 2025   ❤️ 1
    @Chiqing 这个用的是 VitePress 生成的,默认主题
    maoxianCk
        16
    maoxianCk  
       Mar 18, 2025
    强,支持大佬
    terito11122
        17
    terito11122  
       Mar 18, 2025
    太强了 学习下
    zhangchaojie
        18
    zhangchaojie  
       Mar 18, 2025
    强,star 了
    shui14
        19
    shui14  
       Mar 18, 2025
    可以直接放弃 webgl2 。除非锚定 web ,直接 dawn 开发向下兼容到 js 应该更有空间
    跨平台,按照现在 llm 的趋势,很快就会有全能 app 出现,imgui 迎来第二波春天,我压宝它
    类似的 zed 那个团队的 gpui ,长桥的开发谈到过不过他们是桌面。还有一个香港的团队搞光追也挺有特色
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2657 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 71ms · UTC 02:01 · PVG 10:01 · LAX 19:01 · JFK 22:01
    ♥ Do have faith in what you're doing.