Fabric JS组选择和缩放弄乱了单个对象的位置属性答案

【问题标题】：Fabric JS group selection and scaling messing up individual object position attributesFabric JS组选择和缩放弄乱了单个对象的位置属性
【发布时间】：2021-09-13 11:30:28
【问题描述】：

我正在尝试实现一个功能，使画布上的每个对象的大小均等地缩小并将它们放在画布上（以便在画布周围添加一些空间/填充）

但是，一旦我定义了selection 变量，对象的位置就会完全改变，而不会在视觉上改变位置。大多数top 和left 属性变为负数，我发现它们的新位置代表它们与对象组中心的距离。

这会导致画布上的持久效果，当我调用selection.addWithUpdate() 时，边界框出现在同一个位置，但对象控件（调整大小和旋转点）仍然位于错误的位置。我尝试使用selection.setCoords() 重置控件，但没有效果。

当我遍历每个对象和 console.log obj.left 和 obj.top 时，我得到大部分为负值，如前所述，即对象控件的位置。

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

canvas.renderAll()
selection.addWithUpdate()
selection.setCoords()

【问题讨论】：

请用最少的代码添加 Codesandbox 以复制问题

标签： javascript reactjs canvas fabricjs

【解决方案1】：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta http-equiv="cleartype" content="on">

    <link rel="stylesheet" href="style.css">
    <script src="qwery-bonzo-bean.js"></script>
    <script src="qbb-config.js"></script>
    <script src="fabric-1.3.0.js"></script>
    <script src="script.js"></script>
</head>

<body onload="init();">
    <div id="toolbar">
        <button id="mobilePortrait" data-scale="320px,480px">320x480</button>
        <button id="mobileLandscape" data-scale="480px,320px">480x320</button>
  
        <button id="tabletPortrait" data-scale="768px,1024px">768x1024</button>
        <button id="tabletLandscape" data-scale="1024px,768px">1024x768</button>
  
        <button id="fullscreen" data-scale="100%,100%">100%</button>
    </div>
    <div id="viewport">
        <div id="content">
        <div id="map">
            <div id="bg" class="scalable"><img src="http://img.wallpaperstock.net:81/building-and-sky-wallpapers_575_1024x768.jpg" /></div>
            </div>
            <div id="canvi">
                <canvas id="draw_canvas" width="1024" height="768"></canvas>
            </div>
        </div>
    </div>
    <div id="viewportBorder"></div>
    </body>

</html>

【讨论】：

【解决方案2】：

坐标变为负数的原因是选择认为(0, 0)是选择的中心。您可能已经在您的对象上看到过这样的值：

将选择本身的left 和top 属性添加到对象会计算到原始位置。像这样简单的东西就是你所需要的：

function calculateOriginalPosition(selection) {
  selectionObjects = selection.getObjects();

  selectionObjects.forEach((object) => {
    // Giving each object the original position.
    object.left += selection.left;
    object.top += selection.top;

    // Do something with your object here
  });
}

【讨论】：