Как получить верхний левый объект внутри группы fabricjs - PullRequest
Новая
       10

Как получить верхний левый объект внутри группы fabricjs

0 голосов
/ 08 октября 2018

Как я могу получить относительную к холсту позицию (сверху, слева) треугольника внутри группы как изображение ниже?

Я следовал этой теме: Как получить относительную к холсту позицию объектато есть в группе? но это верно только тогда, когда группа не вращается.

enter image description here

1 Ответ

0 голосов
/ 24 января 2019

Рабочий пример вы можете найти здесь: http://jsfiddle.net/mmalex/2rsevdLa/

fabricJs: calculate canvas space coordinates of child object in the group

Fabricjs дает исчерпывающее объяснение того, как преобразования применяются к объектам: http://fabricjs.com/using-transformations

Быстрый ответ: координаты объекта внутри группы - это точка [0,0] , преобразованная в точности так, как был преобразован объект в группе .

Подписатьсямои комментарии в коде, чтобы получить идею. 

    // 1. arrange canvas layout with group of two rectangles
    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.25)'
    });
    var smallRect = new fabric.Rect({
      width: 12,
      height: 12,
      left: 150 - 12,
      top: 50 + 50 - 12 / 2 - 10,
      fill: 'rgba(250,250,0,0.5)'
    });

    // 2. add a position marker (red dot) for visibility and debug reasons
    var refRect = new fabric.Rect({
      width: 3,
      height: 3,
      left: 100,
      top: 100,
      fill: 'rgba(255,0,0,0.75)'
    });

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

    // 3. calculate coordinates of child object in canvas space coords
    function getCoords() {
      // get transformation matrixes for object and group individually
      var mGroup = group.calcTransformMatrix(true);

      // flag true means that we need local transformation for the object,
      // i.e. how object is positioned INSIDE the group
      var mObject = smallRect.calcTransformMatrix(true);

      console.log("group: ", fabric.util.qrDecompose(mGroup));
      console.log("rect: ", fabric.util.qrDecompose(mObject));

      // get total transformattions that were applied to the child object,
      // the child is transformed in following order:
      // canvas zoom and pan => group transformation => nested object => nested object => etc...
      // for simplicity, ignore canvas zoom and pan
      var mTotal = fabric.util.multiplyTransformMatrices(mGroup, mObject);
      console.log("total: ", fabric.util.qrDecompose(mTotal));

      // just apply transforms to origin to get what we want
      var c = new fabric.Point(0, 0);
      var p = fabric.util.transformPoint(c, mTotal);
      console.log("coords: ", p);
      document.getElementById("output").innerHTML = "Coords: " + JSON.stringify(p);

      // do some chores, place red point
      refRect.left = p.x - 3 / 2;
      refRect.top = p.y - 3 / 2;
      canvas.bringToFront(refRect);
      canvas.renderAll();
    }
...