Blazor 中的 SkiaSharp 用于桌面应用程序，无需 WASM（Blazor 混合？）

Question

我想在 Blazor 桌面应用程序（Windows、Mac、Linux 等）中使用 SkiaSharp

我了解 Blazor Hybrid（Blazor Desktop），但我没有找到任何集成 SkiaSharp 的方法。

所以基本上我想要的是一种在 Blazor 桌面应用程序中使用 SkiaSharp 但没有 WASM 的方法。有这样的事吗？

Answer 1

第 1 部分，简短回答：Blazor Hybrid 无法编译为 WASM。
参考：.Net 8.0 / Blazor Hybrid / 完全访问原生功能：

Blazor 混合应用程序可以通过 .NET 本机应用程序框架完全访问本机客户端 API 功能。在 Blazor 混合应用程序中，Razor 组件直接在本机应用程序中运行，而不是在 WebAssembly 上运行。

第 1 部分，较长答案：

BlazorWebView：

.Net Maui

BlazorWebView

是一个控件，使您能够在 .NET MAUI 应用程序中托管 Blazor Web 应用程序。 ...
Razor 组件在 .NET 进程中本机运行，并将 Web UI 渲染到嵌入式 Web 视图控件。

将此与使用 Blazor 和 ASP.NET 进行客户端/服务器 Web 设置进行比较。
“Razor 组件本机运行”就像 ASP.NET Core 中的“服务器渲染”。 Razor 的 C# 代码的运行方式与应用程序中的任何其他 C# 代码一样：JIT 编译（或 AOT 预编译）为设备的汇编语言。

“嵌入式网页视图控件”充当“浏览器客户端”。 Razor 向其发送表示页面当前状态的 HTML。

• 用户操作（例如按钮）会被发送回应用程序中的 Razor 代码。
• 可选地，JS Interop可用于在“Web视图控件”内运行JavaScript。

“Web 视图控件”是“本机控件”。
例如。在移动设备上，它由设备的操作系统（Android 或 iOS）提供。

MAUI Blazor 能够在一个屏幕上叠加“本机控件”（例如 Web 视图）和“MAUI 控件”。

“MAUI 控件”这里指的是 MAUI / 用户界面 / 控件；跨平台 UI，是

Xamarin Forms

的演变。

---

第 2 部分：

在

Maui Blazor

中，SkiaSharp 不会在

Blazor

的

Maui

部分运行。也就是说，它不在设备的“Web 视图控件”内运行。

这样做需要在该控件中运行 WASM。这不是

Blazor Hybrid

的工作原理。

后果：

• SkiaSharp 设置在毛伊岛与 Web Blazor 中不同。详细信息见本答案后面。
• 如果您需要 Razor 组件（或任何 JavaScript）与 SkiaSharp 中显示的内容之间进行通信，则必须通过一些粘合代码来完成，类似于 Razor C# 和非 Razor MAUI C# 之间的任何其他通信。抱歉，我还没有这个链接。

---

已过时

简短回答：否；不可能。 （除非我对下面的一些细节从根本上是错误的。）

长答案：

• 在 Blazor Hybrid 中，视图本质上是一个浏览器窗口。
• 对于您所寻求的可能，它必须与网络标准完全兼容。
• 因此，即使这是在桌面应用程序中，归根结底还是询问如何在浏览器中执行 SkiaSharp。
• 因此，它必须在 WASM 中运行。

---

毛伊岛的SkiaSharp

您的应用程序在毛伊岛的 NOT BLAZOR 部分运行 SkiaSharp。
它不会位于 Blazor 组件内。

如果您布置了 Maui 屏幕（窗口），使 Blazor WebView 仅显示部分内容，则 SkiaSharp 可能位于屏幕上的某个位置；只是没有集成到 Blazor 中。

甚至可以在 Blazor 视图之上覆盖其他 Maui 控件。但 Maui 控件和 Blazor 内容不会知道彼此在屏幕上的位置。

---

在毛伊岛使用 SkiaSharp

.NET MAUI - SkiaSharp 代码示例

• 在你的

  class MauiProgram

  ，方法

  CreateMauiApp()

  ，
• • 添加参考：

using SkiaSharp.Views.Maui.Controls.Hosting;

• • 添加一行：

builder
.UseMauiApp<App>()
.UseSkiaSharp()    // <-- add this line
...

• 包括 Nuget SkiaSharp.Views.Maui.Core。
• 命名空间：SkiaSharp.Views.Forms
• 类：SKCanvasView。

在 XAML 中：

<ContentPage ...
    xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
    x:Class=...>
...
    <skia:SKCanvasView ... PaintSurface="OnYourPaintThisSurface" ... />

在 C# 代码隐藏中：

using SkiaSharp;
using SkiaSharp.Views.Forms;
...

    private void OnYourPaintThisSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        ... // your paint code here
    }