V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Q9K
V2EX  ›  问与答

关于编辑器共享光标的问题

  •  
  •   Q9K · 228 天前 · 668 次点击
    这是一个创建于 228 天前的主题,其中的信息可能已经有所发展或是发生改变。

    不好意思又来提问了, 大家好, 我们现在已经实现了文本编辑器的协同编辑功能, 我们现在需要实现 canvas 的协同编辑功能, 我们视图通过 yjs 实现,但是苦于参考资料太少了, 能问一下大家还有其他的解决办法吗

    3 条回复    2023-09-02 15:18:47 +08:00
    cutemurphy2888
        1
    cutemurphy2888  
       228 天前
    哈哈·
    huntagain2008
        2
    huntagain2008  
       228 天前
    小白我是根本不懂,但是我问了 poe.com 的 GPT-4:

    [Yjs ↗]( https://github.com/yjs/yjs) 是一个开源的实时协作框架,它可以用于实现各种类型的协作工具,包括文本编辑器和 canvas 。Yjs 通过共享数据类型( CRDTs )和 peer-to-peer 网络协议来实现数据的实时同步,这使得在没有服务器的情况下也可以实现实时协作。

    对于 canvas 的协同编辑,Yjs 提供了一个名为 [y-canvas ↗]( https://github.com/yjs/y-canvas) 的库来帮助开发者实现这个功能。y-canvas 为 canvas 元素提供了一种抽象的数据结构,使得任何对 canvas 的修改都可以通过 Yjs 的实时同步功能进行分享。

    以下是一个简单的 y-canvas 使用示例:

    ```javascript
    import { Y } from 'yjs'
    import { WebsocketProvider } from 'y-websocket'
    import { ySyncPlugin, yUndoPlugin, undo, redo } from 'y-prosemirror'
    import { EditorState } from 'prosemirror-state'
    import { ySyncPluginKey } from 'y-prosemirror'
    import { yCanvas } from 'y-canvas'

    const doc = new Y.Doc()
    const provider = new WebsocketProvider('ws://localhost:1234', 'canvas-demo', doc)
    doc.on('sync', () => {
    const canvas = document.createElement('canvas')
    canvas.width = 800
    canvas.height = 600
    document.body.appendChild(canvas)
    const context = canvas.getContext('2d')
    yCanvas(context, doc.getArray('canvas'))
    })
    ```

    在这个示例中,我们首先创建了一个新的 Yjs 文档,然后通过 WebsocketProvider 连接到一个 websocket 服务器。当文档与服务器同步时,我们创建一个新的 canvas 元素,并使用 yCanvas 将其与 Yjs 文档中的一个数组关联起来。这样,所有对 canvas 的修改都会自动同步到所有连接的客户端。

    如果你想了解更多关于 Yjs 和 y-canvas 的信息,你可以查看他们的官方文档和 GitHub 仓库:

    - [Yjs 官方文档 ↗]( https://docs.yjs.dev/)
    - [Yjs GitHub 仓库 ↗]( https://github.com/yjs/yjs)
    - [y-canvas GitHub 仓库 ↗]( https://github.com/yjs/y-canvas)

    如果你发现 Yjs 不满足你的需求,你还可以考虑使用其他的实时协作库,如 [ShareDB ↗]( https://github.com/share/sharedb) 或 [Automerge ↗]( https://github.com/automerge/automerge)。这些库都提供了强大的实时协作功能,但可能需要更多的定制和集成工作。
    Q9K
        3
    Q9K  
    OP
       227 天前   ❤️ 1
    我也这样问过,这个 y-canvas 是他编的)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5399 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 138ms · UTC 06:00 · PVG 14:00 · LAX 23:00 · JFK 02:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.