Fabric js bounding box positioning issue

Question

Bounding box for some custom path is not positioned correctly. I am using fabricjs library please help me how to remove this bug. I am using the following code to generate the path.

var path = new fabric.Path('m138.31999,1l0,29.565c-75.13835,4.16908 -134.31995,48.17229 -134.31999,101.835c0,-9.67107 16.35202,-17.51999 36.5,-17.51999c20.14798,0 36.5,7.84892 36.5,17.51999c0,-9.67107 16.35202,-17.51999 36.5,-17.51999c9.59525,0 18.30284,1.83565 24.81999,4.745l0,144.17499c0,6.44742 -5.23262,11.68002 -11.67999,11.68002c-6.44734,0 -11.68,-5.2326 -11.68,-11.68002l0,-5.84l-23.36,0l0,5.84c0,19.34207 15.6979,35.04001 35.04,35.04001c19.34206,0 35.04001,-15.69794 35.04001,-35.04001l0,-144.17499c6.51714,-2.90935 15.22475,-4.745 24.81999,-4.745c20.14798,0 36.5,7.84892 36.5,17.51999c0,-9.67107 16.35202,-17.51999 36.5,-17.51999c20.14798,0 36.5,7.84892 36.5,17.51999c0,-53.66274 -59.18159,-97.66592 -134.31999,-101.835l0,-29.565l-23.36002,0z');
canvas.add(path);

Answer 1

You can move the bounding box to your object corner with this code:

path.pathOffset.x = 0;
path.pathOffset.y = 0;

Unfortunately, I couldn't find a way to resize it automatically. You can change bounding box size by path.width and path.height properties but it seems that Fabric will not compute it for you. Maybe you'll need to iterate over path points array to find min/max values for X and Y, so you can compute the BB size on your own.

Answer 2

This was a bug of the library with some beizer and arcs. Now, since 1.5.0 , every known path is handled correctly.