Fabric JS 缩放多个对象并将其居中在 canvas 上，而不缩放 canvas

Question

Is it possible to scale down every object in a canvas (my image example contain about 10 objects) and center them without scaling the canvas? (The size of the canvas is the same in both the first and second image)

See image example the first image represent the original version, and the second image represent the desired version. Given some number, all objects are shrunk but their positioning are also tweaked so that their relative distances to each other are not disrupted, while maintaining centerism. The two images seem to be of different sizes, but they are the same size.

Answer 1

Yes, you can select every object and scale them to whatever dimension you need (if I understand your question).

   var selection = new fabric.ActiveSelection(canvas.getObjects(), { canvas:canvas });

        var sizeObj = resizer(
          { width: canvas.getWidth(), height: canvas.getHeight() },
          { width: selection.width, height: selection.height });

        selection.scaleToHeight(sizeObj.height)
        selection.center();

---

// routine from a stackoverflow contributer
resizer(canvas, imageObj) {
    var imageAspectRatio = imageObj.width / imageObj.height;
    var canvasAspectRatio = canvas.width / canvas.height;
    var renderableHeight, renderableWidth, xStart, yStart;

    // If image's aspect ratio is less than canvas's we fit on height
    // and place the image centrally along width
    if (imageAspectRatio < canvasAspectRatio) {
      renderableHeight = canvas.height;
      renderableWidth = imageObj.width * (renderableHeight / imageObj.height);
      xStart = (canvas.width - renderableWidth) / 2;
      yStart = 0;
    }

    // If image's aspect ratio is greater than canvas's we fit on width
    // and place the image centrally along height
    else if (imageAspectRatio > canvasAspectRatio) {
      renderableWidth = canvas.width
      renderableHeight = imageObj.height * (renderableWidth / imageObj.width);
      xStart = 0;
      yStart = (canvas.height - renderableHeight) / 2;
    }

    // Happy path - keep aspect ratio
    else {
      renderableHeight = canvas.height;
      renderableWidth = canvas.width;
      xStart = 0;
      yStart = 0;
    }
    return { x: xStart, y: yStart, width: renderableWidth, height: renderableHeight }
  }