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 回答