Как сгруппировать объекты в сети, на экране? - PullRequest
Новая
       48

Как сгруппировать объекты в сети, на экране?

1 голос
/ 12 октября 2011

Я делаю симуляцию процесса мышления и запоминания, и у меня есть различные картинки (корова, самолет, апельсин), которые нужно отображать в стиле карты ума на экране.Каждый объект также связан с тремя другими, и он должен выглядеть как сеть.

Какой алгоритм я могу использовать?Кроме того, я использую JS, но псевдокод или объяснение тоже подойдут.

1 Ответ

1 голос
/ 12 октября 2011
  • Сначала приведите ваши данные в удобную структуру:
  • Нарисуйте свои узлы по порядку, также рисуя братьев и сестер с идентификаторами, большими, чем текущий узел.
  • Вам нужно нарисовать своих братьев и сестер вокруг текущего узла со смещением в 120 градусов, чтобы создать свою сеть (3 братьев и сестер, 360/3 = 120).

Некоторый JavaScript для иллюстрации. 

// initialize your data
var nodes = {
    1: {src: "imageA", siblings: [2,3,4]},
    2: {src: "imageB", siblings: [1,5,6]},
    3: {src: "imageC", siblings: [1,7,8]},
    4: {src: "imageD", siblings: [1,9,10]},
    5: {src: "imageE", siblings: [2]},
    6: {src: "imageF", siblings: [2]},
    7: {src: "imageG", siblings: [3]},
    8: {src: "imageH", siblings: [3]},
    9: {src: "imageI", siblings: [4]},
    10: {src: "imageJ", siblings: [4]},
}

// initialize some constats we will use
var DIST = 200; //pixel distance between images
var IMGW = 64; // image width
var IMGH = 64; // image height
var SCX = 400; // center screen x position
var SCY = 400; // center screen y position
var DEGSSTART = 90; // starting degrees offset
var DEGFLIP = 180; // add to flip the direction
var DEGSTEP = 120; // circle 360 / 3
// note: if you have more than 3 siblings change DEGSTEP appropriately

// the main function
function drawWeb(nodes, id, cx, cy, prevDeg) {
 var node = nodes[id];
 // draw the current node/image
 var xOff = cx - (IMGW / 2);
 var yOff = cy - (IMGH / 2);
 drawImage(node.src, Math.round(xOff), Math.round(yOff));
 // draw the siblings recursively
 var newDeg = prevDeg + DEGFLIP + DEGSTEP; 
 for(var i=0; i<node.siblings.length; i++) {
  var newId = node.siblings[i];
  if(newId > id) {
   // convert to radians and calc new location
   var rad = newDeg * Math.PI / 180;
   var newCX = cx + DIST * Math.cos(rad);
   var newCY = cy + DIST * Math.sin(rad);
   drawWeb(nodes, newId, newCX, newCY, newDeg);
   newDeg += DEGSTEP;
  }
 }
}

// the draw function you can customize
// use jquery or some other method
function drawImage(src, x, y) {
 // fill in code to put an image on your screen
 console.log(src + ': ' + x + ', ' + y);
}

// test
drawWeb(nodes, 1, SCX, SCY, 90);
...