递归绘制形状中的形状( Fabric.js )

Question

我必须用js制作一个网络地图，其中包含组件(等等)中的组件。我使用画布对Fabric.js库执行此操作。

我从这样的api中得到了一个json：

{
    "name": "BAY_01",
    "type": "Bay",
    "_links": [{
        "name": "SERVER_01",
        "type": "Server",
        "_links": [{
            "name": "CPU"
        }, {
            etc...
        }],
    }]
}

我认为实现这些组件的绘制的最好方法是使其是递归的，但我不知道如何做到这一点。

有人能帮我解决我的问题吗？

Answer 1

下面是一个通过name使用递归的示例。基本上，您需要确定JSON对象的属性是否为数组，然后再次调用递归函数，否则检查属性名称是否为" name "然后调用函数按名称绘制形状：

​

var obj = {
    "name": "BAY_01",
    "type": "Bay",
    "_links": [{
        "name": "SERVER_01",
        "type": "Server",
        "_links": [{
            "name": "CPU"
        }, {
           "name": "SERVER_02",
        	 "type": "Server",
        	 "_links": [{
             "name": "CPU2"
        	}]
    	}]
      }]
};

function goThroughtObject(obj, name) {
  var key;
  if (obj instanceof Array) {
    return obj.map(function(value) {
        if (typeof value === "object") {
          goThroughtObject(value, name)
        }
        return value;
    })
  } else {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
      	if (key === name){   
      		drawByName(obj[key]);
        }
        if (obj[key] instanceof Array || (obj[key] !== null && obj[key].constructor === Object)) {
          goThroughtObject(obj[key], name);
        }
      } 
    }
  }
};

//implement fabricjs logic in this function
function drawByName (name) {
	console.log("Fabricjs will draw a: " + name);
}

goThroughtObject(obj, 'name');

​

请记住在递归函数之后使用canvas.renderAll();函数，只要它会有更好的性能。