socket.io 및 fabric.js를 사용하여 주로 this existing project (write up)을 기반으로하는 공동 작업용 디지털 화이트 보드 프로젝트에 지원되는 이미지를 얻는 데 어려움을 겪고 있습니다.Fabric.js 및 Socket.io의 이미지 지원 공동 작업용 화이트 보드
소스 코드 : https://bitbucket.org/dhildreth/ts-motd
이 경로를 그리기와 텍스트를 삽입 완벽하게 잘 작동하지만 내가 이미지를 삽입 할 때, 상황이 다르게 작동하고 나는 내 머리 같네요. this fabricjs google group post에서 언급했듯이 동기/비동기 동작과 관련이있을 수 있습니다.
- 서버 (S)을 시작하고 두 오픈 브라우저 창 (C1, C2)
재현 방법.
- C1에서 이미지를 삽입하십시오. C2에 이미지가 나타납니다.
- 닫기 및 다시 열기 C2
- C2에 개체를 추가하십시오.
예상 결과 : C1은 C2에서 만들어진 개체로 업데이트됩니다.
실제 결과 : C1은 C2에서 생성 된 개체의 업데이트를 더 이상받지 않습니다. 여기
이미지 행동 대 정상적인 동작의 일부 화면 녹화입니다
- 좋은 행동 : http://recordit.co/I2Dcpva50C
- 나쁜 행동 : 추가 검사시 http://recordit.co/F8KPTaCqkD
는, C1은 지금의 두 복사본을 가지고 이미지 (아래 이미지를 드러내 기 위해 이미지를 드래그)에서 다음 오류가 발생합니다.
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)
그래서 이미지를 데이터베이스에 두 번 추가하려고합니다. 즉, 간단한 객체 경로와 다른 "object : added"이벤트가 발생합니다.
나는 무슨 일이 일어나고 있는지 더 잘 이해할 수 있도록 많은 코드를 사용하여 코드를 구현했습니다. 나는 객체 경로를 삽입하는 정상적인 동작을 이미지 삽입 작업과 비교했다. pastebin notes을 참조하십시오.
나는 누군가가이 이미지를 통해 나를 도울 수 있기를 바랍니다. 그래서 이미지는 경로 나 텍스트 객체처럼 잘 작동합니다.