如何获取组中对象的画布相对位置？ [英] How to get the canvas-relative position of an object that is in a group?

问题描述

通常，对象相对于画布的位置可以从它的 .left 和 .top 属性获得，但是如果对象在选择/组中，则这些变为相对于组。有没有办法获得相对于画布的位置？

解决方案

当一个对象在一个组内时，它的坐标相对于画布将取决于组的来源（以及对象的原点）。

让我们说这个代码有一个矩形和一个圆圈添加到一个组。

  var canvas = new fabric.Canvas（document.getElementById（'c'））; 
 
 var rect = new fabric.Rect（{
 width：100，
 height：100，
 left：50，
 top：50，
 fill：'rgba（255,0,0,0.5）'
}）; 
 var circle = new fabric.Circle（{
 radius：50，
 left：175，
 top：75，
 fill：'#aac'
}）; 
 
 var group = new fabric.Group（[rect，circle]，{
 originX：'center'，
 originY：'center'
}）; 
 canvas.add（group）; 
 canvas.renderAll（）; 
  

以下是可能使集团居中的三种情况：

1. 设置为中心的组的来源（如上面的代码所示）：

   
   
   

   如下图所示， rect.left 给出我们距离组中心的距离。
   rect.group.left 给出了画布左侧的组中心距离。

   
   
   

   因此，画布的左边距离= rect.left + rect.group.left （）

   
   
   




2. 组的原点设置为底部/右侧

   
   
   

   rect.left 给出我们距离组中心的距离。
   rect.group.left 给出了画布左边的组右边距离。现在要计算总距离，我们必须减去该组宽度的一半。

   
   
   

   因此，canvas左边的rect距离= rect.left + rect.group.left - rect.group.width / 2 （ http://jsfiddle.net/ uue3hcj6 / 7 / ）

   
   
   

注意：对象也可能出现类似的情况。

Normally an object's position relative to the canvas can be gotten from it's .left and .top attributes, but these become relative to the group if the object is in a selection/group. Is there a way to get their position relative to the canvas?

解决方案

When an object is inside a group, its coordinates relative to the canvas will depend on the origin of the group (and origin of the object as well).

Lets say we have this code which has a rect and a circle added to a group.

var canvas = new fabric.Canvas(document.getElementById('c'));

var rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 50,
    top: 50,
    fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
    radius: 50,
    left: 175,
    top: 75,
    fill: '#aac'
});

var group = new fabric.Group([rect, circle],{
    originX: 'center',
    originY: 'center'
});
canvas.add(group);
canvas.renderAll();

Below are the three cases possible for centering the group:

1. Origin of group set to center(as in the code above):

   As shown in the figure below, rect.left gives us distance of left of object from center of the group. rect.group.left gives us the distance of center of group from left of canvas.

   So distance of rect from left of canvas = rect.left + rect.group.left (http://jsfiddle.net/uue3hcj6/3/)

2. Origin of group is set to top/left (also the default setting)

   rect.left gives us distance of left of object from center of the group. rect.group.left gives us the distance of left of group from left of canvas. Now to calculate the remaining distance, we have to add half of width of the group.

   So distance of rect from left of canvas = rect.left + rect.group.left + rect.group.width/2 (http://jsfiddle.net/uue3hcj6/6/)

3. Origin of group is set to bottom/right

   rect.left gives us distance of left of object from center of the group. rect.group.left gives us the distance of right of group from left of canvas. Now to calculate the total distance, we have to subtract the half of width of the group.

   So distance of rect from left of canvas = rect.left + rect.group.left - rect.group.width/2(http://jsfiddle.net/uue3hcj6/7/)

Note: Similar cases are possible for object as well.

这篇关于如何获取组中对象的画布相对位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！