Estoy tratando de colocar puntos (hecho a través defabric.Circle) en las esquinas de unfabric.Polygon. El usuario puede mover, escalar o rotar el polígono. Sin embargo, después de cada modificación, quiero tener las nuevas coordenadas del polígono para colocar mis círculos allí.

Mientras profundizaba en este tema, encontréesta Gran explicación de las matrices de transformación. Pensé que es la solución perfecta para lo que quiero lograr. Pero como puede ver en el violín, mis puntos siempre están fuera de mi polígono.

Como no soy firme con la transformación geométrica, etc. Espero que alguien pueda encontrar mi error y decirme lo que me falta :) Gracias.

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>

Preguntas relacionadas sobre SO: