how to draw two strokes in same time in uwp?

Question

I try to draw two line in PointerMoveEvent from Canvas but result is not as good as using InkCanvas.

Is it possible use InkCanvas to reach this?

 private void Canvas_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        // Get information about the pointer location.
        PointerPoint pt = e.GetCurrentPoint(inkCanvas);
        m_PreviousContactPoint = pt.Position;
        m_Point2 = new Point(0, 0);
        m_Point1 = pt.Position;
        // Accept input only from a pen or mouse with the left button pressed.
        PointerDeviceType pointerDevType = e.Pointer.PointerDeviceType;
        if (pointerDevType == PointerDeviceType.Pen ||
            pointerDevType == PointerDeviceType.Mouse && pt.Properties.IsLeftButtonPressed)
        {
            e.Handled = true;
            IsPressed = true;
        }
        else if (pointerDevType == PointerDeviceType.Touch)
        {
            // Process touch input
        }
    }

    private void Canvas_PointerMoved(object sender, PointerRoutedEventArgs e)
    {

        if (IsPressed)
        {
            PointerPoint pt = e.GetCurrentPoint(inkCanvas);

            var currentContactPt = pt.Position;
            var x1 = m_PreviousContactPoint.X;
            var y1 = m_PreviousContactPoint.Y;
            var x2 = currentContactPt.X;
            var y2 = currentContactPt.Y;

            var color = Windows.UI.Colors.Black;
            //var size = 4;

            if (CalculateDistance(x1, y1, x2, y2) > 2.0)
            {
                if (m_Point2.X == 0 && m_Point2.Y == 0)
                {
                    m_Point2 = currentContactPt;
                    return;
                }

                drawBezier(m_Point1, m_Point2, currentContactPt);
                drawBezier(new Point(m_Point1.X + 100, m_Point1.Y), new Point(m_Point2.X + 100, m_Point2.Y), new Point(currentContactPt.X + 100, currentContactPt.Y));

                m_PreviousContactPoint = currentContactPt;
                m_Point1 = currentContactPt;
                m_Point2 = new Point(0, 0);

        }
    }

    }

    private void drawBezier(Point point1, Point point2, Point point3)
    {
        var pathGeometry = new PathGeometry();
        BezierSegment bezier = new BezierSegment()
        {
            Point1 = point1,
            Point2 = point2,
            Point3 = point3
        };

        PathFigure figure = new PathFigure();
        figure.StartPoint = point1;
        figure.Segments.Add(bezier);
       [![enter image description here][1]][1]
        Windows.UI.Xaml.Shapes.Path path = new Windows.UI.Xaml.Shapes.Path();
        path.Stroke = new SolidColorBrush(Colors.Black);
        pathGeometry.Figures.Add(figure);
        path.Data = pathGeometry;
        path.StrokeEndLineCap = PenLineCap.Round;
        path.StrokeStartLineCap = PenLineCap.Round;
        path.StrokeThickness = 4;

        inkCanvas.Children.Add(path);
    }
    private double CalculateDistance(double x1, double y1, double x2, double y2)
    {
        double d = 0;
        d = Math.Sqrt(Math.Pow((x2 - x1), 2) + Math.Pow((y2 - y1), 2));
        return d;
    }

    private void Canvas_PointerReleased(object sender, PointerRoutedEventArgs e)
    {
        IsPressed = false;
    }

I am giving the idea, can you listen for the stroke collected event. and then manipulate all the strokes collected and added to the collection. will this concept works for your scenario/ — Kiran Paul, Jan 27 '17 at 12:41
@KiranPaul how manipulate all the strokes? i can get `InkPoint` of each `InkStroke` in `args.Strokes` and Change the Position but `InkStroke` does not containe constructor — Mohammad Tashani, Jan 27 '17 at 13:00

score 1 · Answer 1 · answered Jan 30 '17 at 17:43

Sorry for late reply. Here are some sample code which can help you!

XAML:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <InkCanvas x:Name="testCanvas"/>
</Grid>

Code Behind

public MainPage()
    {
        this.InitializeComponent();
        testCanvas.InkPresenter.InputDeviceTypes = Windows.UI.Core.CoreInputDeviceTypes.Mouse | 
            Windows.UI.Core.CoreInputDeviceTypes.Pen | Windows.UI.Core.CoreInputDeviceTypes.Touch;
        testCanvas.InkPresenter.StrokesCollected += InkPresenter_StrokesCollected;
    }
    private bool _strokeManipulating;
    private void InkPresenter_StrokesCollected(InkPresenter sender, InkStrokesCollectedEventArgs args)
    {
        var strokes = args.Strokes;
        if (!_strokeManipulating)
        {
            _strokeManipulating = true;
            foreach (var s in strokes)
            {
                var n = s.Clone();
                //pass the required x,y translation
                var t = System.Numerics.Matrix3x2.CreateTranslation(5, 0);
                n.PointTransform = t;
                testCanvas.InkPresenter.StrokeContainer.AddStroke(n);
            }
            _strokeManipulating = false;
        }
    }

output:

how to draw two strokes in same time in uwp?

1 Answers1