drag and drop palette UI and connecting objects in html canvas - javascript

I am looking to design an UI which allows to drag elements which can be able to connect one another from a palette to a html canvas.
Can any one tell is there any predefined library to achieve this or an approach to start this.

Related

Add Text/Image to the 3D cube/model rendered in Canvas using Three.js at runtime

I want to allow users to add text/images to the 3D model (anywhere they want) rendered on UI using canvas. They can move the text object and can update its dimension. It is kind of little interactive, so users can customize it.
Just wanted to understand if we can do it using three.js, or that feature will be part of the Model image only created from the blender. I tried it and was able to render the image and can access all its mesh objects. But I am not getting how to start on this adding text/image to model or three.js at runtime.
e.g. We can add customized text/image to it. And move it at any place:
https://dsign4you.com/3d/
There are many different ways to do text in THREE.js. A bunch of them are explained here:
https://threejs.org/docs/?q=textgeometry#manual/en/introduction/Creating-text
Option 3 in the list is to build it into the 3D model, but there are several other ways you can do this.

Drag and drop different shaped over an image

I am doing one task and in that I want to drag and drop the different dynamically shaped [like : circle, rectangle, oval, etc] over an image. Like
In this picture you can see that how the rectangle shape has drag and drop over an image. This type of features I want in my task. I have search this features in many websites but nothing I have to seen which I want. So is there any jquery plugin or any javascript then please suggest me or give me some hint.
Advance In Thanks.

Drag and drop to reorder rectangles in Javascript

Is it possible to use drag and drop to reorder HTML canvas rectangles, and what is the best way to go about this? Given a bunch of rectangles, I want to be able to change their order by dragging. Or is it easier to achieve this using divs instead? I want to create a rectangle packing program with drag and drop capabilities similar to Packery except implementing a different rectangle packing algorithm.
The best way to change order by dragging rectangles is by implementing these plugins like Packery,Gridster,ShapeShift rather than using divs instead.
Gridster cannot be used for multiple layouts whereas Shapeshift comes to the rescue. Comparing these two, Shapeshift is responsive.I suggest to implement any one of these according to their requirement and their frequency of usage.

Layout manager for HTML5 canvas

I am working on a project to animate the Data Structures on HTML5 Canvas. I am currently using KineticJs and have looked into other canvas related libraries too. But I have failed to find Layout Manager of any sort in them. Right now if I have to put some rectangles and circles etc. I have to specify their exact coordinates. What I want is something like FlowLayout Manager or Grid layout manager in which if I put some objects they don't overlap on each other and I don't need to mention each of their exact coordinates. When I add new shapes to it they automatically adjust their location accordingly.
Is there any library which provides such feature or What can be the best way to do it ? I am relatively new to the client side programming and HTML5 so if it is very basic please point me right direction to study further.

Zooming part of an image

I am creating a web application in which I need to display an image which a grid superimposed on it. So when the user clicks on any one tile of that grid, that tile gets magnified.
I have the image with superimposed grid but cannot find a way to zoom parts of it. I am using jquery and javascript
Can you please help me with it?
Use a plugin like http://www.jacklmoore.com/zoom

Categories