为什么在 CanvasRenderTarget 中绘制的重叠矩形在 win2d 中可见？

Question

我试过的是？我的 XAML 代码：

 <Canvas x:Name="can">

 </Canvas>

我的 C# 代码：

   private void Page_Loaded(object sender, RoutedEventArgs e)
    {
        CanvasVirtualControl canvasVirtual = new CanvasVirtualControl();
        canvasVirtual.Width = 1500;
        canvasVirtual.Height = 800;
        canvasVirtual.RegionsInvalidated += CanvasVirtual_RegionsInvalidated;
       //canvasVirtual.Invalidate();
        can.Children.Add(canvasVirtual);
    }

    private void CanvasVirtual_RegionsInvalidated(CanvasVirtualControl sender, CanvasRegionsInvalidatedEventArgs args)
    {
        CanvasRenderTarget Offscreen = new CanvasRenderTarget(CanvasDevice.GetSharedDevice(), (float)args.InvalidatedRegions[0].Width, (float)args.InvalidatedRegions[0].Height, 96);
        using (CanvasDrawingSession session = Offscreen.CreateDrawingSession())
        {
            CanvasRenderTarget mouseOverOffscreen = new CanvasRenderTarget(CanvasDevice.GetSharedDevice(), 300, 300, 96);
            CanvasDrawingSession session1;
            using (session1 = mouseOverOffscreen.CreateDrawingSession())
            {
                session1.DrawRectangle(new Rect(0, 0, 300, 300), new Color { A = 255, R = 0, G = 255, B = 0 }, 2);
            }
            session.DrawImage(mouseOverOffscreen, new Rect(100, 100, 300, 300));
            CanvasRenderTarget seleOverOffscreen = new CanvasRenderTarget(CanvasDevice.GetSharedDevice(), 300, 300, 96);
            CanvasDrawingSession session2;
            using (session2 = seleOverOffscreen.CreateDrawingSession())
            {
                session2.DrawRectangle(new Rect(0, 0, 300, 300), new Color { A = 255, R = 255, G = 0, B = 0 }, 2);
            }
            session.DrawImage(seleOverOffscreen, new Rect(200, 200, 300, 300));
        }
        

        using (CanvasDrawingSession session = sender.CreateDrawingSession(new Rect((float)args.InvalidatedRegions[0].X, (float)args.InvalidatedRegions[0].Y, (float)args.InvalidatedRegions[0].Width, (float)args.InvalidatedRegions[0].Height)))
        {
            session.DrawImage(Offscreen);
        }
    }

我正在尝试在 canvasVirtualControl 中绘制两个相交的矩形，使用 canvasRenderTarget.The 矩形图像由 canvasRenderTarget.This 创建，两个图像在屏幕外绘制，此屏幕外稍后用于在 CanvasVirtualControl 中绘制.

我的问题是，在绘制两个相交的矩形（即重叠）时，结果将是这样的。

我需要擦除重叠的矩形区域，我该怎么做？例如，如下图，

Answer 1

这里涉及到Win2D中路径的计算。 CanvasGeometryWin2D中提供了图形的组合计算，可以满足您的需求：

我们需要创建两个 CanvasGeometry 作为两个矩形：

var Rect1 = CanvasGeometry.CreateRectangle(sender, 100, 100, 300, 300);
var Rect2 = CanvasGeometry.CreateRectangle(sender, 0, 0, 300, 300);

通过CanvasGeometry.CombineWith方法，我们可以计算出合并面积：

var combineGeo = Rect2.CombineWith(Rect1, Matrix3x2.CreateTranslation(Vector2.Zero), CanvasGeometryCombine.Union);

下一步就是画画了：

private void CanvasVirtual_RegionsInvalidated(CanvasVirtualControl sender, CanvasRegionsInvalidatedEventArgs args)
{
    CanvasRenderTarget Offscreen = new CanvasRenderTarget(CanvasDevice.GetSharedDevice(), (float)args.InvalidatedRegions[0].Width, (float)args.InvalidatedRegions[0].Height, 96);
    using (CanvasDrawingSession session = Offscreen.CreateDrawingSession())
    {
        CanvasRenderTarget mouseOverOffscreen = new CanvasRenderTarget(CanvasDevice.GetSharedDevice(), 300, 300, 96);
        CanvasDrawingSession session1;
        var Rect1 = CanvasGeometry.CreateRectangle(sender, 100, 100, 300, 300);
        var Rect2 = CanvasGeometry.CreateRectangle(sender, 0, 0, 300, 300);
        var combineGeo = Rect2.CombineWith(Rect1, Matrix3x2.CreateTranslation(Vector2.Zero), CanvasGeometryCombine.Union);
        using (session1 = mouseOverOffscreen.CreateDrawingSession())
        {
            session1.DrawGeometry(combineGeo, new Color { A = 255, R = 0, G = 255, B = 0 }, 2);
        }
        session.DrawImage(mouseOverOffscreen, new Rect(100, 100, 300, 300));
        CanvasRenderTarget seleOverOffscreen = new CanvasRenderTarget(CanvasDevice.GetSharedDevice(), 300, 300, 96);
        CanvasDrawingSession session2;
        using (session2 = seleOverOffscreen.CreateDrawingSession())
        {
            session2.DrawGeometry(Rect2, new Color { A = 255, R = 255, G = 0, B = 0 }, 2);
        }
        session.DrawImage(seleOverOffscreen, new Rect(200, 200, 300, 300));
    }


    using (CanvasDrawingSession session = sender.CreateDrawingSession(new Rect((float)args.InvalidatedRegions[0].X, (float)args.InvalidatedRegions[0].Y, (float)args.InvalidatedRegions[0].Width, (float)args.InvalidatedRegions[0].Height)))
    {
        session.DrawImage(Offscreen);
    }
}

渲染结果将显示为消除内部相交边界的重叠矩形（效果与您在图层中的预期效果略有不同）。

为什么在 CanvasRenderTarget 中绘制的重叠矩形在 win2d 中可见？

why the overlap rectangle drawn in CanvasRenderTarget were visible in win2d?

uwp-xaml

win2d