I'd like to be able to write an application in HTML5 that is similar to the following.
HTML5 Canvas Animals on the Beach Game with KineticJS
The problem with that demo though is the mouse over event is only accurate to the rectangle surrounding the animal. Is there any way to do this with more accuracy, be it in KinectJS or otherwise?
There are generally two ways:
Using custom paths with each image as hitboxes (that you manually define) then using an is-point-in-path algorithm
Using a ghost-canvas (or whatever you like to call it) as I detailed in this old tutorial. Ignore the link to the new tutorial, the old one uses what you'd want.
The first method here is much faster but requires a lot more code and manual work. The second method is pixel-perfect but much slower. Still, if you don't have an enormous amount of objects it may suit your needs.
Related
Example
Video Example
The lack of selection styling in paperjs makes you improvise and one way to style them, is to create them yourself ( recommended on this post).
But the huge con with this is the performance! Where canvas quickly goes from usable 60fps to terrible 20 within seconds. Now the only method I thought would work to style your handles/points, is now useless.
Now I'm out of ideas as to how style them and I'm trying to seek the help of stackoverflow... The main thing that I want to achieve is the hover effect on handles/points . At this point I coded the most of the stuff in paperjs, and I really wouldn't want to switch everything to something else like PixiJs.
P.S Any help is appreciated!
In your video, the frame rate goes down because you draw a lot of paths and this would also happen at some point even with the native Paper.js selection.
So your only chance is to try to have as few as possible shapes in your scene.
Maybe you can take advantage of the less known features of Paper.js to reduce them a bit:
item.selectedColor
paper.settings.handleSize
Then, there is also the possibility of using SymbolItem for repeted shapes (like your circles) that should have better performances than regular paths.
Finally, if you're out of solutions, you could also fork the library and hook into the selection drawing code to adapt to your needs :).
So, to explain my scenario: I want to create an online "finite state machine"-webapp which is capable to visualize the automaton-concepts (deterministic, non-deterministic) and later on does some logic like minimizing and so on to help students comprehend these abstract concepts in a way of experimenting around.
So for my views, I thought about JSPlumb as the way to go (other recommendations are appreciated) - but I can't find the option to "resize" the HTML5 Canvas in JSPlumb. For lets say automatons with 100 nodes, a 640x480 canvas wouldn't be very nice, so what it should be is, starting with a canvas of 640x480, clicking and dragging on the side of the canvas, the user could extend it to its needs. Sure about that, the previously drawn elements should keep their places.
So, my question is: Is it possible to do this with jsplumb or do I need to code it myself? If I need to code it myself, any hints on where to start changing the jsplumb files would be highly appreciated.
JSPlumb is not using the canvas, as far as I know, it's using SVG or VML on old IE browser.
This problably means that you can resize the SVG object via the appropriate width & height property, but AFAIK, this is not automatic.
1.) I found a canvas API called EaselJS, it does an amazing job of creating a display list for each elements you draw. They essentially become individually recognizable objects on the canvas (on one single canvas)
2.) Then I saw on http://simonsarris.com/ about this tutorial that can do drag and drop, it makes use of a hidden canvas concept for selection.
3.) And the third approach, a working approach, http://www.lucidchart.com/ , which is exactly what I'm trying to achieve, basically have every single shape on a different canvas, and use to position them. There's a huge amount of canvas.
The question is, what is the easiest way to achieve interactive network diagram as seen on http://www.lucidchart.com/
A side question is, is it better to get text input through positioning on canvas or using multiple canvas (one for rendering text) as in LucidChart
I'm the person who made the tutorials in 2. There's a lot going on here, so I'll try to explain a bit.
I use a hidden canvas for selection simply because it is easy to learn and will work for ANY kind of object (text, complex paths, rectangles, semi-transparent images). In the real diagramming library that I am writing, I don't do anything of the sort, instead I use a lot of math to determine selection. The hidden-canvas method is fine for less than 1000 objects, but eventually performance starts to suffer.
Lucidchart actually uses more than one canvas per object. And it doesn't just have them in memory, they are all there the DOM. This is an organizational choice on their part, a pretty weird one in my opinion. SVG might have made their work a lot easier if thats what they are going to do, as if seems they are doing a lot of footwork just to be able to emulate how SVG works a bit. There aren't too many good reasons to have so many canvases in the DOM if you can avoid it.
It seems to me that the advantage of them doing it that way is that if they have 10,000 objects, when you click, you only have to look at the one (small) canvas that is clicked for selection testing, instead of the entire canvas. So they did it to make their selection code a little shorter. I'd much rather only have one canvas in the DOM; their way seems needlessly messy. The point of canvas is to have a fast rendering surface instead of a thousand divs representing objects. But they just made a thousand canvases.
Anyway, to answer your question, the "easiest" way to achieve interactive network diagrams like lucidchart is to either use a library or use SVG (or an SVG library). Unfortunately there aren't too many yet. Getting all the functionality yourself in Canvas is hard but certainly doable, and will afford you better performance than SVG, especially if you plan on having more than 5,000 objects in your diagrams. Starting with EaselJS for now isn't too bad of an idea, though you'll probably find yourself modifying more and more of it as you get deeper into your project.
I am making one such interactive canvas diagramming library for Northwoods Software, but it won't be done for a few more months.
To answer the question that is sort-of in your title: The fastest method of doing interactiveness such as hit-testing is using math. Any high-performance canvas library with the features to support a lot of different types of objects will end up implementing functions like getNearestIntersectionPoint, getIntersectionsOnRect, pathContainsPoint, and so on.
As for your side question, it is my opinion that creating a text field on top of the canvas when a user wants to change text and then destroying it when the user is done entering text is the most intuitive-feeling way to get text input. Of course you need to make sure the field is positioned correctly over the text you are editing and that the font and font sizes are the same for a consistent feel.
Best of luck with your project. Let me know how it goes.
Using SVG (and maybe libraries as Raphael)!!
Then any element can receive mouse 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.
I'm trying out some dynamic web page background generation using lines and text.
Take a look at my demo at http://74er.net/labs/lines.html (just focus on the yellow line).
It's a lame and inefficient method by literally creating a <span> element with 1 X 1 size and a yellow background with the X,Y position based on an ellispe formula.
My requirements is for the line creation are fairly simple (or rather straightforward):
must be created at client-side and not a dynamic image generated by server scripts
can be created based on a simple formula (circle, ellispe or just a straight line)
can be contained in a DOM element (e.g. DIV so that I can layer it as a background)
No HTML5 canvas technique (simply because it should be rendered on non-HTML5 compliant browsers)
Not too taxing on the browser like my current implementation
There's not need for:
really smooth curves (though that will be welcomed)
dotted/dashed (I'll like that as well if feasible)
Based on the above, I am almost certain SVG (with Raphaël) is the way to go BUT I am put off by lack of native SVG support in some browsers.
I have looked at Walter Zorns library, and it is has some excellent performance tuning algorithms built-in. So it'll be my choice if I can't find a more creative implementation.
Let me know if you need further clarification.
Morning,
i have enjoyed to work with the drawing features from the Dojo Toolkit. You can see it in action here:
Dojo drawing example
To Download Dojo visit:
Dojo Toolkit