[SKIA] How to incorporate LineWidth into SKPath.Contains(float x, float y)

[MichaelJachan]

Dear All!

I am using an SKPath with a thick LineWidth of about 50. In the PointerMoved-Event-Handler, I need to ask whether the SKPath is hit by the mouse pointer.

It works. But method SKPath.Contains(float x, float y) does not take the LineWidth into account. HIT only becomes true when I hover the middle of the thick line.

How can I incorporate the LineWidth such that my thick SKPath can be hit on the edges of the line, not only in the middle?

Thanks,

Michael:)
UnoApp1SKIA.zip

[jeromelaban]

@ramezgerges

[ramezgerges]

@MichaelJachan I'm not sure how you're using an SKPath directly within Uno. Can we get a sample to try out?

[MichaelJachan]

I have uploaded UnoApp1SKIA.zip in my question. Thank you:)

[ramezgerges]

@MichaelJachan An SKPath is very basically just a sequence of connected points that form, well... a path. Separately, an SKPaint is an object that describes the "drawing pen". In our case, the SKPaint describes how the SKPath is drawn. You specified that you'll draw the path itself without filling it (i.e. Stroke) and gave it a stroke thickness of 50. This is all fine, but it has nothing to do with the SKPath itself. In other words, the SKPath doesn't have know about the SKPaint at all, and they're both provided separately to the canvas drawing operation. Consequently, SKPath.Contains won't work as expected. Instead, you should provide it with a closed path.

8a9
>     private const float STROKE_WIDTH = 50;
43c44,47
<             _circlePath.AddCircle(_width / 2, _height / 2, Math.Min(_width, _height) / 2);
---
>             _circlePath.AddCircle(_width / 2, _height / 2, Math.Min(_width, _height) / 2 - STROKE_WIDTH / 2);
>             _circlePath.AddCircle(_width / 2, _height / 2, Math.Min(_width, _height) / 2 + STROKE_WIDTH / 2);
>             _circlePath.FillType = SKPathFillType.EvenOdd;
>             _circlePath.Close();
78,79c82,83
<             Style = SKPaintStyle.Stroke,
<             StrokeWidth = 50,
---
>             Style = SKPaintStyle.Fill,
>             // StrokeWidth = 50,

Let us know if you need more help.

[ramezgerges]

@MichaelJachan Even better, there is a SKPaint.GetFillPath that creates a new SKPath that factors in all the SKPaint details (like stroke thickness).

8a9,15
>     private SKPaint _circlePaint = new()
>     {
>         IsAntialias = true,
>         Style = SKPaintStyle.Stroke,
>         StrokeWidth = 50,
>         StrokeMiter = 1,
>     };
64c71
<         _circleHit = _circlePath!.Contains(x, y);
---
>         _circleHit = _circlePaint.GetFillPath(_circlePath).Contains(x, y);
75,83c82,83
<         SKPaint circlePaint = new()
<         {
<             IsAntialias = true,
<             Style = SKPaintStyle.Stroke,
<             StrokeWidth = 50,
<             StrokeMiter = 1,
<             Color = _circleHit ? SKColors.Green : SKColors.Red
<         };
<         canvas.DrawPath(_circlePath, circlePaint);
---
>         _circlePaint.Color = _circleHit ? SKColors.Green : SKColors.Red;
>         canvas.DrawPath(_circlePath, _circlePaint);

[MichaelJachan]

Good morning! This is what I was looking for. Thank you very much:)