前端盒子模型介绍（嵌入开源Flash控件）

Ruffle 是一个开源免费的 Flash 播放器，网页版 ruffle.js 体积很小，打个包 1.7 MB，调用也非常简单aardio 标准库中的 web.view ( WebView2 ) 可以完美支持 ruffle.js ，不过我们先要解决 2 个小问题：，现在小编就来说说关于前端盒子模型介绍?下面内容希望能帮助到你，我们来一起看看吧!

前端盒子模型介绍

方法一、使用基于微软 WebView2 的 web.view 嵌入 JS 版 Ruffle

Ruffle 是一个开源免费的 Flash 播放器，网页版 ruffle.js 体积很小，打个包 1.7 MB，调用也非常简单。aardio 标准库中的 web.view ( WebView2 ) 可以完美支持 ruffle.js ，不过我们先要解决 2 个小问题：

1、ruffle.js 通过网址加载 Flash 动画不太正常会报错，但是直接内存加载动画数据没问题。2、浏览器不能直接用代码访问本地文件。

我们先使用 external 接口导出 aardio 函数来解决上面的问题，使用 aardio 将远程或本地的 Swf 文件先读入到内存，再转换为字节数组传给 ruffle.js 就可以了，关键代码如下：

import web.view; var wb = web.view(winform); wb.external = { getSwf = function(){ //可返回包含 SWF 文件二进制数据的数组、SAFEARRAY,buffer return com.SafeArrayV( inet.http.get("http://update.aardio.com/v10.files/demo/transparent.swf") ); //本地文件可以直接返回 buffer return string.loadBuffer("\res\tet.swf"); }; }

给 ruffle.js 返回数组就行（buffer、数组、COM 数组都行）, 要注意 string.load 加载文件返回的是字符串，string.loadBuffer() 返回的是字节数组。

网页里面用下面的 Javascript 加载 Flash 动画：

const ruffle = window.RufflePlayer.newest(); const player = ruffle.createPlayer(); player.style.width = "100vw"; player.style.height = "100vh"; const container = document.getElementById("container"); container.appendChild(player); player.load({data: await aardio.getSwf() });

在 JS 里用 aardio.getSwf() 调用 aardio 导出的 wb.external.getSwf() 函数，注意所有本地函数在 WebView2 里都是异步函数，所以用了 await 取返回值( 要在异步函数里才能使用 await )。

ruffle.js 最好是通过 HTTP 服务器加载，这在 aardio 中很容易解决，如果创建了 aardio 工程，只要简单地将所有网页以及 ruffle.js 添加到工程的资源目录内，然后用类似：

wb.go( wsock.tcp.simplehttperver.startUrl("/res/swf/index.html") )

打开网页就可以了，aardio 会自动使用 HTTP 协议内存加载这个资源目录下的所有文件（可以发布为独立 EXE 文件）。

写范例的时候为了方便大家复制就可以运行，没有创建工程文件，HTML代码与 aardio 代码混写在一起，所以我写了一个扩展库 web.ruffle 用于获取通过 HTTP 服务器访问 ruffle.js 的地址。

首先在 aardio 中导出 getRuffleScriptSrc 函数：

import web.ruffle; import web.view; var wb = web.view(winform); wb.external = { getSwf = function(){ return com.SafeArrayV( inet.http.get("http://update.aardio.com/v10.files/demo/transparent.swf") ); }; getRuffleScriptSrc = function(){ return web.ruffle.getUrl("/ruffle/ruffle.js"); }; }

然后在 HTML 代码中添加一个空的 script 元素：

<script id="ruffle"></script>

然后在 JavaScript 中调用 aardio 函数获取到 ruffle.js 的地址并加载该 JS:

var ruffleScript = document.getElementById("ruffle"); ruffleScript.src = await aardio.getRuffleScriptSrc();

完整范例源码请参考 「 aardio 范例 / Web 界面 / web.view / Flash 」

方法二、嵌入 Ruffle 桌面版：钩住外部进程窗口

aardio 扩展库 process.ruffle —— 可以让 Ruffle 桌面版的窗口嵌入我们的软件界面。这个库之前的实现是把 Ruffle 创建的桌面独立窗口加上 WS_CHILD 样式变为子窗口，再指定父窗口，调整大小后嵌入我们的界面。但是这种方式 —— 有时候会出现一些奇怪的问题( 例如 Flash 动画卡住，鼠标晃一下才会动 )。

在 aardio 里还有一个更好的选择：我们可以用 orphanWindow 功能将独立窗口伪装为子窗口，关键代码只有一句：

this._form.orphanWindow(,this.hwndFlash);

Ruffle 桌面版打开 Flash 会创建一个带标题栏，带边框的独立窗口，如果在打开 Flash 动画以后再去移除窗口边框 —— 那就会看到带边框的窗口在屏幕上一闪而过。下面我们就来解决这个问题。

首先我们用 process.apiHOOK 替代 process 创建 Ruffle 进程：

this.apiHook = process.apiHook(ruffleExePath,args,{ suspended = true;//启动后暂停 });

注意参数里指定了进程启动后暂停，下面安装好 API 钩子以后再恢复运行。

下面先安装钩子拦截创建窗口的 API 函数 CreateWindowExW ，以及设置窗口位置的函数 SetWindowPos 。关键代码如下：

//安装 HOOK this.hookCreateWindowEx = this.apiHook.install("User32.dll" ,"CreateWindowExW","CreateWindowExHook.dll","_CreateWindowExHook@48"); this.hookSetWindowPos = this.apiHook.install("User32.dll" ,"SetWindowPos","CreateWindowExHook.dll","_hookSetWindowPos@28");

然后再获取外部进程的 hookSet 函数并转换为 aardio 函数调用：

var hookSet = this.process.remoteApi("void(addr pc,addr ps,addr hwndHost)" ,"CreateWindowExHook.dll","hookSet","cdecl"); hookSet( this.hookCreateWindowEx.addrTrampoline,//这是原来的 CreateWindowEx 函数指针地址 this.hookSetWindowPos.addrTrampoline,//这是原来的 SetWindowPos 函数指针地址 this._form.hwnd );

现在可以用下面的代码让进程继续运行了：

this.process.resume();

再加上下面的代码保证主进程退出时 ruffle.exe 也会自动退出：

this.process.assignToJobObject(..process.job.limitKill);

DLL 的源代码很少，在 process.ruffle 扩展库目录下可以找到。要注意 Ruffle 创建了多个窗口，设置参数要避免改动不可见的那个窗口。测试一下：

调用范例：

import win.ui; /*DSG{{*/ var winform = win.form(text="开源 Flash 控件 Ruffle";right=759;bottom=512) winform.add( static={cls="static";text="Static";left=3;top=1;right=758;bottom=443;db=1;dl=1;dr=1;dt=1;z=1} ) /*}}*/ import process.ruffle; var ruffle = process.ruffle(winform.static); winform.show(); //自定义 Flash 参数 ruffle.flashVars = {k="v",k2=123}; //也可以打开本地文件 ruffle.go("http://ruffle.rs/demo/swfs/wasted_sky.swf"); win.loopMessage();

请注意 Ruffle 桌面版不支持 Win7。