fabric.js 3.6 - Bounding box for group doesn't update when grouped objects are changed

问题

The problem I'm having with fabric.js seems simple, but I've been searching for a solution without any luck, so here I am.

I create a simple group to draw an arrow, consisting of a line object and a rotated triangle placed at its end point. This works fine, but when I dynamically update the stroke width of the line and the width/height of the triangle, the group's bounding box doesn't update to match the new dimensions. Here's an image of the result:

Here's a live demo. Just drag the slider to change the stroke width and triangle size and you'll see the issue.

let canvas = new fabric.Canvas(document.querySelector('canvas'), {
        backgroundColor: 'white'
    }),
    object,
    lineCoords = [100, 75, 250, 75],
    strokeWidth = parseFloat(document.querySelector('.strokewidth').value),
    createArrow = () => {
        return new fabric.Group(
            [
                new fabric.Line(lineCoords, {
                    left: lineCoords[0],
                    top: lineCoords[1],
                    stroke: 'red',
                    strokeWidth: strokeWidth,
                    strokeLineCap: "round",
                }),
                new fabric.Triangle({
                    width: strokeWidth + 22, 
                    height: strokeWidth + 22, 
                    fill: 'red', 
                    left: lineCoords[0] + 150 + strokeWidth + 22 + ((strokeWidth + 22) / 2) - 14, 
                    top: lineCoords[1] - (Math.floor((strokeWidth + 22) / 2)) + (Math.floor(strokeWidth / 2)),
                    angle: 90,
                })
            ],
            { objectCaching: false }
        )
    }

let arrow = createArrow()
canvas.add(arrow)
canvas.setActiveObject(arrow)
canvas.renderAll()

$('body').on('input change', '.strokewidth', e => {
    if (object = canvas.getActiveObject()) {
        let value = parseFloat(e.target.value),
            [ line, triangle ] = object.getObjects()

        line.set({
            strokeWidth: value
        })
        triangle.set({
            width: value + 22,
            height: value + 22,
            left: line.left + line.width + value + 22 + ((value + 22) / 2) - 14,
            top: line.top - (Math.floor((value + 22) / 2)) + (Math.floor(value / 2))
        })
        canvas.renderAll()
    }
})

body {
    background: #f0f0f0;
    padding: 0;
  margin: 0;
}
canvas {
    border: 1px solid lightgray;
}
div {
    margin: 0.5em 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<canvas width="400" height="150"></canvas>
<div>
    <input type="range" class="strokewidth" min="1" max="40" value="5">
</div>

I'm using version 3.6 of fabric.js. Apparently there was a way to refresh the bounding box in older versions, but none of the code works with 3.6 - the functions no longer exist. I've tried several kludges to fix it, including ungrouping and regrouping the objects, without any luck so far.

Does anyone know how to force a recalculation of the bounding box in this situation? Thanks for any help.

回答1:

In FabricJS 3 the best way to scale a group of objects is to change the scale value of the whole group:

group.set({ scaleX: value, scaleY: value })

I assume that sometimes it is required to scale only some objects inside a group or scale them with a different proportion. I think historically it was decided that this heavy operation needs to be triggered by the developer. There is a method for doing that addWithUpdate and it can be called without passing an object to it.

let canvas = new fabric.Canvas(document.querySelector('canvas'), {
        backgroundColor: 'white'
    }),
    object,
    lineCoords = [100, 75, 250, 75],
    strokeWidth = parseFloat(document.querySelector('.strokewidth').value),
    createArrow = () => {
        return new fabric.Group(
            [
                new fabric.Line(lineCoords, {
                    left: lineCoords[0],
                    top: lineCoords[1],
                    stroke: 'red',
                    strokeWidth: strokeWidth,
                    strokeLineCap: "round",
                }),
                new fabric.Triangle({
                    width: strokeWidth + 22, 
                    height: strokeWidth + 22, 
                    fill: 'red', 
                    left: lineCoords[0] + 150 + strokeWidth + 22 + ((strokeWidth + 22) / 2) - 14, 
                    top: lineCoords[1] - (Math.floor((strokeWidth + 22) / 2)) + (Math.floor(strokeWidth / 2)),
                    angle: 90,
                })
            ],
            { objectCaching: false }
        )
    }

let arrow = createArrow()
canvas.add(arrow)
canvas.setActiveObject(arrow)
canvas.renderAll()

$('body').on('input change', '.strokewidth', e => {
    if (object = canvas.getActiveObject()) {
        let value = parseFloat(e.target.value),
            [ line, triangle ] = object.getObjects()

        line.set({
            strokeWidth: value
        })
        triangle.set({
            width: value + 22,
            height: value + 22,
            left: line.left + line.width + value + 22 + ((value + 22) / 2) - 14,
            top: line.top - (Math.floor((value + 22) / 2)) + (Math.floor(value / 2))
        })
        
        canvas.renderAll()
        arrow.addWithUpdate()
    }
})

body {
    background: #f0f0f0;
    padding: 0;
  margin: 0;
}
canvas {
    border: 1px solid lightgray;
}
div {
    margin: 0.5em 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<canvas width="400" height="150"></canvas>
<div>
    <input type="range" class="strokewidth" min="1" max="40" value="5">
</div>

来源：https://stackoverflow.com/questions/63256748/fabric-js-3-6-bounding-box-for-group-doesnt-update-when-grouped-objects-are-c