for (var i = 0; i < controlOptions.length; i++) { var buttonOption = controlOptions[i]; debugger var rectControl = new fabric.Rect({ left: buttonOption.left, top: buttonOption.top, width: 50, height: 20, fill: '#fff', stroke: '#555', strokeWidth: 2, hasBorders: false, hasControls: false, selectable: true, lockMovementX: true, // 设置为 true lockMovementY: true, // 设置为 true cursor: 'pointer' // 设置鼠标样式为手型指针 }); var buttonText = new fabric.Text(buttonOption.text, { left: buttonOption.left + 10, top: buttonOption.top + 4, fontSize: 14, fill: '#000' }); var buttonGroup = new fabric.Group([rectControl, buttonText]); rectControls.push(buttonGroup); } canvasObj.add.apply(canvasObj, rectControls); canvasObj.renderAll();如何在移动矩形时，多个按钮随之移动

要实现移动矩形时多个按钮随之移动，你可以使用Fabric.js的事件监听器来实现。首先，你需要为矩形添加一个`moving`事件监听器，当矩形移动时触发该事件。在事件处理程序中，你可以通过遍历按钮组数组，将每个按钮组的位置更新为矩形的新位置。

以下是一个示例代码：

// 添加矩形移动事件监听器
rectControl.on('moving', function(options) {
    var deltaX = options.e.movementX; // 获取水平方向移动的距离
    var deltaY = options.e.movementY; // 获取垂直方向移动的距离
    
    // 更新每个按钮组的位置
    for (var i = 0; i < rectControls.length; i++) {
        var buttonGroup = rectControls[i];
        buttonGroup.left += deltaX;
        buttonGroup.top += deltaY;
        
        // 更新按钮组内的元素位置
        buttonGroup.forEachObject(function(obj) {
            obj.left += deltaX;
            obj.top += deltaY;
        });
    }
    
    canvasObj.renderAll(); // 重新渲染画布
});

在上述代码中，`rectControls`是一个存储所有按钮组的数组。当矩形移动时，`moving`事件会被触发，并且会更新每个按钮组的位置，并重新渲染画布。

请注意，在添加矩形之前，确保已经将矩形和按钮组添加到画布中。

希望这能帮助到你！如有任何问题，请随时向我提问。