Question

我正在创建一个家族树，并且在创建来自父节点的子节点时遇到了一些问题。目前我正在绘制topPerson.draw(context); =父节点，然后调用for循环来遍历他们在Partnership.js文件中存在的子数组，数组为this.mChildren = new Array();

我要做的是循环遍历数组并以与父节点相同的样式绘制父节点下的每个子节点（以矩形为边界，以图像为中心，名称在下面）。

Person.js用于将画布的原点设置为居中，绘制一个矩形，写入包含该节点名称的文本，然后添加节点图像：

Person.prototype.draw = function (context) {
    //draw rectangle
    var c = document.getElementById("canvas");
    var context = c.getContext("2d");
    context.scale(1, 1);
    context.rect(canvas.width * 0.5, canvas.height * 0.5,160,210);
    context.fillStyle = '#FFFFFF';
    context.fill();
    context.stroke();
    context.fillStyle = '#000000';
    context.font = "30px Arial";
    context.fillText(this.getName(), canvas.width * 0.5 + 15, canvas.height * 0.5 + 190);
    //get image and draw
    context.drawImage(this.getImage(), canvas.width * 0.5 + 5, canvas.height * 0.5 + 5);

我试图创建一个如下所示的数组：

for (i = 0; < mChildren.length; i++){
        img = new Image();
        img.src = mChildren[i];
        img.onLoad = (function(img, i){
            return function () {
                context.drawImage(img, i*img.width, i*img.height);
            }
        })(img, i)
    }

Javascript画布从数组中绘制

0 个答案: