Draw line to route around shapes in HTML Canvas - javascript

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

Related

Paperjs problem with using custom paths as styling handles/segmentPoints

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 :).

Hiding crucial data from an SVG

I have a SVG generated map for the game I am developing. I have no problems with the game being open-source and it uses open web technologies such as HTML and SVG. No problems there.
But at the same time I want the players not to be able to see or reverse engineer a map of the whole world (to retain true exploration). For now I generate map using a seed that is secret and not version controlled. So even though the algorithm is known curious players can use open-sourced code to generate "game-like worlds" but not that exact one. This solves the "global" problem.
But since SVG is rendered on a page as a single Voronoi diagram all the data (I don't mind the coordinates of points) would be extractable. Data like resources, land types, biomes, climate etc. could be fetched from SVG to gain an upper hand in finding good locations for settlements.
Any idea how to prevent that? Players have limited vision so I thought about either:
not rendering the whole Voronoi diagram at all (just the visible part), but that could be potentially tricky to do (maybe, haven't looked into it yet),
inserting the resource/land tile data into SVG graph only to visible locations
I can see the benefits of both approaches and if done correctly it could even boost the performance (not rendering the whole thing/rendering with less data) and lead to bigger worlds without impacting performance.
Any other ideas/programming/architectural approaches to help with the issue?
(I am using Vue.js, d3.js, svg-pan-zoom and Laravel backend just in case it helps.)
The ideas that you gave are perfect, but for implementing them, you need to make hard work, and spend much time.
I have a suggestion. Is will work for most of the users. Maybe some users will "hack" it. But I believe it will work for 95% of the times.
You can create a very big rectangle, from the top left point 0,0 until the right bottom point. The rectangle will be white, and it will be over all other shapes.
This way if someone will download the SVG, we will see nothing. Just a big white rectangle.
In you game HTML, you can add a CSS selector, to hide this rectangle.
If you following this method, most of the users (who don't have a photo editing software) will not be able to see the map.
Users who knows how to inspect elements in HTML may see the map. But I believe that most of them who will see a white box, will not believe that there is something behind.
I think that this is a simple temporary approach that you can do, before doing other more defensive ways.

How to create lines crossing through cursor position in JavaScript

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.

Drawing App - Curve Fitting

I'm currently working on a web-based drawing app, where I use the position of the pointer to generate a line. The speed determines the width of the line.
My problem is that the browser events does not produce clean data when getting the position, so the width becomes quite "jittery" other then being soft and smooth.
I'm wondering what is the best way to smooth out that sort of data as the drawing is being made? I was thinking on curve fitting, but I'm not sure which algorithm could work better in my case.
P.S. I'm not redrawing the line from start every single time on canvas, I'm only adding the "final part".
Thanks!
You might try pulling both the "smooth" and "simplify" functions out of paper.js (their MIT license allows this). It worked well for me in an edge detection project. Check it out here: http://paperjs.org/tutorials/paths/smoothing-simplifying-flattening.

How are the exchange boxes being rearranged on stackexchange.com/sites?

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.

Categories