创建动态对象组

Question

我已获得以下代码：

function createLineGroup(x, y, hLine, wLine, wCell, offset) {
    "use strict";

    var i,
        objects = [],
        group = new fabric.Group();

    for (i = x; i <= (wLine + x); i += (wCell + offset)) {
        group.addWithUpdate(
            new fabric.Rect({
                left: group.get('left') + i,
                width: wCell,
                height: hLine,
                fill: 'red',
                opacity: 0.5
            }));
    }

    group.addWithUpdate(new fabric.Text('test', {
        fontSize: 15,
        originX: 'center',
        originY: 'center'
    }));

    return group;
}

我想动态创建一组框并在画布上绘制它们。示例：

按照单元格的宽度和偏移量，它会在组内创建以下框。

但它实际上没有工作，有关如何实现它的任何想法？

修改1：

一个JS小提琴的例子，这实际上是有效的，但是文本没有居中。如何解决？

https://jsfiddle.net/dfc40s3u/2/

Answer 1

将一些简单的数学与传递给函数的变量一起使用。

将其添加到Text对象：

left:largeurLigne/2 // the half of the width of all the `Rect` object.