PremKumar Shanmugam
PremKumar Shanmugam

Reputation: 441

In Win2D,how to draw rectangle with stroke thickness?

I know ,how to draw rectangle with stroke thickness using CanvasDrawingSession.But the Problem is ,the stroke thickness grows inside and outside of the rectangle.I need that the stroke thickness must grows inside the rectangle only .I don't know how to achieve this!! What i have tried is?

My xaml code:

<Canvas x:Name="MyCanvas"> </Canvas>

My c# Code:

     private void Page_Loaded(object sender, RoutedEventArgs e)
    {
        CanvasVirtualControl canvasVirtualControl = new CanvasVirtualControl();
        canvasVirtualControl.Width = 1486;
        canvasVirtualControl.Height = 610;
        MyCanvas.Children.Add(canvasVirtualControl);
        Canvas.SetLeft(canvasVirtualControl, 0);
        Canvas.SetTop(canvasVirtualControl, 100);
        canvasVirtualControl.RegionsInvalidated += CanvasVirtualControl_RegionsInvalidated;
    }

    private void CanvasVirtualControl_RegionsInvalidated(CanvasVirtualControl sender, CanvasRegionsInvalidatedEventArgs args)
    {
        CanvasDrawingSession drawingSession;
        Rect rect = new Rect(args.InvalidatedRegions[0].Left, args.InvalidatedRegions[0].Top, args.InvalidatedRegions[0].Width, args.InvalidatedRegions[0].Height);

        using (drawingSession = sender.CreateDrawingSession(rect))
        {
            drawingSession.DrawRectangle(new Rect(0, 0, 200, 200), Windows.UI.Color.FromArgb(255, 255, 0, 0), 40);
        }
    }

enter image description here

Why my rectangle drawn like this?I think this is because of strokethickness grows inside and outside of the rectangle.How to solve draw rectangle with strokethickness grows inside the rectangle only?

Updated Question:

while Invalidating the Whole Region of CanvasVirtualControl, the strokethickness grows inside and outside the rectangle.If I, Invalidate the particular rectangular region of CanvasVirtualControl,the strokeThickness grows Inside only.

My Xaml code:

<Canvas x:Name="MyCanvas">
    <Button Content="InvalidateWholeRegion" Height="100" Canvas.Left="0" Canvas.Top="0" Click="InvalidateWholeRegion"/>
    <Button Content="InvalidateParticularRegion" Height="100" Canvas.Left="300" Canvas.Top="0" Click="InvalidateParticularRegion"/>
</Canvas>

My c# Code:

    CanvasVirtualControl canvasVirtualControl;
    private void Page_Loaded(object sender, RoutedEventArgs e)
    {
        canvasVirtualControl = new CanvasVirtualControl();
        canvasVirtualControl.Width = 1486;
        canvasVirtualControl.Height = 610;
        MyCanvas.Children.Add(canvasVirtualControl);
        Canvas.SetLeft(canvasVirtualControl, 0);
        Canvas.SetTop(canvasVirtualControl, 100);
        canvasVirtualControl.RegionsInvalidated += CanvasVirtualControl_RegionsInvalidated;
    }

    private void CanvasVirtualControl_RegionsInvalidated(CanvasVirtualControl sender, CanvasRegionsInvalidatedEventArgs args)
    {
        CanvasDrawingSession drawingSession;
        Rect rect = new Rect(args.InvalidatedRegions[0].Left, args.InvalidatedRegions[0].Top, args.InvalidatedRegions[0].Width, args.InvalidatedRegions[0].Height);
        using (drawingSession = sender.CreateDrawingSession(rect))
        {
            drawingSession.DrawRectangle(new Rect(rect.X, rect.Y, 100, 100), Windows.UI.Color.FromArgb(255, 255, 0, 0), 40);
        }
    }

    private void InvalidateParticularRegion(object sender, RoutedEventArgs e)
    {
        canvasVirtualControl.Invalidate(new Rect(200, 200, 100, 100));
    }
    private void InvalidateWholeRegion(object sender, RoutedEventArgs e)
    {
        canvasVirtualControl.Invalidate(new Rect(0, 0, 1486, 610));
    }

How to draw strokeThickess grows outside also when invalidatingParticular region?

Upvotes: 3

Views: 712

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32775

But the Problem is ,the stroke thickness grows inside and outside of the rectangle.I need that the stroke thickness must grows inside the rectangle only.

The draw path of DrawRectangle method is center of the stroke and it's by design. When you set Rect as 0, 0, 200, 200, the bundle will clip half of top left side. So it will draw a rectangle like above.

If we want to draw complete rectangle, we need make sure the start point is reasonable value. So we need modify the Rect as 20, 20, 200, 200.

private void CanvasVirtualControl_RegionsInvalidated(CanvasVirtualControl sender, CanvasRegionsInvalidatedEventArgs args)
{
    CanvasDrawingSession drawingSession;
    Rect rect = new Rect(args.InvalidatedRegions[0].Left, args.InvalidatedRegions[0].Top, args.InvalidatedRegions[0].Width, args.InvalidatedRegions[0].Height);

    using (drawingSession = sender.CreateDrawingSession(rect))
    {
        var dashedStroke = new CanvasStrokeStyle()
        {
            LineJoin = CanvasLineJoin.Round
        };
        drawingSession.DrawRectangle(new Rect(20, 20, 200, 200), Windows.UI.Color.FromArgb(255, 255, 0, 0),40,dashedStroke);
    }
}

Upvotes: 2

Related Questions