CefSharp如何进行页面的缩放(Ctrl+滚轮)

CefSharp是基于Chromium开发的一种.NET WinForms或WPF控件，可用于将HTML、CSS和JavaScript呈现为.NET应用程序的UI。如果您想要在CefSharp中实现页面缩放功能，您可以遵循以下步骤：

方法一：使用JS注入实现缩放功能

该方法使用JS代码在页面上注入脚本，实现页面缩放的功能。它不需要在C#代码中进行更改。

1. 在CefSharp控件中载入HTML页面。
2. 使用JS脚本将页面上的window对象转储到应用程序中，其示例代码如下：

javascript
window.external =
{
ZoomIn: function () { document.body.style.zoom += 0.1; },
ZoomOut: function () { document.body.style.zoom -= 0.1; },
};

1. 在应用程序的C#部分中，您可以使用以下代码来实现缩放功能。其中browser是您的CefSharp控件。

csharp
browser.ExecuteScriptAsync("window.external.ZoomIn();");
或者

csharp
browser.ExecuteScriptAsync("window.external.ZoomOut();");

示例

以下是一个简单的示例，它在CefSharp控件中加载HTML页面，并使用JS注入实现缩放功能：

using CefSharp;
using CefSharp.WinForms;

namespace CefSharp.Zoom
{
    public partial class MainForm : Form
    {
        private ChromiumWebBrowser browser;

        public MainForm()
        {
            InitializeComponent();

            CefSettings settings = new CefSettings();
            Cef.Initialize(settings);
            browser = new ChromiumWebBrowser("https://www.baidu.com");
            this.Controls.Add(browser);

            // Inject a JavaScript object with two methods into the page
            browser.ExecuteScriptAsync("window.external = " +
                                       "{" +
                                       "ZoomIn: function () { document.body.style.zoom += 0.1; }," +
                                       "ZoomOut: function () { document.body.style.zoom -= 0.1; }," +
                                       "}");
        }

        private void ZoomInButton_Click(object sender, EventArgs e)
        {
            browser.ExecuteScriptAsync("window.external.ZoomIn();"); 
        }

        private void ZoomOutButton_Click(object sender, EventArgs e)
        {
            browser.ExecuteScriptAsync("window.external.ZoomOut();");
        }
    }
}

方法二：使用OnMouseWheel()事件实现缩放功能

该方法需要在C#代码中更改，使用OnMouseWheel()事件实现缩放功能。

1. 首先为CefSharp添加OnMouseWheel()事件处理逻辑。

csharp
browser.MouseWheel += (sender, e) =>
{
if (e.Control)
{
float zoomLevel = (float)browser.ZoomLevel;
zoomLevel += e.Delta / 1000.0f;
browser.ZoomLevel = (double)Math.Round(zoomLevel, 1);
}
};

上述代码中，通过判断事件参数e的Control属性，判断是否按下Ctrl键，若按下，则计算鼠标滚动的值得到缩放比例，并在CefSharp中设置ZoomLevel属性。

示例

以下是一个简单的示例，它在CefSharp控件中加载HTML页面，并使用OnMouseWheel()事件实现缩放功能：

using CefSharp;
using CefSharp.WinForms;

namespace CefSharp.Zoom
{
    public partial class MainForm : Form
    {
        private ChromiumWebBrowser browser;

        public MainForm()
        {
            InitializeComponent();

            CefSettings settings = new CefSettings();
            Cef.Initialize(settings);
            browser = new ChromiumWebBrowser("https://www.baidu.com");
            browser.Dock = DockStyle.Fill;
            this.Controls.Add(browser);

            // Add OnMouseWheel() event handler to CefSharp
            browser.MouseWheel += (sender, e) =>
            {
                if (e.Control)
                {
                    float zoomLevel = (float)browser.ZoomLevel;
                    zoomLevel += e.Delta / 1000.0f;
                    browser.ZoomLevel = (double)Math.Round(zoomLevel, 1);
                }
            };
        }
    }
}

上述代码中，当用户用鼠标滚动来缩放页面时，如果同时按住Ctrl键，则会将页面缩放比例增加或减少。