Question

我正在模拟思考和记忆过程，我有各种各样的图片（牛，飞机，橙色），需要在屏幕上以类似思维导图的方式显示。每个对象也与其他三个对象相连，它需要看起来像一个网络。

我可以使用什么算法？此外，我正在使用JS，但伪代码或解释也会很好。

Answer 1

首先将您的数据转换为可用的结构：
按顺序绘制节点，同时绘制ID大于当前节点的兄弟节点。
您需要在当前节点周围以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);

如何在屏幕上对网络中的对象进行分组？

1 个答案: