Ich versuche Punkte zu platzieren (gemacht überfabric.Circle) an den Ecken einesfabric.Polygon. Das Polygon kann vom Benutzer verschoben, skaliert oder gedreht werden. Nach jeder Änderung möchte ich jedoch die neuen Koordinaten des Polygons haben, um meine Kreise dort zu platzieren.

Während ich mich näher mit diesem Thema befasste, fand ichDie große Erklärung der Transformationsmatrizen. Ich dachte, es ist die perfekte Lösung für das, was ich erreichen möchte. Aber wie Sie in der Geige sehen können, sind meine Punkte immer weit von meinem Polygon entfernt.

Als ich nicht fest mit geometrischer Transformation usw. bin Ich hoffe, jemand kann meinen Fehler finden und mir sagen, was ich vermisse :) Danke.

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>

Verwandte Fragen zu SO: