Estou tentando colocar pontos (feitos viafabric.Circle) nos cantos de umfabric.Polygon. O polígono pode ser movido, redimensionado ou girado pelo usuário. No entanto, após cada modificação, quero ter as novas coordenadas do polígono para colocar meus círculos lá.

Ao me aprofundar neste tópico, encontreiesta grande explicação das matrizes de transformação. Eu pensei que é a solução perfeita para o que eu quero alcançar. Mas como você pode ver no Fiddle, meus pontos estão sempre longe do meu polígono.

Como não sou firme na transformação geométrica, etc. Espero que alguém encontre o meu erro e me diga o que estou perdendo :) Obrigado.

var canvas = new fabric.Canvas("c", {selection: false});

var polygon = new fabric.Polygon([
  new fabric.Point(200, 50),
  new fabric.Point(250, 150),
  new fabric.Point(150, 150)
]);

polygon.on("modified", function () {
  var matrix = this.calcTransformMatrix();
  var transformedPoints = this.get("points").map(function(p){
    return fabric.util.transformPoint(p, matrix);
  });
  var circles = transformedPoints.map(function(p){
    return new fabric.Circle({
      left: p.x,
      top: p.y,
      radius: 3,
      fill: "red",
      originX: "center",
      originY: "center",
      hasControls: false,
      hasBorders: false,
      selectable: false
    });
  });
  
  this.canvas.clear().add(this).add.apply(this.canvas, circles).setActiveObject(this).renderAll();
});

canvas.add(polygon).renderAll();

canvas {
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>
<p>
Move, scale and rotate the polygon. The three red dots should match with the corners of the polygon after each modification.
</p>
<canvas id="c" width="600" height="400"></canvas>

Perguntas relacionadas ao SO: