'fabricjs issue with bounding/selection box after polygon dynamially manipulated

Using fabricjs, i draw a polygon. And place point markers at each point of polygon. Now when user drags this point marker, i dynamically manipulate respective polygon points to allow user to modify polygon as per his needs.

First click on black polygon, you will see selection box (bounding box), now drag any green point to modify polygon, after polygon is modified, again try clicking on black polygon, the bounding box/selection area/clickable area is same as previous one, while it should include new modified polygon.

I tried searching google and here and only found to use .setCoods() method but that don't work in this case.

I am using 3.6.3 version of fabricjs.

Please help.

/**
 * fabric.js template for bug reports
 *
 * Please update the name of the jsfiddle (see Fiddle Options).
 * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js).
 */

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

// ADD YOUR CODE HERE
var points = [{"x":60,"y":20},{"x":100,"y":40},{"x":100,"y":80},{"x":60,"y":100},{"x":20,"y":80},{"x":20,"y":40}]
var options = {selectable: true, objectCaching: false};
var polygon = new fabric.Polygon(points, options);
canvas.add(polygon);

points.forEach(function(point, index) {
  var circle = new fabric.Circle({
    radius: 5,
    fill: 'green',
    left: point.x,
    top: point.y,
    originX: 'center',
    originY: 'center',
    hasBorders: false,
    hasControls: false,
    name: index
  });
  canvas.add(circle);
});

canvas.on('object:moving', function (options) {
  
  var objType = options.target.get('type');
  var p = options.target;
  polygon.points[p.name] = {x: p.getCenterPoint().x, y: p.getCenterPoint().y};
  
  //UNCOMMENT LINES 39 - 42 TO HAVE A WORKAROUND
    //canvas.remove(polygon);
  //polygon = new fabric.Polygon(polygon.points, {selectable: false});
  //canvas.add(polygon);
  //canvas.sendToBack(polygon);
});
canvas {
    border: 1px solid #999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>
fabricjs


Solution 1:[1]

I'm having a similiar issue.

I solved this by:

  • recreating the original polygon (essentially cloning it)
  • removing the original polygon from the canvas
  • adding the new polygon to the canvas

Not exactly a fix, but a workaround which worked for me.

Solution 2:[2]

I recently also occured this same problem, that I changed the points of the polygon and needed to update the bounding box.

After you've set the points, you can set recalculate the bounding box as follows:

const { width, height, left, top } = polygon._calcDimensions();
polygon.set({
    width,
    height,
    originX: 'left',
    originY: 'top',
    pathOffset: new fabric.Point(left + width / 2, top + height / 2),
}).setCoords();
canvas.requestRenderAll();

Solution 3:[3]

My polygon after having reassigned its points did not update as well. I obviously wanted to avoid re-inserting the object as this was performed pretty often. I remembered I used this example before and come back to it; and noticed they call polygonObject._setPositionDimensions({}) and do not use the output value.

I was not disappointed, it actually updated all the properties correctly. Nothing has worked for me so well, setCoords was pretty much useless. _setPositionDimensions({}) fixed everything.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 beac0n
Solution 2 MegaCookie
Solution 3 Ji?í

Related Questions