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

263 天前
 Q9K

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

716 次点击
所在节点    问与答
3 条回复
cutemurphy2888
263 天前
哈哈·
huntagain2008
263 天前
小白我是根本不懂,但是我问了 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
263 天前
我也这样问过,这个 y-canvas 是他编的)

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/970242

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX