计算组在 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

我发现我尝试实施的方法存在很多问题。现在改为 od 重新定位，分组，etc.I 正在缩放 canvas

计算组在 fabric js 中的百分比位置

Calculate % position of the group in fabric js

javascript

canvas

fabricjs