Written permission from the copyright owner must be obtained for everything else. Permission to reproduce news and web log entries and other RSS feed content in unmodified form without notice is granted provided they are not used to endorse or promote any products or opinions (other than what was expressed by the author) and without taking them out of context. DownloadsĪll content Copyright (c) by Cyotek Ltd or its respective writers. I cut out a lot of the code from this article and just focused on the core functionality, a fully functional sample can be downloaded from the link below. But the general principle could be used for other things, such as dials, gauges and clock faces.ĭue to the brute forcing for positioning, this code is nowhere near as optimal as I'd otherwise like it - if anyone has ideas for solving this I'd love to hear them! The technique in this article can be useful in other circumstances, for example I first used code similar to this to create a 12 node colour wheel as part of another concept program. This is actually perfect for my needs, but if you wanted it to start from somewhere else (for example 12 o'clock), you'd need to adapt the code in ArrangeNodes. If you consider a clock face, the painting of the first node in this example always occurs at 3 o'clock. Once the child nodes have moved sufficiently far enough away from the centre you could try staggering the nodes to make better use of the free space this may allow for a closer grouping.Īlthough the demonstration program doesn't show this, this code works perfectly well if the child nodes are of varying sizes - it will try and position according to the largest child it finds. Success = distance >= _maximumDistance || this.TestNodes(childNodes) first arrange all the nodes around the central node with a minimum distance Private void BruteForceNodeLayout(List childNodes, double angle, int cx, int cy, int distance) This.BruteForceNodeLayout(childNodes, angle, cx, cy, distance) If (count > 1 & !this.TestNodes(childNodes)) I've no doubt there's a much better way of doing this if they do, and the distance is within a given maximum, increase the distance if there is more than one child node, check to see if any intersect with each This.ArrangeNodes(childNodes, cx, cy, angle, distance) to ensure all other nodes are an equal distance away need to use the centerpoint of our node but as I'm using ellipsis we can use use the largest axisĭistance = Math.Max(node.Width, node.Height) if we were using squares we'd need some extra padding Once we've got the centre, we offset it by half the nodes width and height to get the upper left corner. Once we have the angle, we loop through each child node and using the angle and distance values we can calculate the centre point of the child using the sine and cosine mathematical functions. technically as I'm using circles the Width and Height should always be the same, but this may change in futureĭistance = Math.Max(node.Width, node.Height) Positioning each node To start with, I'll simply try and place the new nodes right next to the centre node. This makes some of the layout work easier due to there being no corners, as the shapes can be closer to together without overlapping. count is the number of children we'll be placing around the centerĭouble angle = 360.0 / count * Math.PI / 180.0 Calculating a default distanceĪll the nodes in this diagram are going to be rendered as circles. The following formula will calculate the number of degrees in the angle. The first thing we need to do is calculate the angle between one node and the next. This post is out of my usual comfort zone as its dealing with trigonometry. This post discusses the sample project I created to explore the first part of this concept.Ĭaveat emptor. One of the concepts I looked into during this was the idea of arranging children radially around a central node. Recently I was looking for a way of display hierarchical information in a more compact form than the previous horizontal/vertical trees I was using.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |