CODEWITHSUNDEEP
javascriptcanvassvg
William Sham
William Sham

Reputation: 13239

selectable and movable shapes in html5

I am creating a dynamic, interactive network diagram with php, javascript and either Canvas or SVG

However, with canvas, I don't know how to make each object selectable. i don't want to use the hidden canvas and to detect if a mouse is on an object, because I will have lots of intersecting objects and having lots of layers of canvas will be messy.

I don't know anything about SVG.

Would SVG serves the purpose better? or what is a canvas solution to this.

Upvotes: 3

Views: 1140

Answers (3)

Simon Sarris
Simon Sarris

Reputation: 63822

I assume by "the hidden canvas" you mean my tutorial. It will still work with multiple objects and multiple layers, you just need to paint them in the proper z-order.

There are of course much faster (but more sophisticated) ways.

If you don't want to deal with it, SVG has all the object selection built in. Give Raphael a try as Zlatev suggests. If the performance gets too bad (Too many objects) you will have to switch to canvas, so it really depends on your number of nodes/links in your diagrams.

You will have to take care of sending data to your server (in whatever way you prefer) yourself though. There's nothing built into SVG/Canvas/Raphael that will do it for you.

Upvotes: 0

Duncan Beevers
Duncan Beevers

Reputation: 1820

One advantage of SVG is that it has concrete DOM objects representing the shapes in the drawing, so you automatically get a lot of mouse event handling and event bubbling.

Alternatively, you could use EaselJS, which provides a pretty robust display-list, freeing you from managing hidden canvases.

EaselJS

Upvotes: 1

Z. Zlatev
Z. Zlatev

Reputation: 4820

There are some projects for building diagrams and graphics already. You could try Raphaël which is svg based, so it should be ie compatible as well.

Upvotes: 0

Related Questions