Selectable and moving shapes in html5

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

However, with the canvas, I do not know how to make each object accessible. I don’t want to use a hidden canvas and detect if the mouse is on the object, because I will have many intersecting objects and many layers of the canvas will be dirty.

I don't know anything about SVG.

Would an SVG serve better? or what is a canvas solution.

+3
source share
3 answers

One of the advantages of SVG is that it has specific DOM objects representing the shapes in the drawing, so you automatically get a lot of processing for mouse events and event bubbles.

EaselJS, , .

Easeljs

+1

. Raphaël, svg, .

0

, " " . - , z-.

, , ( ) .

If you do not want to deal with this, SVG has all the object choices. Give Raphael a try, as Zlatev suggests. If the performance is too poor (too many objects), you will have to switch to the canvas, so it really depends on your number of nodes / links in the diagrams.

You will have to make sure to send data to your server (no matter what method you choose). There is nothing built into SVG / Canvas / Raphael that does this for you.

0
source

All Articles