Clippath bounding box

[aceylan]

Hi.
I am using clippath on my project. But after that, I want to trim object.

(function() {
var canvas = new fabric.Canvas('canvas');
var clipPath = new fabric.Circle({
radius: 40,
top: -40,
left: -40
});
var rect = new fabric.Rect({
width: 200,
height: 100,
fill: 'red'
});
rect.clipPath = clipPath;
canvas.add(rect);
canvas.renderAll();
})()

this is an example script. I want to change the size of boundingbox without changing the size of circle. And I dont want to change the position as well.
How can I do it?
Thanks.

[ShaMan123]

If I understand correctly what you mean (you wrote something ambiguous) then you are looking for the new Group's #7670 layout property clip-path

[ShaMan123]

My answer is what you are looking for.
Yesterday the PR was merged so you should use the latest version by installing fabric directly from github and running npm run build

[aceylan]

Thank you ShaMan123. I have build the latest version and then have tried to do it.
But I couldnt make it right.
https://drive.google.com/file/d/16flcNGhvF5-7vYnzczWPzi65U3JKmpyu/view?usp=sharing
my files are in this link.
if you look at it, I will be happy. Thanks.
https://jsfiddle.net/aceylan/1dzj2053/3/

[ShaMan123]

https://jsfiddle.net/8cx2d7ha/4/

[ouyoungs]

https://jsfiddle.net/8cx2d7ha/4/

in V6.x , this dosn't work correctly.

[asturur]

The syntax changed during development. You have to pass a LayoutManager with the correct layoutStrategy.

There is a test that does it in the codebase:

    function clipPathLayout(canvas, callback) {
        var g = createGroupForLayoutTests('clip path layout', {
            backgroundColor: 'magenta',
            clipPath: new fabric.Circle({
                radius: 110,
                originX: 'center',
                originY: 'center',
            }),
            layoutManager: new fabric.LayoutManager(new fabric.ClipPathLayout())
        });
        canvas.add(g);
        canvas.renderAll();
        callback(canvas.lowerCanvasEl);
    }

you do not need the createGroupForLayoutTests function, just look at how the option object is constructed