22

emscripten を使用しているときに、C++ でキャンバス 2D コンテキストにアクセスする方法はありますか? 、 1d done など
のキャンバスのAPI関数を使用して単純な形状/パスを描画できるようにしたいと思います（したがって、基本的には、ここにリストされている関数のいずれかを使用します.lineTofillRect

私はSDLに依存したくないことを指摘しますが、それが唯一の信頼できるアプローチである場合、結果がWebGLを使用せずに基本的なキャンバスAPIを使用するように強制的にJavaScriptにコンパイルする方法はありますか?

または、次の提案に従って API 関数の簡単なマッピングを行う必要があります: Calling JavaScript From C/C++ ?

誰かがより良い解決策を共有するまで、私はおそらくマッピングを行い、完了したらすぐにここで共有します.

4

3 に答える 3

8

Emscripten のドキュメントによると、Javascript を生成するときに C++ で SDL を使用してキャンバスを取得できます。SDL 変換は、ネイティブ キャンバス呼び出しで実装されます。

于 2013-06-24T12:54:51.543 に答える
1

私の理解では、で初期化された SDLSDL_SWSURFACEは、「webgl」/「experimental-webgl」ではなく「2d」コンテキストを作成します。機能は、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

PS

emscripten に静的/定義済みバインディングが存在しない場合、または存在するものを使用したくない場合は、同じアプローチを使用して任意の Web API を操作できます。たとえば、 CanvasRenderingContext2D Web API にできる限り近づけたかったので、SDL は選択しませんでした。

于 2021-12-29T17:39:14.990 に答える