创建动态对象组

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;
}

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

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

但它实际上不起作用，知道如何实现它吗？

编辑 1 :

做了一个JS Fiddle的例子，这确实有效，但文本没有居中。如何解决？

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

Answer 1

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

将此添加到 Text 对象：

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

创建动态对象组

Creating dynamic objects group

javascript

fabricjs