22

使用 emscripten 时，有什么方法可以在 C++ 下访问画布 2D 上下文？
我希望能够使用画布的 api 函数（如 1d done 等）绘制简单的形状/路径lineTo（所以基本上使用此处fillRect列出的任何函数。

我会指出，我宁愿不依赖 SDL，但如果它是唯一可靠的方法，那么有没有办法强制它编译为 JavaScript，这样结果就不会使用 WebGL，而是使用基本的 canvas api？

或者我应该按照以下建议对 api 函数进行简单映射：Calling JavaScript From C/C++？

在有人分享更好的解决方案之前，我很可能会在完成映射后立即在此处分享。

4

3 回答 3

8

根据Emscripten 文档，您可以在生成 Javascript 时使用 SDL 和 C++ 来获取画布。SDL 转换在本机画布调用中实现。

于 2013-06-24T12:54:51.543 回答
1

据我了解，初始化的 SDLSDL_SWSURFACE将创建一个“2d”上下文，而不是“webgl”/“experimental-webgl”。功能可以在 sdl_rotozoom 测试或 GitHub 上查看：https ://github.com/kripken/emscripten/blob/master/tests/sdl_rotozoom.c

于 2016-02-11T15:17:46.070 回答
0

我已经通过embind /使用了动态绑定emscripten::val

示例（emscripten v3.0.0）：

#include <emscripten/val.h>

auto main() -> int {
  const auto document = emscripten::val::global("document");
  const auto canvas =
      document.call<emscripten::val, std::string>("querySelector", "canvas");

  auto ctx = canvas.call<emscripten::val, std::string>("getContext", "2d");

  const auto width = canvas["width"].as<int>();
  const auto height = canvas["height"].as<int>();

  ctx.call<void>("clearRect", 0, 0, width, height);

  // rect
  ctx.set("fillStyle", "white");
  ctx.call<void>("fillRect", 0, 0, width, height);

  // line
  ctx.set("strokeStyle", "black");
  ctx.call<void>("moveTo", 0, 0);
  ctx.call<void>("lineTo", width, height);
  ctx.call<void>("stroke");

  // text
  ctx.set("fillStyle", "black");
  ctx.set("font", "bold 48px serif");
  ctx.call<void, std::string>("fillText", "Hello World!", width / 2,
                              height / 2);

  return 0;
}

emcc src/main.cpp -g -s ENVIRONMENT='web' -std=c++20 --bind -o build/main.js

附言

顺便说一句，如果 emscripten 中不存在静态/预定义绑定，或者您只是不想使用存在的绑定，则可以使用相同的方法处理任何 Web API。例如，我想尽可能地坚持使用CanvasRenderingContext2D Web API，所以 SDL 不是我的选择。

于 2021-12-29T17:39:14.990 回答