Question

所以我试图让obj.left基于组的左侧（墙）而不是中心。所以现在，当我尝试获取对象的left时，如果它在左侧，它将返回一个负数。

我已经尝试了setOriginY和setOriginX，但它们没有任何效果。

我正在通过根据组的宽度做一些数学来解决这个问题。

现在，如果点击“克隆”按钮，左侧值会读取负值（-100.5和-0.5）。相反，它们应分别为0和99.5（我认为）。

Answer 1

不幸的是，任何有效群组的来源x和y将始终位于中心位置。这不会考虑originX和originY属性，因此设置setOriginX和setOriginY不会产生任何影响。

要解决此问题，您需要手动计算与所选组相对应的对象的 top和left位置，如此...

let objLeft = obj.left + (active.width / 2);
let objTop = obj.top + (active.height / 2);

<强>ᴅᴇᴍᴏ

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
   left: 50,
   top: 50,
   fill: "#FF0000",
   stroke: "#000",
   width: 100,
   height: 100,
   strokeWidth: 1,
   opacity: .8
});
var rect1 = new fabric.Rect({
   left: 150,
   top: 150,
   fill: "#FF0000",
   stroke: "#000",
   width: 100,
   height: 100,
   strokeWidth: 1,
   opacity: .8
});
canvas.add(rect);
canvas.add(rect1);

function clone() {
   let active = canvas.getActiveGroup();
   if (active) {
      active.forEachObject(obj => {
         let clone = obj.clone();
         
         // get object's left & top relative to the group
         let objLeft = obj.left + (active.width / 2);
         let objTop = obj.top + (active.height / 2);
         
         clone.setLeft(objLeft + active.left);
         clone.setTop(objTop + active.top);
         canvas.add(clone);
      });
   }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="c" width="300" height="300" style="border: 1px solid black;"></canvas>
<button onclick="clone()">
Clone
</button>

Fabricjs - 将组中的对象设置为基于左墙

1 个答案: