If you need to work on different layers on HTML5 canvas what is the best way of doing it? I see some people decide to stack a number of canvases ontop of one another using position: absolute. Is this the best way?
Personally, I wouldn't stack canvas' on top of each other. A canvas is really just a bitmap displaying all the pixels you need so you should only need one for most cases.
I would suggest using a library to help you manage different objects. I have found that Grant Skinner's EaselJS is a breeze to work with.
This library lets you easily group objects and add them to the canvas, it also makes it trivial to add mouse listeners to capture clicks on objects etc. which is something that you would have to write lots of code to do when using canvas without a library.
There is documentation and examples on EaselJS also.
EDIT :
Here is an extract from the docs regarding the container used to group objects.
A Container is a nestable display lists that allows you to work with compound display elements. For example you could group arm, leg, torso and head Bitmaps together into a Person Container, and transform them as a group, while still being able to move the individual parts relative to each other. Children of containers have their transform and alpha properties concatenated with their parent Container. For example, a Shape with x=100 and alpha=0.5, placed in a Container with x=50 and alpha=0.7 will be rendered to the canvas at x=150 and alpha=0.35. Containers have some overhead, so you generally shouldn't create a Container to hold a single child.
Related
An app I'm working on has a hierarchy of nested SVG boxes that the user can manipulate with the mouse, and I'm trying to find the most efficient and/or maintainable way to keep track of the relative coordinate systems involved, convert between them when necessary, etc.
The intended interface is intuitive. I'll explicitly list the requirements:
Boxes can be moved, rotated and resized with the mouse.
When resizing, moving or rotating a box, its children fluidly move and rotate with it.
Boxes can be dropped into new parents.
Some line segments will cross between boundaries.
The mouse-event coordinates will have to synchronize fluidly with whatever local coordinate space it's working with.
[Main question] It seems to me this kind of interaction is desirable for many types of apps. Surely, I'm not the first person trying this. But I can't find a good library or set of best practices. The closest I've come across is interact.js, but it has turned out to be too incomplete and inflexible. Is there anything else out there?
[Sub-question] In case there's not a good library out there, I'm considering at least two approaches: (i) Have only one coordinate space, and calculate the coordinates of specific boxes recursively by having them consult their parents and then apply their local transformations. (ii) Use transform on the containing <g> of each box, so we get a hierarchy of nested coordinate spaces. The latter seems to be more maintainable, but could the former be more performant? Thoughts welcome.
I am implementing an Angular component which has many little areas where user can click.
I see 2 ways how to do it:
use background image and define map areas where user can click, add click handler on the image.
use div for each clickable part and attach the click handler to parent element (so I don't have many click handlers on each div). Use the CSS to style each div so it looks like the image in 1.
The problem with 1. is that when the image changes I have to change the map coordinates too.
The advantage here is that it should work without problem in many browsers.
The advantage of the 2. is that I can style the component as I need (so it can be smaller, bigger, different font, etc.), but it can have performance impact when I need to show more than one such component.
Which way would you choose and why? Or are there any other possibilities?
Edit:
forgot to mention that the component should also work on mobile devices
I don't remember where but i just read a nice article about:
div(webkit-transform) vs svg vs canvas
To make it simple:
1-50 elements = divs & images
50-500 elements = svg
500 and more elements = canvas
this are here just to give you an idea ...then everything depends on every element and device.
Canvas would be the best solution for everything.
The problem on canvas is the click handler.You need to create a collision detection script.
(i used a canvas with a background image(worldmap),to show the dots in real time of the current users.).but it's not clickable... (there is a clickable legend under/over the map)
SVG is prbably the best solution in your case
like #mainguy said u can draw stuff and add eventHandlers (or one like on the parent element).and the performance is better than divs.
DIVS
Most of the time i use div sets with one eventhanlder. they are so easy to use and style.. but only squares or circles.. and if you start to style them you loose alot performance (box-shadow..).
If you don't style the divs you can use alot of them.Especially if you put the eventhandler on the parentNode.
that way you can handle 1000's of elements without problems.(but don't use position:absolute)
Image Map
Again ... if there are not too many elements this is prolly also a good solution.. the simplest ... (the simplest way to draw your simple shapes).As soon you have you static MAP values you can then transform your imagesize recalculation the map with the ratio.. so thats not a problem.
I would go for the image map if there are not to many elements.
else SVG.
Everything depends on how many elements you have.
is that when the image changes I have to change the map coordinates too
if you use divs you don't have to change coords?
** Mobile devices support more than ie browsers.
I would do this with a SVG library which are fast, easy to style and suporrted by most browsers.
D3.js
is available for Angular as directive. Have not worked with his one yet. But it seems to be very popular. Just look on their homepage for a WOW! effect.
Raphaël JS
Was used by me in many projects. It has the big advantage that it supports even old IEs (sic!).
Just make a search for Angular SVG and/or JS and you will find a lot of solutions.
Not knowing the exact requirements, my default choice would be 2.
There are drawbacks, such us inability to easily map non-rectangular areas. The advantages however are huge, including easy maintenance, possible responsiveness, more robust styling possibilities and more.
The sole amount of divs shouldn't cause any problems and I wouldn't worry about it.
There are cases in which I would look for different implementation, though.
In my SVG application, I have images which the user can extend. I'd like to give controls to the user so they can bend them from the edges as well.
Here is a visual example of what a user could do.
Would love to hear suggestions on how to go about doing this.
One possible idea is that I put the image inside a path & add controls for stretching the edges of the path. However, I wonder how to stretch the image inside the path so that it consumes the whole available space.
There is no easy way to do what you want. However I can suggest two possible tricky ways:
(1) Convert it to a chain of images and apply an appropriate skew transform to each one.
(2) Use an <feDisplacementMap> filter to displace the pixels to the appropriate place.
If I have a canvas with a circle that changes color upon clicking on it, I can use a click event on the canvas element and handle the math for that (distance formula calculation <= radius). But what if I have two circles that overlap (like a van diagram), and I click in the middle of the two circles assuming that only the top circle should change color? If the math of the first circle is applied in this case, both circles would change color.
How would I deal with events in the canvas in terms of overlapping objects like the example above? With hopefully a fast/efficient algorithm?
You might want a framework like EaselJS that has a better api for what you're trying to do. Barebones canvas 2d-context doesn't provide much in terms of display-object / sprite behavior.
Responses above also mention some sort of list to represent layers. I don't think the implementation would be very difficult, just another condition to check for along with the radius.
Canvas isn't really like Flash or like a DOM tree whereby things have sort orders or z-indexes. Its a bit more like a flat rastered image and you have to rely upon other logic in your javascript to remember the sequence & stacking order of things you have drawn.
If you need this kind of interactivity I've always found it best to use a 3rd party library (unless it really is just a case of one or two circles which dont do much).
For interactive 'shape' based javascript graphics I would sugest Raphael.js or D3 which are actually more of SVG tools than a canvas one so maybe it's not for you but they are simple and cross-browser.
There's also processing.js (js port of Processing the Java lib) which feels a bit like flash and again can track all of the levels and objects. Theres a tonne of others but thats another topic.
If it's super simple the options might be:
Hold the co-ordinates of all shapes/elements composited on the canvas inside an object or array which also tracks their z-index/sort sequence, thereby letting you know whats on top.
Using the imagedata at the mouse coordinate of the click to establish what has been clicked
using multiple canvases composited on each other and letting the DOM do the work for the click events
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.
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.
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.
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.