为Expo引入Canvas 2D Context API

我们很高兴地宣布，Expo 现已支持通过 npm 包 expo-2d-context 使用 Web 的 2D 画布 API。这是一个纯 JavaScript 的艺术库，可以在 Expo Graphics 和浏览器的 WebGL 上下文中运行。这个库在简单易用的屏幕绘图功能与为高级图形开发者提供的复杂工具集之间找到了良好的平衡，非常适合用于生成代码艺术或为新手程序员开发第一个视频游戏。

借助此库，您可以直接在 Expo 应用程序中使用现有的丰富画布库和教程资源。

如何开始使用

要开始使用 expo-2d-context，首先需要安装 npm 包，并通过环境提供的机制创建 GL 上下文，然后将其传递给 Expo2DContext 类的新实例。之后，您可以像在 Web 浏览器中一样使用这些实例。例如：

import React from 'react';
import { GLView } from 'expo';
import Expo2DContext from 'expo-2d-context';

export default class App extends React.Component {
  render() {
    return (
      
    );
  }

  _onGLContextCreate = (gl) => {
    const ctx = new Expo2DContext(gl);

    ctx.fillStyle = "grey";
    ctx.fillRect(20, 40, 100, 100);

    ctx.beginPath();
    ctx.moveTo(70, 40);
    ctx.lineTo(70, 30);
    ctx.arc(70, 20, 10, 0.5 * Math.PI, 2.5 * Math.PI);
    ctx.stroke();

    ctx.flush(); // 更新屏幕
  };
}

需要注意的是，与普通的 2D 上下文实现不同，此实现假设是在缓冲环境中绘制的。因此，当您需要实际更新屏幕时，必须调用上下文的 flush() 方法。

使用字体绘制功能

如果您需要使用 API 的字体绘制功能，请首先调用 ctx.initializeText() 方法以加载必要的资源。之后，您可以按照常规方式使用字体绘制功能。例如：

await ctx.initializeText();
ctx.fillStyle = "blue";
ctx.font = "italic 72pt sans-serif";
ctx.fillText("Hey Galaxy", 10, 200);
ctx.flush(); // 更新屏幕

适用场景

expo-2d-context 是一个非常适合以下场景的工具：

绘制自定义 UI 元素：可以用于创建复杂的用户界面和环境动画。
简单游戏开发：适合开发简单的 2D 游戏和视觉交互应用程序。
快速绘图命令：如果您需要快速而强大的绘图命令，但不想使用 WebView 小部件来处理 DOM 和 canvas 标签的交互，那么这个库是一个很好的选择。

此外，它还可以让应用程序的逻辑和渲染代码之间的交互更加流畅和高效，避免了基于 WebView 的渲染方法可能遇到的性能瓶颈。

性能与局限性

需要注意的是，与浏览器的原生 2D 上下文实现相比，expo-2d-context 的性能稍逊一筹。不过，对于用户界面和简单的视频游戏开发来说，其性能已经足够。如果您需要更高性能的解决方案，可以考虑使用基于 WebView 的原生画布实现。

学习与开发

除了应用程序开发之外，expo-2d-context 还可以作为学习 2D Canvas API 的工具。它提供了一个替代实现，而这些 API 通常只存在于大型渲染引擎的代码库中。

我们使用 W3C 的一致性测试套件来确保库的功能按预期运行。测试套件的修改版本位于库的 GitHub 仓库中的 test 目录中，可以在浏览器和 Expo 环境中运行。

反馈与贡献

如果您在使用过程中遇到问题，或者希望为该库的开发贡献力量，请访问其 GitHub 仓库提交问题或拉取请求。

原文链接: https://blog.expo.dev/introducing-the-canvas-2d-context-api-for-expo-8ba6106ed8e5

为Expo引入Canvas 2D Context API | 作者：Naomi Alterman