Unity WebView 插件⭐️（七）核心模块 网络视图预制件—CanvasWebViewPrefab

📢前言

该文章是WebView 插件系列文章，传送门：浏览器插件3D WebView专栏

上一篇文章对3D WebView 插件的 WebViewPrefab 做了一个详细的介绍说明

那本篇文章就来介绍下 CanvasWebViewPrefab的说明和使用方法

🌍核心模块 网络视图预制件—CanvasWebViewPrefab

CanvasWebViewPrefab 是一个预制件，可以轻松查看2D Canvas 中的IWebView并与之交互。
它负责创建 IWebView、显示其纹理以及处理来自用户的指针交互，如单击、拖动和滚动。

因此，需要做的就是指定要加载的 URL 或 HTML，然后用户可以查看它并与之交互。

创建 CanvasWebViewPrefab 有两种方法：

1. 通过编辑器将 CanvasWebViewPrefab.prefab 文件拖到场景中并设置其“初始 URL”属性。
2. 或者通过使用CanvasWebViewPrefab.Instantiate()以编程方式创建实例，等待它初始化，然后调用其WebView属性上的方法，如LoadUrl()。

如果您的用例需要高度自定义，您可以使用Web.CreateWebView()在预制件之外创建一个 IWebView 。

提示： CanvasWebViewPrefab和 WebViewPrefab的用法非常相似 ，API方法几乎相同

只不过CanvasWebViewPrefab使用的Unity中的Canvas进行渲染的
所以当使用CanvasWebViewPrefab时，其实是在Unity中的Canvas上进行各种操作

个人觉得使用CanvasWebViewPrefab更适合2D开发
当然3D开发也是可以的，因为空间画布也可以使用，但是使用2D开发时，Canvas的效果会更好一点！

🌏核心API调用方法

CanvasWebViewPrefab公共属性

1.单击启用
bool ClickingEnabled
确定是否启用单击。

2.拖动模式
DragMode DragMode
确定预制件如何处理拖动交互。

3.拖动阈值
float DragThreshold
确定触发拖动的阈值（以网络像素为单位）。默认值为 20。

• 当预制件的DragMode设置为DragToScroll 时，此属性确定指针在不再被视为单击之前必须拖动的距离。
• 当预制件的DragMode设置为DragWithinPage 时，此属性确定指针在页面内触发拖动之前必须拖动的距离。

4.悬停已启用
bool HoveringEnabled
确定是否启用悬停交互。

5.初始分辨率
float InitialResolution
以每个 Unity 单位的像素为单位设置 webview 的初始分辨率。您可以更改分辨率以使 Web 内容看起来更大或更小。CanvasWebViewPrefab 的默认分辨率是1

6.初始网址
string InitialUrl
如果您通过编辑器将一个 CanvasWebViewPrefab.prefab 拖入场景，您可以在编辑器中设置此属性，使其在实例初始化后自动加载给定的 URL。要在运行时加载新 URL，请改用IWebView.LoadUrl()。

7.日志控制台消息
bool LogConsoleMessages
确定是否将来自IWebView.ConsoleMessageLogged 的JavaScript 控制台消息打印到 Unity 日志中。

8.材料
Material Material { get; set; }
获取或设置预制件的材质。

9.启用 Native2DMode
bool Native2DModeEnabled
启用或禁用Native 2D Mode，这使得 3D WebView 将原生 2D webview 定位在 Unity 游戏视图的前面，而不是将 Web 内容显示为 Unity 场景中的纹理。如果使用的 3D WebView 包不支持原生 2D 模式，则使用默认渲染模式。

10.NativeOnScreenKeyboardEnabled
bool NativeOnScreenKeyboardEnabled
确定当 webview 中的文本输入被聚焦时是否自动显示操作系统的本机屏幕键盘。CanvasWebViewPrefab 的默认值是true.

11.启用远程调试
bool RemoteDebuggingEnabled
确定是否启用远程调试。

12.滚动已启用
bool ScrollingEnabled
确定是否启用滚动。

13.滚动灵敏度
float ScrollingSensitivity
允许调整滚动灵敏度。CanvasWebViewPrefab 的默认灵敏度是15.

14.可见的
bool Visible { get; set; }
获取或设置实例是否可见。默认值为true.

15.网页视图
IWebView WebView { get; }
获取预制件的 IWebView，在引发Initialized事件后可用。在初始化完成之前，这个属性是null。

CanvasWebViewPrefab公共方法

1.破坏
void Destroy()
销毁实例及其子实例。请注意，如果您使用Object.Destroy()销毁实例的父级，则不需要调用此方法。

2.实例化
static CanvasWebViewPrefab Instantiate(WebViewOptions options)
与Instantiate()一样，除了它也接受一个选项标志的对象，可用于改变生成的 webview 的行为。

3.实例化
static CanvasWebViewPrefab Instantiate()
创建一个新实例。所述web视图属性初始化完成，它是由所指示的后可用初始化事件或WaitUntilInitialized（） 。

例子
var canvas = GameObject.Find("Canvas");
canvasWebViewPrefab = CanvasWebViewPrefab.Instantiate();
canvasWebViewPrefab.transform.parent = canvas.transform;
var rectTransform = canvasWebViewPrefab.transform as RectTransform;
rectTransform.anchoredPosition3D = Vector3.zero;
rectTransform.offsetMin = Vector2.zero;
rectTransform.offsetMax = Vector2.zero;
canvasWebViewPrefab.transform.localScale = Vector3.one;
canvasWebViewPrefab.Initialized += (sender, e) => {
  canvasWebViewPrefab.WebView.LoadUrl("https://vuplex.com");
};

4.实例化
static WebViewPrefab Instantiate(IWebView webView)
与Instantiate()类似，不同之处在于它使用现有的、已初始化的 IWebView 实例来初始化实例。这会导致 CanvasWebViewPrefab 使用现有的 IWebView 实例而不是创建一个新实例。

5.设置指针输入检测器
void SetPointerInputDetector(IPointerInputDetector pointerInputDetector)
默认情况下，预制件通过 Unity 的事件系统检测诸如单击之类的指针输入事件，但您可以使用此方法来覆盖检测输入事件的方式。

6.SetWebViewForInitialization
void SetWebViewForInitialization(IWebView webView)
默认情况下，预制件在初始化期间创建一个新的 IWebView。但是，您可以在预制件初始化之前调用此方法，以将现有的、已初始化的 IWebView 传递给它以供使用。此方法只能在预制件初始化之前调用（即直接在实例化它或将其设置为活动之后）。

7.等待直到初始化
Task WaitUntilInitialized()
返回一个任务，该任务在预制件初始化时（即当其WebView属性准备好使用时）解决。

CanvasWebViewPrefab公共活动

1.点击
EventHandler<ClickedEventArgs> Clicked
表示点击了预制件。请注意，预制件会自动为您调用IWebView.Click()。

2.已初始化
EventHandler Initialized
表示预制件已完成初始化，因此其WebView属性已准备好使用。

3.滚动
EventHandler<ScrolledEventArgs> Scrolled
表示预制件已滚动。请注意，预制件会自动为您调用IWebView.Scroll()。

###示例
1.当 webview 中的文本输入被聚焦时是否自动显示操作系统的本机屏幕键盘
这个方法只有在使用 Android 的 3D WebView会生效，用于控制 在手机上是否会显示本机的屏幕键盘，默认为true

//手机上不显示本机屏幕键盘
 _canvasWebViewPrefab.NativeOnScreenKeyboardEnabled = false;

2.将现有的、已初始化的 IWebView 传递给一个新的WebView以供使用
这个方法需要在WebView初始化之前调用，这样的话，新的WebView就会拥有老的IWebView 所拥有的的属性并使用

//webView为IWebView属性
_canvasWebViewPrefab.SetWebViewForInitialization(webView);

3.网页视图已初始化
可以在已初始化方法中进行连接网页，添加委托方法等

比如我添加了一个时刻监听网页视图网址变化的委托，这样我就可以随时拿到当前网页视图的网址和标题了！

      _canvasWebViewPrefab.Initialized += (initializedSender, initializedEventArgs) => {
            //初始化后可以在这个活动里面 添加一些事件 或者 执行某些方法
            //加载网页
            _canvasWebViewPrefab.WebView.LoadUrl("https://www.baidu.com");
            //添加一个网址发生变化的委托
            _canvasWebViewPrefab.WebView.UrlChanged += MainWebView_UrlChanged;
        };
    
    //网址变化后执行的方法    
    private void MainWebView_UrlChanged(object sender, UrlChangedEventArgs eventArgs)
    {
        Debug.Log("当前网页视图标题："+ eventArgs.Title);
        Debug.Log("当前网页视图网址："+ eventArgs.Url);
    }

💬总结

本文介绍了插件的核心模块 网络视图预制件—CanvasWebViewPrefab

CanvasWebViewPrefab和WebViewPrefab非常相似，API方法也相差不多，两者用法基本一致

WebViewPrefab是用于3D场景比较多，CanvasWebViewPrefab则是可以更好地用于2D显示

该预制体是显示网页的重要对象，浏览器的网页视图就是通过这个CanvasWebViewPrefab显示出来的

也有很多API方法可以调用，文中也给出了几个示例，其他API都可以使用！