Данные объекта случайным образом изменены Fabricjs

Question

У меня есть фрагмент кода, который записывает щелчки мыши и рисует многоугольник в конце. После того, как он рисует многоугольник, он строит массив координат, готовый для будущей обработки.

Проблема, с которой я столкнулся, заключается в том, что то, что записано и нарисовано, и то, что является строгим, - это два совершенно разных набора данных.

например.

(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

Похоже, что вы используете fabricJS предыдущую версию 1.6.0 В 1.5.0 fabricjs был модифицируя массив точек в то время как в настоящее время нет.

Кукуруза состояла в вычитании каждой точки верхней, левой и половинной ширины полигона, чтобы привести ее по центру.

Либо обновление ИЛИ клонирование массива точек перед передачей на многоугольник.