WebView2设置Source后如何在内容上方绘制矩形？

问题描述：

未设置WebView2的Source属性时，能成功绘制矩形；但设置Source后，矩形无法显示，因为网页内容会覆盖在WebView2的表面之上。需要在WebView2控件的内容上方显示矩形。

提供的测试代码：

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        webView21.Source = new Uri("https://www.google.com");
    }

    public void HighlightElementInRectangle(int x, int y, int width, int height)
    {
        SolidBrush myBrush = new SolidBrush(Color.Red);
        Graphics formGraphics;
        formGraphics = webView21.CreateGraphics();
        Pen pen = new Pen(Color.Red, 2);
        formGraphics.DrawRectangle(pen, x, y, width, height);
    }

    private void webView21_Click(object sender, EventArgs e)
    {
        HighlightElementInRectangle(18, 111, 319, 20);
    }
}

问题根源 #

WebView2的网页内容由Chromium引擎以硬件加速方式独立渲染，其层级优先级高于WinForms控件的GDI绘制层，直接通过CreateGraphics在WebView2控件上绘制的图形会被网页内容覆盖。

方案一：通过透明叠加控件绘制矩形 #

在WebView2上方添加一个透明的Panel控件，将矩形绘制在这个Panel上，利用控件层级关系让矩形显示在网页内容之上。

实现步骤 #

1. 在WinForms设计器中，给webView21添加同级的Panel控件（命名为overlayPanel），设置其BackColor为Color.Transparent，Size和Location与webView21完全一致，并将其置于顶层。
2. 修改绘制逻辑，将绘制目标切换为叠加Panel：

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        webView21.Source = new Uri("https://www.google.com");
        // 同步叠加Panel的初始位置与大小
        overlayPanel.Location = webView21.Location;
        overlayPanel.Size = webView21.Size;
        overlayPanel.BackColor = Color.Transparent;
    }

    public void HighlightElementInRectangle(int x, int y, int width, int height)
    {
        // 清空之前的绘制内容
        overlayPanel.Invalidate();
        // 使用using自动释放资源
        using (Graphics g = overlayPanel.CreateGraphics())
        using (Pen pen = new Pen(Color.Red, 2))
        {
            g.DrawRectangle(pen, x, y, width, height);
        }
    }

    private void webView21_Click(object sender, EventArgs e)
    {
        HighlightElementInRectangle(18, 111, 319, 20);
    }

    // 同步WebView2的大小变化
    private void webView21_SizeChanged(object sender, EventArgs e)
    {
        overlayPanel.Size = webView21.Size;
    }
}

方案二：通过JavaScript在网页中绘制矩形 #

直接在网页DOM中创建高亮元素，通过WebView2的ExecuteScriptAsync注入JS代码，让矩形成为网页内容的一部分，自然显示在正确层级。

实现代码 #

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        // 等待WebView2初始化完成后再加载网页
        webView21.CoreWebView2InitializationCompleted += WebView21_CoreWebView2InitializationCompleted;
    }

    private void WebView21_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
    {
        if (e.IsSuccess)
        {
            webView21.Source = new Uri("https://www.google.com");
        }
    }

    public async void HighlightElementInRectangle(int x, int y, int width, int height)
    {
        // 移除已存在的高亮元素
        await webView21.ExecuteScriptAsync("document.getElementById('highlight-rect')?.remove();");
        
        // 创建新的高亮矩形
        string script = $@"
            const rect = document.createElement('div');
            rect.id = 'highlight-rect';
            rect.style.position = 'absolute';
            rect.style.left = '{x}px';
            rect.style.top = '{y}px';
            rect.style.width = '{width}px';
            rect.style.height = '{height}px';
            rect.style.border = '2px solid red';
            rect.style.pointerEvents = 'none'; // 不干扰网页交互
            rect.style.zIndex = '9999'; // 确保层级最高
            document.body.appendChild(rect);
        ";
        await webView21.ExecuteScriptAsync(script);
    }

    private void webView21_Click(object sender, EventArgs e)
    {
        HighlightElementInRectangle(18, 111, 319, 20);
    }
}

这种方案无需额外WinForms控件，矩形位置基于网页坐标系，更贴合网页布局。

内容的提问来源于stack exchange，提问作者Mega