I would like to make a very basic layout designer website, where users could drag and drop rectangles onto a planning area, where they could then resize the rectangles. The rectangles would need to be some sort of objects, as I would like to store information in them, that the user could see when they click on one. They should also have collision, so they couldn’t overlap eachother. I’m not sure what resources to use to achieve this, any advice is appreciated.
I tried HTML canvas, but I couldn’t get the resizing to work, and didn’t know how to have each rectangle as an object, not just an html tag. Kind of same thing with SVG, but keep in mind I’ve never used these before.
2
Answers
Html Canvas does not contain objects inside as an SVG.
Imagine it’s like an empty
<img/>element where you can draw whatever you want.However if you need to make it dynamic in the sense that you can move thing around, you will have to clear and draw the canvas every frame.
Also as the canvas is just a dynamic drawing you can’t select things directly, they are just pixels.
You would need to have an algorithm that determines what object was clicked in the drawing, checking the click position on the canvas.
If you want a more development friendly way maybe you should use svg but canvas is much faster (performance).
Resizing in Interact.js
Or
This Page in konvajs
Will Help You!
if you are interested you can check
these libraries too.
draggable
d3js