javascript - 计算组在fabric js中的%位置

Question

遇到一个问题，不知道是不是和当前线程有关。
我在 Canvas 内创建了一个矩形，如下所示:

灰色部分是 Canvas ，里面有一个小矩形。这是我写的代码:

// THIS METHOD WHEN THE COMPONENT IS INITIALIZED
// THAT IS VERY FIRST TIME
// htmlCanvas = Canvas from HTML file
initCanvas(htmlCanvas) {
    this.mockupDrawableAreaCanvasSize = size;
    this.mainCanvasDivRef = htmlCanvas;
    fabric.textureSize = 4096;
    fabric.charWidthsCache = {};
    fabric.Object.prototype.borderScaleFactor = 2;
    fabric.Object.prototype.objectCaching = false;
    fabric.Object.prototype.noScaleCache = true;
    fabric.Object.prototype.lockScalingFlip = true;
    fabric.Object.prototype.hasRotatingPoint = true;
    fabric.Object.prototype.transparentCorners = false;
    fabric.Object.prototype.cornerColor = "rgb(255,255,255)";
    fabric.Object.prototype.cornerSize = 8;
    fabric.Object.prototype.cornerStrokeColor = "#48B774";
    fabric.Object.prototype.borderColor = "#48B774";
    fabric.Object.prototype.fill = "#FFFFFF";
    fabric.Object.prototype.cornerStyle = "rect";
    fabric.Object.prototype.borderOpacityWhenMoving = .5;
    fabric.Object.prototype.snapAngle = 90;
    fabric.Object.prototype.snapThreshold = 5;
    fabric.Object.prototype.charWidthsCache = {};

    this.canvas = new fabric.Canvas(htmlCanvas.nativeElement, this.defaultOption);

    this.canvas.backgroundColor = '#e8e8e8';
    this.canvas.uniScaleTransform = true;

    this.canvas.requestRenderAll()

    // -------
    const {
        width,
        height
    } = this.getDimensions();
    this.drawingBoard = new fabric.Rect({
        excludeFromExport: false,
        hasControls: false,
        height,
        selectable: false,
        borderColor: "transparent",
        strokeWidth: 0,
        stroke: 'transparent',
        fill: '#ffffff',
        width,
        preserveObjectStacking: false,
        absolutePositioned: true,
        clip_id: 'io_main_canvas',
        originX: 'center',
        originY: 'center',
        lockUniScaling: true,
    });
}
// Here mockupDrawableAreaCanvasSize = {width: 1080, height: 1080}
getDimensions() {
    let containerWidth: any = parseInt(this.mockupDrawableAreaCanvasSize.width, 10);
    let containerHeight: any = parseInt(this.mockupDrawableAreaCanvasSize.height, 10);
    const footer: any = document.querySelector('.footer-toolbar');
    const container = document.querySelector('.upper-canvas');
    const lowerCanvasEl = container && window.getComputedStyle(container, null);
    let canvasHeight = parseInt(lowerCanvasEl.height, 10) - 1.5 * parseInt(footer.offsetHeight, 10);
    const canvasWidth = parseInt(lowerCanvasEl.width, 10);

    // Complete fit
    if (containerWidth <= canvasWidth && containerHeight <= canvasHeight) {
        return {
            width: containerWidth,
            height: containerHeight
        }
    }
    if (canvasWidth < containerWidth) {
        containerWidth = canvasWidth - 80;
        canvasHeight = (containerWidth / (containerWidth / containerHeight)) - 6 * parseInt(footer.offsetHeight, 10)
    }
    let width = (containerWidth / containerHeight) * canvasHeight;

    return {
        width,
        height: canvasHeight
    }
}

此代码适用于每个用例。我想将对象放置在它们最初在更大或更小的屏幕中的相同位置。
我的方法是:
将所有内容分组，将组添加到 Canvas ，计算百分比，缩放，最后取消组合
但是物体非常小，如下图所示

我应该如何缩放对象以使整个内容完美地融入组中？
将所有内容分组 -> 完成
计算组的 % 位置 -> 完成
按比例缩放组 -> 如何？
-->>> 哪个值之间的比率-组和 Canvas 或组和绘图板？
申请相同的 % 位置 --> 完成
取消分组 --> 完成

Answer 1

我发现我尝试实现的方法存在很多问题。现在，而不是重新定位、分组等。我正在缩放 Canvas