I would like to find a way to create two perpendicular lines, crossing at the cursor position and spanning across the entire canvas. Since I'll be presenting some complex and rather chaotic fully-meshed diagrams to the user, I want to give them a way to quickly find the cursor.
What is the best way to achieve this in JavaScript?
My Problem is: I'm still new to JavaScript and the endless libraries that are available for this kind of stuff so I really have no clue what's best to use. I found a similar question for QT GraphicsView here and was wondering whether there might be a library or script out there that can achieve the same.
Thank you in advance.
Related
I have a 10x10 grid filled with objects in certain coordinates and I have a character that needs to get from the start to finish but I would like to avoid the certain coordinates on the route to the finish. Could someone please tell what would be the best way of approaching this in Javascript.
Also, if I was to initialise an array with the obstacles in an array how would I best code this to avoid those certain plots.
Thank you.
Sounds like you're looking for a pathfinding algorithm. The only one that comes to mind is A-Star, or "A*". The short version is that it recursively picks a random "next node" from the nodes it hasn't checked, being more likely to pick nodes that are physically closer to the goal. This is a commonly-used function that you may want to find a tutorial for (it doesn't have to be a JavaScript tutorial as long as you can reuse the concepts in JavaScript)
I am curious as to where to start to make something similar to HERE as I cannot find any information about it. It may be fairly simple and im sorry if it is.
What I am hoping to replicate is the colour grid that generates based on the colours and size of the lines. I am looking to replicate the functionality of the application whereby when the user selects a line and changes the width of that line and it will then calculate the image. I have been looking around but cannot find information about how to replicate it. I may be searching for the wrong thing as javascript is not my strongest language.
I know of a roundabout way to do it with svg but where would I start for javascript/jquery?
I know of a way to do it with svg but where would I start for javascript/jquery?
Well, SVG would involve javascript as well, wouldn't it? You're just looking for different ways to display an image. None is native the javascript, that is just a programming language, you'd have to consider which API to use:
There's nothing wrong with SVG! It even seems to be the easiest solution, maybe wrapping DOM code in some nice drawing library.
It has been demonstrated that such is possible with CSS3 background patterns, although I would consider this rather unusable
Use the <canvas> element! This would be the most genuine HTML5 approach, and even though the api is rather simple there exist mighty libraries.
I'm using KineticJS to building an organization chart; one of the main requirements is the ability to have lines which are intelligent enough not to get overlapped by the shapes they are connecting. I have an algorithm for detecting the shortest path between two shapes, but I'm still stuck on how to route them around around any shapes in the way.
The best solution I've come up with so far is to use getIntersection() on every single point on the line to make sure that no point contains more than just the line; but after doing that (which itself feels more than a little wasteful), I'm still not sure what the best way of then routing around the obstacle is.
I'm open to the idea of switching libraries if there's another one which can accomplish this task easily, or even going back to a pure vanilla JS implementation if that's what it takes.
To work with your current solution, you would need to create vertical and horizontal "gutters" between each shape that you can use when drawing your connectors.
Think of these gutters as conduit that you run your connecting wires through.
You will likely have multiple and overlapping connectors in your gutters.
You could color code the connectors for easy identification by your users.
Alternatively:
This canvas diagraming library was created by frequent StackOverflow contributor, Simon Sarris:
http://www.nwoods.com/company/aboutus.htm
Alternatively:
JSPlumb is a javascript based diagamming library
http://jsplumbtoolkit.com/jquery/demo.html
I couldn't seem to make sense of the JS on stackexchange.com/sites. It looks like there is some balancing, rotating etc. going on when you expand one of the stack exchange information boxes. I was wondering how this is being achieved? At least how is this likely being achieved in terms of its data structure and how it's being put into effect in this setting?
It using optimization algorithm like bin-packing or treemap (kd-tree) and maximize packing density. When you insert or delete a tile it then finds the best position for the new tile and it can use a simple animation along the x and y axis (in jquery animate). Some jquery plugins can solve your problem: masonry, isotope, wookmark, freetile, vgrid, blocksit. Read here: http://webdesigninspirationtoday.com/article/367/5-jquery-plugins-to-produce-pinterest-like-dynamic-grid-layout. Normally optimization algorithm is useful for real life problems, like how to copy your music archive and not to waste space. Read here about the algorithmus on pinterest.com: http://www.quora.com/Pinterest/What-technology-is-used-to-generate-pinterest-coms-absolute-div-stacking-layout.
I have looked at a lot of Q/A here on SO regarding similar (if not the same) question I have. Yet none had an answer I was able to understand.
I wish to input a series of GPS coordinates, and create a smooth curve that connects them all, and passes through ALL of them. Javascript is my preferred language and I have found this page
http://jsdraw2d.jsfiction.com/demo/curvesbezier.htm
It allows you to plot any number of points and when clicking the 'Draw Curve' button it does exactly what I want (except it is on html5 canvas whereas I want to use lat/lon values)
You can download the jsDraw2D source code here:
http://jsdraw2d.jsfiction.com/download.htm
The function in question is drawCurve() and it appears to calculate the points of the curve, creating a separate 'div' for each point as it goes along, while also appending them to the html page. I am presuming I need to get rid of the code for creating the html divs and instead add each point as it is calculated to an array or string. However, it is simply over my head (perhaps because it seems overwhelming and my understanding is not quite spot on).
I would post the code here, but it is pretty long, plus I am not sure how many other functions it calls/requires from the rest of the script.
The only other thing I can think of that needs to be considered is the +/- values in GPS coordinates. I am hoping that altitude changes would not effect the smooth line created too much, especially since it seems to create the new points so close together.
Any help in modifying that code would be greatly appreciated. If someone has some other approach, I am open to suggestions - however I would prefer a way that passes through ALL the input points (unlike some mathematical curve functions that do not)
Thanks!