Question

我正在努力将图像支持添加到我的协作数字白板项目中，该项目主要基于this existing project（write up）使用socket.io和fabric.js。

源代码： https://bitbucket.org/dhildreth/ts-motd

绘制路径和插入文本的工作非常精细，但是当我尝试插入图像时，事情表现不一样，我担心它会超出我的头脑。它可能与同步/异步行为有关，如this fabricjs google group post中所述。

重现步骤：

启动服务器（S），然后打开两个浏览器窗口（C1，C2）。
在C1中，插入图像。请注意，图像显示在C2中。
关闭并重新打开C2
将任何对象添加到C2。

预期结果：使用C2中创建的对象更新C1。

实际结果：C1不再接收在C2中创建的对象的更新。

以下是一些正常行为与图像行为的屏幕录制：

良好行为：http://recordit.co/I2Dcpva50C
行为不当：http://recordit.co/F8KPTaCqkD

经过进一步检查，C1现在有两个图像副本（拖动图像，以显示下面的图像）并在S上发生以下错误：

Error: Duplicate key for property uuid: 84a9395514b844988dba11bae5cfff3e
    at UniqueIndex.set (/Users/derek/websites/ts-motd/node_modules/lokijs/src/lokijs.js:4767:17)
    at LokiEventEmitter.Collection.add (/Users/derek/websites/ts-motd/node_modules/lokijs/src/lokijs.js:4037:31)
    at LokiEventEmitter.Collection.insertOne (/Users/derek/websites/ts-motd/node_modules/lokijs/src/lokijs.js:3911:17)
    at LokiEventEmitter.Collection.insert (/Users/derek/websites/ts-motd/node_modules/lokijs/src/lokijs.js:3865:21)
    at /Users/derek/websites/ts-motd/lib/events.js:29:33
    at Array.forEach (native)
    at /Users/derek/websites/ts-motd/lib/events.js:23:22
    at onLoaded (/Users/derek/websites/ts-motd/node_modules/fabric/dist/fabric.js:670:23)
    at /Users/derek/websites/ts-motd/node_modules/fabric/dist/fabric.js:696:13
    at klass.fabric.Image.fabric.util.createClass.setElement (/Users/derek/websites/ts-motd/node_modules/fabric/dist/fabric.js:18149:9)

因此，它试图将图像添加到数据库两次，这意味着它会触发＆＃34;对象：添加＆＃34; event，与简单的对象路径不同。

我使用一堆输出对代码进行了检测，以便更好地了解发生了什么。我比较了插入对象路径的正常操作和插入图像的操作。请参阅pastebin notes。

我希望有人可以帮助我完成这一步，这样图像就可以像路径或文本对象一样工作。

Answer 1

修复是一个组合。 1）确保设置fabricObject.remote以便它不会触发对象：再添加事件和2）使用loadFromJSON的回调来渲染画布而不是稍后渲染以给图像加载时间。链接到修复提交：

https://bitbucket.org/dhildreth/ts-motd/commits/dee67481c17842d349fe576cc8629b1d4ef3eb66

Fabric.js和Socket.io协作白板的图像支持

1 个答案: