search

konvajs / vue-konva

Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue.
https://konvajs.github.io/docs/vue/
MIT License
1.18k stars 131 forks source link

Konvajs/Vue-Konva connect the shapes using the connector dynamically #177

Closed Aravinda93 closed 3 months ago

Aravinda93 commented 3 years ago

I am using Konvajs/Vue-Konva within my Vuejs/Nuxt application. Using Konva I am creating the Rect shape dynamically at run time. Now I would like to use some sort of Connectors to connect the different Rect Shapes so that I can have the logic of which is source Rect and which is Target Rect so as to build the Parent-Child relationship.

I am creating the connectors using the same approach as shapes but for some reason, it is not working as expected.

I have added my code sample here in CodeSandBox.

I am looking to build something like this, where I can draw the Nodes/Shapes and connect them using some sort of Connectors with Labels. Can someone please let me know how can I add the Connectors and build the logic to understand Rect/Shape that has been created using Vue-Konva

CPT2111081318-1890x906

lavrton commented 3 years ago

Your code is too large. Make a small demo and ask a specific question.

What should we do with the demo? What exactly is not working?

Aravinda93 commented 3 years ago

@lavrton Thanks a lot for your response. I have edited my question and added an image to provide you with a better idea of what I am trying to do. If you get a chance can you please suggest me something?

roydekleijn commented 2 years ago

Any luck ?

Aravinda93 commented 2 years ago

@roydekleijn I used Drawflowlibrary and that worked perfectly for my requirement. https://github.com/jerosoler/Drawflow