Apply advanced string clip path to an image

[nunogomes360]

I'm trying to apply an advanced clip-path to an image. Similar to what's possible to do with a SVG:

<defs>
<clipPath id="clipPath">
<path d="M10,10 q60,60 100,0 q50,50 50,50 l40,0 l-40,40 l-100,-20"/>
</clipPath>
</defs>
<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; clip-path: url(#clipPath);"/>

The simple way would be to use the string "M10,10 q60,60 100,0 q50,50 50,50 l40,0 l-40,40 l-100,-20".

Another example: https://www.sarasoueidan.com/demos/css-svg-clipping/html-img-clipped-with-css-svg-clippath/

[antonfirsov]

You need the ImageSharp.Drawing package for this.
I'm not particularly familiar with the Drawing API-s, but I think what you need, is something like this:

• Create an IPath using PathBuilder
• Create an ImageBrush referencing the image you want to clip
• Use an extension method like this one with your ImageBrush

Here is a (somewhat) related example:
https://github.com/SixLabors/Samples/blob/master/ImageSharp/AvatarWithRoundedCorner/Program.cs

[nunogomes360]

Ok, but PathBuilder doesn't accept and arbitrary string like the SVG. I would need a parser to convert that string into ILineSegment's correct?

That's because the clip-path is dynamic and the output should be according to that.

[antonfirsov]

No, we don't provide any string based syntax and parsing, neither we do parse SVG. You may want to take a look at the following libraries to avoid re-implementing the parser:
https://github.com/vvvv/SVG
https://github.com/UkooLabs/SVGSharpie

[tocsoft]

This sounds similar to #67