How can I draw a Circle with InkStroke?

Question

I have an InkCanvas. I need to a Circle draw as InkStroke.

I know, i can a Circle or Ellipse draw with InkAnalyzer, but i need that Circle as InkStroke in InkCanvas, not in Canvas and i don't want to the protractor use.

I need somehow a right one Circle draw.

For a straight Line developed i this code;

private void StrokeInput_StrokeEnded(InkStrokeInput sender, PointerEventArgs args)
{
    List<InkPoint> points = new List<InkPoint>();
    InkStrokeBuilder builder = new InkStrokeBuilder();


    InkPoint pointOne = new InkPoint(new Point(line.X1, line.Y1), 0.5f);
    points.Add(pointOne);
    InkPoint pointTwo = new InkPoint(new Point(line.X2, line.Y2), 0.5f);
    points.Add(pointTwo);

    InkStroke stroke = builder.CreateStrokeFromInkPoints(points, System.Numerics.Matrix3x2.Identity);
    InkDrawingAttributes ida = inkCanvas.InkPresenter.CopyDefaultDrawingAttributes();
    stroke.DrawingAttributes = ida;
    inkCanvas.InkPresenter.StrokeContainer.AddStroke(stroke);

}

private void StrokeInput_StrokeContinued(InkStrokeInput sender, PointerEventArgs args)
{
    line.X2 = args.CurrentPoint.RawPosition.X;
    line.Y2 = args.CurrentPoint.RawPosition.Y;
}

private void StrokeInput_StrokeStarted(InkStrokeInput sender, PointerEventArgs args)
{
    line = new Line();
    line.X1 = args.CurrentPoint.RawPosition.X;
    line.Y1 = args.CurrentPoint.RawPosition.Y;
    line.X2 = args.CurrentPoint.RawPosition.X;
    line.Y2 = args.CurrentPoint.RawPosition.Y;

    line.Stroke = new SolidColorBrush(Colors.Purple);
    line.StrokeThickness = 4;
}

How can i this Code to adjust for a Circle? Or how can i draw a Circle?

Thank you,

score 0 · Accepted Answer · answered Nov 27 '17 at 08:58

If I understood your question correctly, you just want to use InkStroke to draw a ellipse and add these strokes of ellipse into InkCanvas. Then, you could get use these strokes for other purposes (e.g, save these strokes and use it for the next usage). If so, I could only tell you it's impossible. Because when you draw a similar ellipse on InkCanvas, you could use InkAnalyzer to convert it to ellipse, but it actually only returns four points to you. Jayden also has mentioned it on this thread: Add polygon/ellipse to inkcanvas in uwp

But as I said, if the reason of using inkstroke to draw ellipse is to save strokes for other purposes, I can give you another way. You could use win2D-UWP relevant APIs to draw ellipse on CanvasControl and save it as CanvasSvgDocument. Then, you could save it as a svg xml file. For the net usage, you could load this svg xml file by CanvasSvgDocument.LoadAsync into CanvasControl.

If you're interested in CanvasSvgDocument, you could refer to SvgExample for more details.

score 0 · Answer 2 · answered Nov 27 '17 at 09:55

float stepsize = 0.05f;
float radius = 10f;

for (float i = 0; i <= 2*Math.PI; i+= stepsize )

  var x = position.x + radius * Math.cos(i);
  var y = position.y + radius * Math.sin(i);
  // draw dot here at x,y
}

If you want lines instead of dots, draw a line from the previous xy to the current xy. (cache xy in xy_old)

How can I draw a Circle with InkStroke?

2 Answers2