How to draw a dotted line?

[0xced]

I'm trying to port some code currently using System.Drawing.Common to ImageSharp.Drawing since it was announced that System.Drawing.Common will become Windows-only in .NET 7.

I want to draw a dotted (not dashed) line. The code based on System.Drawing.Common sets round caps on the pen but I could not find an equivalent property on ImageSharp's Pen.

My current attempt (without round caps, using a pattern of new[] { 0.1f, 2f }):

What it should eventually look like:

Is there an easy way to draw a dotted line with ImageSharp.Drawing?

[antonfirsov]

Personally, I'm not super familiar with the API, but if I'm getting it right, our current Pen structure doesn't support custom caps, however this method may actually support it. It generates a shape from an line path, so you can draw it with one of the .Fill() overloads. This example might be also interesting. Can you give it a try?

If it works out, I think it would make sense to expose JointStyle and EndCapStype on the IPen API.

/cc @tocsoft

[JimBobSquarePants]

That samples project needs a massive rewrite to bring it up to the current API layout. We should also avoid adding extensions to unrelated types. e.g. SaveImage(this IPathCollection collection .... as they do not demonstrate well the natural use of the API and give us a false impression of usability.

[0xced]

The GenerateOutline method was exactly what I was looking for. After tweaking the width and pattern parameters I was able to draw a nice dotted line, thanks a lot!

[antonfirsov]

@0xced if you feel like contributing back: #158 ;)

[JimBobSquarePants]

@0xced I've just pushed a PR to the repository to update the sample code. #157

The Path extensions method GenerateOutline gives you an API that allows choosing the EndCapStyle

ImageSharp.Drawing/samples/DrawShapesWithImageSharp/Program.cs

Lines 196 to 204 in 3ce36e0

	private static void OutputStarOutlineDashed(int points, float inner = 10, float outer = 20, float width = 5, JointStyle jointStyle = JointStyle.Miter, EndCapStyle cap = EndCapStyle.Butt)
	{
	// center the shape outerRadii + 10 px away from edges
	float offset = outer + 10;
	var star = new Star(offset, offset, points, inner, outer);
	IPath outline = star.GenerateOutline(width, new float[] { 3, 3 }, false, jointStyle, cap);
	outline.SaveImage("Stars", $"StarOutlineDashed_{points}_{jointStyle}_{cap}.png");
	}

Here's example output with EndCapStyle.Round.