Fabricjs

Question

我的fiddle：http://jsfiddle.net/yeftc60v/1/

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

setOriginY 和 setOriginX 我都试过了，但没有任何效果。

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

现在，如果您点击 "clone" 按钮，左侧的值将显示为负值（-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 - 获取组中的对象以基于左墙

Fabricjs - Get objects in group to be based on left wall

html

javascript

canvas