fabric.js 将多选框内的元素坐标变成相对整个画布

可以使用 Fabric.js 的 getCoords() 方法来获取多选框内元素相对于整个画布的坐标。这个方法返回一个对象，包含了该元素左上角和右下角在画布上的坐标。

例如:

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
   left: 100,
   top: 100,
   width: 50,
   height: 50,
   fill: 'red'
});
canvas.add(rect);
var coords = rect.getCoords();
console.log(coords);

`coords` 的值为 {tl: {x: 100, y: 100}, tr: {x: 150, y: 100}, bl: {x: 100, y: 150}, br: {x: 150, y: 150}}

相关问题

fabric.js 将多选框内的子元素坐标的原点设置在左上角

### 回答1：
在 fabric.js 中，可以使用 set({ left: x, top: y }) 方法来设置多选框内子元素的坐标原点。其中 x 和 y 分别表示左上角的横纵坐标。

例如：

var group = new fabric.Group([rect, circle]);
group.set({ left: 0, top: 0 });

这样就可以将group内的元素的坐标原点设置在左上角了

### 回答2：
在fabric.js中，多选框（Group）内的子元素（Objects）的原点默认是左上角。也就是说，当你将多个对象组合在一个多选框中时，它们的坐标原点会自动设置为左上角。

多选框（Group）在fabric.js中是一个重要的功能，它可以将多个对象组合在一起，并且可以一起进行移动、缩放、旋转等操作。当你创建一个多选框并将多个对象添加到其中时，这些对象会相对于多选框的左上角进行定位。

你可以使用以下代码来创建一个多选框并将对象添加到其中：

// 创建一个多选框
var group = new fabric.Group();

// 创建对象
var rect1 = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red',
  top: 10,
  left: 10
});
var rect2 = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'blue',
  top: 50,
  left: 50
});

// 将对象添加到多选框中
group.add(rect1);
group.add(rect2);

// 将多选框添加到画布中
canvas.add(group);

在这个例子中，我们创建了两个矩形对象rect1和rect2，并分别将它们的左上角坐标设置为(10,10)和(50,50)。然后我们创建了一个多选框group，并将这两个矩形对象添加到其中。最后，我们将多选框添加到画布中。

当我们移动多选框时，矩形对象也会跟随移动，因为它们的原点是相对于多选框的左上角进行定位的。

总结起来，fabric.js将多选框内的子元素坐标的原点设置在左上角，这样可以方便地定位和操作这些对象。

### 回答3：
在使用fabric.js进行多选框内子元素的操作时，默认情况下其原点是在中心位置。如果想要将多选框内子元素的原点设置在左上角，可以通过以下步骤实现：

1. 首先，我们需要获取多选框中的子元素，可以通过`group.getObjects()`方法来获取到子元素的数组对象。

2. 然后，我们遍历子元素数组，对每个子元素进行坐标原点设置。可以通过设置子元素的`originX`和`originY`属性来实现。将`originX`设置为`'left'`，将`originY`设置为`'top'`。

3. 最后，重新渲染多选框，以使更改的坐标原点生效。可以通过`canvas.renderAll()`方法来实现重新渲染。

下面是一个示例代码：

var group = canvas.getActiveGroup(); // 获取当前激活的多选框对象
var objects = group.getObjects(); // 获取多选框内的子元素数组

objects.forEach(function(obj) {
  obj.set({
    originX: 'left', // 将坐标原点设置在左边
    originY: 'top', // 将坐标原点设置在上边
  });
});

canvas.renderAll(); // 重新渲染多选框

通过以上步骤，我们可以将多选框内子元素的坐标原点设置在左上角。

fabric.js 同时选中多个元素时，将多选框内的元素坐标定位改成相对整个画布来进行坐标定位

### 回答1：
在 fabric.js 中，可以通过遍历多选框中的所有元素，并使用 canvas 对象的 getPointer() 方法将它们的坐标转换为相对于整个画布的坐标。示例代码如下：

var canvas = new fabric.Canvas('c');
var group = new fabric.Group([circle1, circle2, rect], {
  left: 150,
  top: 100,
});
canvas.add(group);

//获取组内所有元素的相对整个画布的坐标
group.getObjects().forEach(function(o) {
  var pointer = canvas.getPointer(event.e);
  var x = o.left + pointer.x;
  var y = o.top + pointer.y;
  console.log("object's position relative to canvas: x: " + x + " y: " + y);
});

### 回答2：
在fabric.js中，如果要同时选中多个元素并将多选框内的元素坐标定位改为相对整个画布来进行坐标定位，可以通过以下步骤实现：

首先，将多选框内元素的坐标定位模式从相对多选框改为相对整个画布。可以通过遍历选中的元素并修改它们的left和top属性来实现这一点。代码示例如下：

canvas.on('selection:created', function(event) {
  // 获取选中的元素
  var selection = event.target;
  // 遍历选中的元素
  selection.forEachObject(function(obj) {
    // 将元素的坐标定位模式设为相对整个画布
    obj.set({
      left: obj.left + selection.left,
      top: obj.top + selection.top
    });
  });
  // 重新渲染画布
  canvas.renderAll();
});

以上代码中，监听了`selection:created`事件，即当选中多个元素时触发。在事件处理函数中，通过`selection.forEachObject`方法遍历选中的元素，并将它们的left和top属性修改为相对整个画布的坐标。

接下来，需要将多选框内元素的left和top属性修改为相对整个画布的坐标。可以使用`selection.setCoords()`方法来实现这一点。代码示例如下：

canvas.on('selection:updated', function(event) {
  // 获取选中的元素
  var selection = event.target;
  // 将多选框内元素的left和top属性修改为相对整个画布的坐标
  selection.setCoords();
});

以上代码中，监听了`selection:updated`事件，即当多选框内元素发生位置变化时触发。在事件处理函数中，使用`selection.setCoords()`方法将多选框内元素的位置属性修改为相对整个画布的坐标。

通过以上步骤，即可将多选框内元素的坐标定位改为相对整个画布来进行坐标定位。

### 回答3：
当使用fabric.js进行多选时，默认情况下选中多个元素会在每个元素上显示一个多选框，并且多选框的坐标定位是相对于每个元素本身的位置来进行的。

如果我们希望将多选框内的元素坐标定位改成相对整个画布来进行坐标定位，可以按照以下步骤进行操作：

1. 首先，我们需要获取到当前选中的多个元素集合，可以使用fabric.js提供的`canvas.getActiveObjects()`方法来获取。

2. 接着，我们遍历这个多个元素的集合，逐个进行坐标定位的改变。

3. 对于每个选中的元素，我们可以使用`element.left`和`element.top`属性获取它们相对于canvas的左上角的偏移量。

4. 然后，我们可以通过将元素的`left`和`top`属性减去canvas的偏移量来实现将多选框内的元素坐标定位改成相对于整个画布的坐标定位。

以下是一个示例代码：

var activeObjects = canvas.getActiveObjects();

activeObjects.forEach(function(object) {
  var offset = canvas.getOffset();
  object.set({
    left: object.left - offset.left,
    top: object.top - offset.top
  });
});

canvas.renderAll();

通过以上步骤，我们可以实现将多选框内的元素坐标定位改成相对于整个画布来进行坐标定位。