Objektdaten zufällig geändert Fabricjs

Question

Ich habe ein Stück Code, der Mausklicks aufzeichnet und ein Polygon am Ende zeichnet. Nachdem das Polygon gezeichnet wurde, wird das Koordinaten-Array für die zukünftige Verarbeitung vorbereitet.

Das Problem, dem ich gegenüberstehe, ist, dass das, was aufgezeichnet und gezeichnet wird und was stringifiziert wird, zwei völlig unterschiedliche Datensätze sind.

z.B.

(index):169 Mouse click at 543 179 
(index):171 Object {x: 543, y: 179} contains value, match as per mouse click 
(index):169 Mouse click at 310 592 
(index):171 Object {x: 310, y: 592} contains value, match as per mouse click 
(index):169 Mouse click at 735 480 
(index):171 Object {x: 735, y: 480} contains value, match as per mouse click 
(index):246 [{"x":20.5,"y":-206.5},{"x":-212.5,"y":206.5},{"x":212.5,"y":94.5}] is stringified value 

JS

var coords = []; 
    var canvas = new fabric.Canvas('canvas'); 

    canvas.on('mouse:down', function (options) { 
       getCoordinates(options); 
     }); 



    $('.drawReady').click(function(){ 
      drawMyPolygon(coords, 1); 
      stringifyTheData(); 
    }); 

function drawMyPolygon(retData, tmpId) { 
      var polygon = new fabric.Polygon(retData, { 
       fill: 'purple', 
       selectable: true, 
       lockMovementX: true, 
       lockMovementY: true, 
       id: tmpId 
      }); 

      canvas.add(polygon); 

     }; 
    function getCoordinates(options) { 
     var pointer = canvas.getPointer(event.e); 
     coords.push({x: pointer.x, y: pointer.y}); 
    } 

    function stringifyTheData() { 
     var retVal = JSON.stringify(coords); 
    } 

Answer 1

Es sieht aus wie Sie fabricJS vor Version 1.6.0 In 1.5.0 fabricjs verwenden wurde der Punktmatrix zu modifizieren, während jetzt nicht der Fall ist.

Die Cange bestand darin, zu jedem Punkt die obere, linke und halbe Breite des Polygons zu subtrahieren, um den Ursprung zentriert zu bringen.

Aktualisieren Sie ODER das Klonen des Punktarrays, bevor Sie an das Polygon übergeben werden.