clip path - FabricJs nested clipPath issue - Stack Overflow

admin管理员组

文章数量:1289529

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 /

 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);

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/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);

• fabricjs
• clip-path

Share Improve this question Follow asked Feb 21 at 10:07 katekate 1344 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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)

本文标签： clip pathFabricJs nested clipPath issueStack Overflow