@alpha2-sh/反应
反应画布 alpha2 浏览器播放器 .
安装
npm install @alpha2-sh/react alpha2
alpha2 (与本软件包的同版本)和回放 18 或后作为对等依赖.
Alpha2Canvas
import { useCallback } from "react";
import { Alpha2Canvas } from "@alpha2-sh/react";
import { Alpha2Player } from "alpha2/player";
import { WorkerRenderBackend } from "alpha2/worker";
function Preview({ workerUrl, refill, time }) {
// A new function makes a new player: keep it stable.
const createPlayer = useCallback(
(replaceSurface) =>
new Alpha2Player(new WorkerRenderBackend(new Worker(workerUrl, { type: "module" })), {
onRefill: refill,
replaceSurface,
}),
[workerUrl, refill],
);
return <Alpha2Canvas createPlayer={createPlayer} timeTicks={time} width={1280} height={720} />;
}
createPlayer 做一个 Alpha2Player 从 alpha2/player在这里,一个制片工人(alpha2/worker),以及 refill 解码并上传演示文稿所缺少的框架. replaceSurface 让玩家从丢失的GPU恢复到一个新的画布上(一个丢失了的WebGL2上下文,或者在浏览器撤回了GPU访问后CPU的渲染器):组件将一个新的画布元素换入旧的,同一玩家借鉴了. 本部分绘制了 width 页:1 height,项目大小,并交给新玩家;它呈现 timeTicks 当它改变时, 并在画布消失时处理玩家 。 玩家属于一幅画布: React 可能不止一次设置组件(<StrictMode>, (中文(简体) ), <Activity>)),每次获得一款新画布和一款新玩家.
该元素保持了工程的宽度比并填充了容器的宽度. 虽然页面被隐藏,但它没有显示任何东西,它显示了页面再次可见的最新时间. 失败到 onError,或页的 reportError 没有它; onReady 财务报告和审定财务报表 onPresented 报告玩家的开始和每个演示文稿.
bindCanvas
bindCanvas(player, canvas, options) 同一接线不包含 React : 它将画布传输给玩家并显示显示的时间(binding.show(ticks)) (中文(简体) ). 它既不制造也不处置玩家. 设置画布 width 财务报告和审定财务报表 height 在绑定之前, 以项目大小为准 。 与 options.replaceCanvas (把旧的画布换个大小相同的画布,然后用它来决定), binding.replaceSurface() 这是玩家的 replaceSurface 选项需要.
许可证
MIT,版权Alpha2贡献.