fabric js Polygon setCoords

Question

I've got a question about fabric.js and the polygon-object. I have an example of my problem in this fiddle: Click me

First 4 fabric.Circle subobjects called linePoint are drawn.

The linePoint objects have an extra x(same as left) and y(same as top) coordinate and a reference to which polygon they belong to:

fabric.LinePoint = fabric.util.createClass(fabric.Circle,
{
    initialize: function (options) {
        options || (options = {});
        this.callSuper('initialize', options);
        options &&
        this.set('type', 'line_point'),
        this.set('x', this.left),
        this.set('y', this.top),
        this.set('polygon',  options.polygon)
    },
    setPointCoordinates: function(new_left, new_top) {
        this.set('x', new_left);
        this.set('y', new_top);
        this.set('left', new_left);
        this.set('top', new_top);

    }

With the now given x and y coordinates there is a Polygon drawn between the Points.

The problem is now, when you move the Circles, the Polygon is moved correctly, but its border (or I don't know how to exactly call it) will stay the same small rectangle as it was.

I want to update the polygon Coords too, I tried .setCoords(), but nothing happened.

Maybe you can help me. :) Thanks!

Answer 1

In reply also to: https://groups.google.com/forum/#!topic/fabricjs/XN1u8E0EBiM

This is your modified fiddle: https://jsfiddle.net/wum5zvwk/2/

fabric.LinePoint = fabric.util.createClass(fabric.Circle,
{
    initialize: function (options) {
        options || (options = {});
        this.callSuper('initialize', options);
        this.set('type', 'line_point'),
        this.set('x', this.left),
        this.set('y', this.top),
        this.set('polygon',  options.polygon)
    },
    setPointCoordinates: function(new_left, new_top) {
        this.set('x', new_left);
        this.set('y', new_top);
        this.set('left', new_left);
        this.set('top', new_top);

    }
});

var canvas = new fabric.Canvas('canvas');

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
document.getElementById("canvas").tabIndex = 1000;
drawPolygonToCanvas();
canvas.on('object:moving', function(event) {
  var object = event.target;
  switch(object.type) {
    case 'line_point':
    //move polygon
      object.setPointCoordinates(object.left, object.top);
    	object.polygon.setCoords();
      object.polygon.initialize(object.polygon.points);
      object.polygon.top += object.polygon.height / 2;
      object.polygon.left += object.polygon.width / 2;
    	canvas.renderAll();
    break;
  }
});


function drawPolygonToCanvas()
{
    //creting end_points and set them
        old_position = canvas.getPointer(event.e);
        var end_point_1 = createLinePoint(100, 100);
        var end_point_2 = createLinePoint(100, 150);
        var end_point_3 = createLinePoint(150, 150);
        var end_point_4 = createLinePoint(150, 100);

        end_points_in_use = [end_point_1, end_point_2, end_point_3, end_point_4];

        canvas.add(end_point_1, end_point_2, end_point_3, end_point_4);
        drawPoly(end_points_in_use);
        canvas.deactivateAll();
        canvas.renderAll();

}

function drawPoly(point_array)
{
    var poly = new fabric.Polygon(point_array, {
        left: (100 + ((150 - 100) /2)),
        top: (100 + ((150 - 100) /2)),
        fill: 'lightblue',
        lockScalingX:  true,
        lockScalingY:  true,
        lockMovementX: true,
        lockMovementY: true,
        perPixelTargetFind: true,
        opacity: 0.5,
        type: 'polygon'
    });
    
    for (var i = 0; i < point_array.length; i++) {
        point_array[i].polygon = poly;
    }
    canvas.add(poly);
    poly.sendToBack();
}


function createLinePoint(left, top) {
    return new fabric.LinePoint({
        left:           		 left,
        top:            		 top,
        strokeWidth:    		 2,
        radius:         		 15,
        fill:           		 '#fff',
        stroke:         		 '#666',
        related_poly_point:  0,
        lockScalingX:        true,
        lockScalingY:        true
    });
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div  id="canvas-wrapper" style="position:relative;width:704px;float:left;">
    <canvas id="canvas" width="700" height="600" style="border:1px solid #000000;"></canvas>
</div>

Modifying the polygon points is not enough to have the bounding box adjusted. The easies thing i can think of is to re initialize the polygon with the new points coordinates.