CODEWITHSUNDEEP
fabricjsclip-path
kate
kate

Reputation: 13

FabricJs nested clipPath issue

I have 4 rectangles and i clipped them with a group, I also have one frame (kind of rect) in which all 4 rectangles are present now this frame clipToFrame is true that means all objects inside that frame should have frame as clipPath, but i am facing one issue when the object already has a clipPath i.e in my case a clipPath of group

Attached below is js Fiddle to reproduce the issue and have added comments also in fiddle to reproduce the issue https://jsfiddle.net/partheev8/6d9bg8es/15/

 var canvas = new fabric.Canvas('c');
 
 var clipPath = new fabric.Circle({ radius: 70, top: -70, left: -70 });

 var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ],{
    left: 170
    });
  group.clipPath = clipPath;
  

   var frame = new fabric.Rect({ width: 300,height:300,fill:'#FF6000',absolutePositioned: true });
   // Uncomment below line to to see the issue.
   // After setting clipPath.clipPath as frame, it's not actually clipping.
  /* clipPath.clipPath = frame; */
  canvas.add(frame)
  canvas.add(group);

Upvotes: 1

Views: 17

Answers (1)

DocAmz
DocAmz

Reputation: 106

If i understand well you want nested groups with clipPath ?

┌─ Parent Group
│ 
├── ClipPath A : Frame
│ 
├──┌─ Child group
│  │
│  │
│  ├─ ClipPath B : Circle
│  │
│  ├─ Child objects [objects]
│  └─
└─

Example below

JS Fiddle (edited)

Upvotes: 0

Related Questions