Clip path parsing

[asturur]

Work in progress PR for the clipPath parsing functionality from SVG and clipTo alternative

[TiagoSilvaPereira]

Awesome, can I help with it? I really need this feature

[asturur]

i am actually stuck on positioning the paths from SVG. As soon as i can do that, i can start planning an api, i ll post it here

[TiagoSilvaPereira]

Thanks @asturur ... I found your solution in this article https://stackoverflow.com/questions/44963677/how-to-deal-with-fabric-js-image-mask and it worked very well, but I don't know how to make the same effect for texts, svg, basic shapes, etc. Because of it, I'll use the deprecated clipTo at this moment. I can't know very much about 2D canvas, but if I can help with something I'm here

[asturur]

OK a very draft of the api is working. A very draft.
Is just importing from SVG but no methods are defined to manually set up clipPath object

[shokimble]

@asturur are you planning on supporting text with clipPath? I'm still unable to solve clipping images to text. Would this be possible with clipPath https://stackoverflow.com/questions/49897203/fill-text-with-image-in-fabricjs

Is it possible now? Not having much luck on stack exchange.

[asturur]

Well a text filled with a pattern can already do that, can't it?

[shokimble]

Patterns do a poor job of it.

Patterns don't scale with the object they fill and despite mucking around for ages I couldn't make them.

I tried a dynamic pattern and almost got there but they are extremely difficult to serialise. I had to add a custom dehydrator and rehydrator.

I could probably get there by hacking around for another day or so but it would be a very fragile solution so hoping for something simpler and more natural.

[asturur]

Well cutting an image with a text clipPath would work, but would leave the image as big as it is, unless the api do something more ( like swapping object dimension with the clipPath dimensions.

Also patterns are on the verge of a change, a breaking change.

Making pattern scale or not scale is easy, i implemented it sometimes ago but then i stopped, is just about adding another scale factor to the rendering process of the pattern.

We need something to make patterns works as a group, so be a collection of objects that can be serialized as any other object. Same for masks

[asturur]

you could try this branch, picking up an image, a text object, and setting the textObject as image.clipPath and start experimenting.
I m a bit short on time lately and i worked less on fabricjs, i m still behind

[shokimble]

Making pattern scale or not scale is easy, i implemented it sometimes ago but then i stopped, is just about adding another scale factor to the rendering process of the pattern.

Got an example?

I'll try this branch as well, sounds like you need some general feedback on it anyway.

I'll report back soon.

[asturur]

i think i ll start a topic somewhere to discuss an API to use, so what we can do and what we would like to do, and what we can't expect to do

[asturur]

For who is interested in clipPath can read this discussion and contribute.

Make your thoughts and comment, avoiding requesting for help, that is just for api.

https://github.com/fabricjs/api-discussion/issues/1

[shokimble]

Hey @asturur sorry to hassle you but you said making a pattern scale or not scale is easy. Have you got an example you can share because I've been struggling with it for a long time.

[shokimble]

I tried it by clipping an image with text. Definitely not ready yet. The text ends up sitting in the bottom right of the image and no attempts to scale or reposition it work.

Eg:

`

canvas = new fabric.Canvas('c');

var text = new fabric.Text('MIAMI', {
left: 0,
top: 0,
statefullCache: true,
//fill: 'rgb(255,0,0)'
originX: 'left', //added
originY: 'top',
centredScaling: false,
});

var shape = new fabric.Rect({
width: 200,
height: 100,
left: 10,
top: 300,
});

fabric.Image.fromURL('pug.jpg', function(img) {

  console.log(img);
  console.log(text.getScaledWidth() );
  console.log(img.getScaledWidth());

  var scale = text.getScaledWidth() / img.getScaledWidth();
  var textScale = img.getScaledWidth() / text.getScaledWidth();
  img.set({scaleX: scale,  scaleY: scale}); 
  text.set({scaleX: textScale,  scaleY: textScale})
  img.clipPath = text;

  canvas.add(img);

});

`

[asturur]

Updated with some other code, fixed tests.

[asturur]

@shokimble i added some text examples here:
http://fabricjs.com/clippath-part2

simpler examples here
http://fabricjs.com/clippath-part1

Did not try images 100% yet

[asturur]

Need to add a rough SVG export, a Canvas counterpart, some possible visual test and i can merge.

[shokimble]

@asturur managed to get it working thanks. What I was missing before is that the shape clipped to is set at the centre of the image being clipped. Your example made that clear.

I have to say (at least) for my use case it's a very odd experience. If I have a big image and some small text (or a shape) being clipped to the controls are still placed on the image not the clipped to text (or shape). The controls really should be on the object or group doing the clipping.

You can see this on the first example on part 2 of your examples as well. There's a large blank area before the controls as the thing being clipped is so large.

[asturur]

i know, no one likes the center placement but that is a breaking change for many things, we cannot do half things in a way and half in another.

I also agree that we can do a better job with bounding box, but that may involve improving patterns rather then changing how clip works.

The focus is on shipping the feature right now