My research has found me powerful libraries like paper.js which are quick to show all the next-level awesome stuff they can do, but I'm not sure how (or if) I can accomplish a basic task:
I want to present a simple Stick Figure to my user:
o
\|/
/ \
Then let them grab the ends of the lines ("hands and feet"), and drag them into different positions, leaving the connecting nodes ("shoulders and hips") intact.
Simple.
In short, what is the simplest way to draw something with lines and nodes that users can manipulate.
Requirements:
Some line lengths are fixed, others can be lengthened.
Some nodes are fixed, others can be moved.
I need to at least display the angles of the lines, but ideally can modify those angles (via text input).
I feel like this shouldn't be this hard, but as I said, most libraries skip the basics and go straight to their coolest features, while any search for "edit vector nodes" and the like brings up lots of irrelevant results about node.js...
Probably you must have found the solution, but since it is unanswered, I thought of posting about a fantastic library I know.
The library is konva.js. You can find demo application references on site itself.
It features powerful set of functions to create custom shapes and layering support(In fact there is lot more). You can easily modify the properties of any shape, add animation and more.
You can find documentation here.
Related
I have been tinkering with JavaScript (React JS), Python, HTML and CSS for a while now. While doing so, I came across some occasional animations - most of them were standard css animations (e. g. transition: width 2s;). But more and more I am wondering how to make more complex custom interactive animations and I simply can't figure out the right techniques to learn to achieve the desired results (yes, I used the search function before asking this very broad general question). There are HTML5 canvas that seem to be a flexible and a versatile tool, but I don't know if they are the "right" tool for what I have in mind.
Let me give you an example of what I want to do:
Process visualisation: The resources of a company are animated as moving objects moving along a path that is not fixed but rather generated by the structure of the companies supply chain.
Drag&Drop Capabilities: Elements e.g. suppliers can be added to the supply chain via drag and drop
Complex custom diagrams (I know powerful libraries exist to achieve this e.g. AnyChart): A diagram is derived from the process data that displays life data. I am able to click in the Diagram to add new data points.
I am not looking for another JS library but rather the techniques to build these animations myself. Also I am looking for a good point to start learning these techniques. So the questions really are: What do I need to learn to be able to create these interactive animations, are HTML5 canvas the right tool? What types of techniques for interactive animations are there and when to use them?
Thank you.
So I researched this topic a little and I think the best and most conclusive summary of this topic (ReactJS & VanillaJS) can be found here:
https://css-tricks.com/comparison-animation-technologies/#react-and-animation
Before posting this question I did many tries and searched everywhere for alternatives, but I gave up and I'm asking here..
What is the easiest way to create an interactive map controlled by functions?
Here are details:
I have a div with fixed width/height, without a background, and I need to dynamically add things (images/text) inside of it, at any position, and they can also overlap each other if needed.
An example is better than thousand words:
- assuming the div is 500w 500h, I need to create an image at (200,200) with a size of 50x50
Here are the thousand words:
I tried with canvas, but it's too hard to remove something without touching the other things (for example if images #1 and #2 are overlapped and I want to delete the #1, I'll delete part of img #2 in the process. Of course the best thing would be to save things stored to when I need to delete something I can redraw all the rest, but it's a huge pain, if something easier exist would be better)
Tried also with http://leafletjs.com/index.html, but it seems too powerful to solve my problem, and I don't even know if it works without a background.
Maybe the best solution would be to use simple divs with good positioning, so I can change through functions their content easily, but I suck at div positioning.
Thank you to everyone that can help me :)
I really recommend the MapBox JavaScript API. It's a nifty utility that I have used in various instances. https://www.mapbox.com/blog/mapbox-javascript-api/ Extremely extendable API.
So I have a simple tree graph that is broken down into categories which may change later.
This will be strictly for ipad/chrome, so dont worry about legacy.
I would like the branches(lines) to kind of grow from each category(Voice/video Chat) to following nodes(hangouts, skype etc). I'm pretty sure that canvas is the best way to implement this. The data for the nodes and categories will be fetched from a javascript/json factory/model in angularJS. Can anyone at stack help me with a solution that could scale for changes and make clicks and animations simplistic for rapid changes.
If possible, extra comments in the realm of canvas (where I know almost nothing).
This is a preemptive strike for me; so If, I'm asking for too much sorry.
D3 would probably be the way to go. It often comes with a steep learning curve though (at least for me, not having worked with SVGs before).
Mike Bostock has a similar example: http://bl.ocks.org/mbostock/4339083
The nodes are interactive and have several layers of nesting. It's done as a left-right tree, rather than top - down like you're wanting. So it'll require modification to get it how you want.
Another example from Mike Bostock is: http://bl.ocks.org/mbostock/999346. This is a top-down.
I'm looking to create a web based "bulletin board" so to speak, where the user can create/delete/drag/drop 'pins'--without being allowed to overlap 'pins.'
Here is a diagram that should help illustrate what I'm trying to create:
'pins' are created, probably upon
double click; they will prompt the user for a label.
'pins' cannot overlap;
(the final shape will be larger, more
oval like.)
'pins' will need to be able to "connect" with other 'pins' with a visual element (i.e. dotted line,) but not all pins will be "connected."
I found GameQuery which allegedly supports bounding box collisions--but it's beyond important that the collisions be detected with ovals, not boxes (I know the above example might suggest otherwise, but that's just a diagram... not a mock up of the intended final design.)
The 'pins' may also vary in size/shape, depending on label size... this should be taken into account as well I imagine, to ensure an approach conducive to all the UX variables.
I've found Quadtree and Collision Detection along with this GameQuery collision demo, but it all sort of looks a little like gibberish. I'm looking to be pointed in the right direction, just so I know that what method I invest my time into, will work for my desired result... rather than busting my balls figuring out Quadtree and GameQuery for example, just to find it they won't work for this project.
...
Also, if any experienced developers are willing to be a mentor for me on this project--I am prepared to offer my extremely refined design experience, for a few "I need help" questions along the way.
How do I adopt an n-sided polygon into the pre-existing bounding box functionality of GameQuery? It doesn't need to be a perfect circle, but at least 8-sided.
I don't think that your problem is really one that relates to jQuery or even Javascript at all. Your problem is, how do I detect when an ellipse overlaps (or does not overlap) another ellipse? It's a math problem, and it's one that has already been asked here.
Be warned that this strikes me as a pretty difficult problem for someone who is new to programming. I'm not at all new to programming and I would see this as challenging, particularly with your other requirements - drag and drop, and so on. You've taken on a pretty advanced problem, and at this point, anything you can do to simplify (such as using bounding boxes) is something I would strongly recommend doing.
So I'm working on a project that will, in the end, generate a kind of flow chart using the Flickr api. You will supply a seed tag, and the program will use that seed tag to find other related Flickr pictures that have common tags...
I have all of the back end stuff up and running but I'm stumped on the formatting. Here is a screenie of what I would like it to look like...
Here's my question. Is there a good way of approaching the spacing of each branch? By this is mean, I would like to have a function where I could simply create a new node (or "branch") and specify which existing node I would like it to attach to. This is all good and fine, but I need to be able to automatically and intelligently place the new node on the page so it doesn't overlap any existing lines or nodes. I guess this is more of a general programming question as if I knew the process I could code it, but for those who are interested I am doing this in Javascript/HTML/CSS for the styling and maybe some PHP for the Flickr calls.
Feel free to ask any questions to clarify my rambling.
You could use a spring model between the nodes. Each node exerts a repelling force against every other node. Allow all the nodes to push against each other a certain number of times and you'll come up with a reasonable solution. You'll want to have a couple limits to make sure nodes don't go flying off into space and that you don't oscillate between a couple similar states.
Implementing it in Javascript/PHP is left as an exercise for the reader.
An alternative is to use a graph layout program such as GraphViz.
I look forward to seeing the results of your project. I agree with scompt about using graphviz.