1

我有一个带有 UI 的 C++ 应用程序，我使用 emcc 将其转换为 JS。

此应用程序的 UI 采用网页上的画布形式并附加到正文中。如何控制画布的附加位置？

如果我想附加画布#my-container而不是正文怎么办？

干杯!

4

1 回答 1

0

从默认输出 html 文件中，您将使用带有 -o arg 的构建命令获得此代码（例如）：

 emcc source.c ... -o myapp/index.html

.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
div.emscripten { text-align: center; }      
div.emscripten_border { border: 1px solid black; }
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }

还有兴趣点：

<div class="emscripten_border">
 <canvas class="emscripten"
         id="canvas"
         oncontextmenu="event.preventDefault()"
         tabindex=-1 >
 </canvas>
</div>

我检查了画布容器关系，那里没有任何问题。您可以在任何方向使用画布与容器进行操作。

不要担心 emscripten 使用 id="canvas" arg 不错。

为画布元素指定宽度和高度时要小心。

在下一个示例中对图形有不同的影响 ->

<canvas style="width:100%"></canvas> 

<canvas width="100%"></canvas>

在这种情况下使用 c,c++ 并不复杂。如果你真的想要那么更好的开始看看参考链接 => https://github.com/mbasso/asm-dom

例子 ：

单程 ：

 <button onclick="_callFunction()">


// callback for button event
extern "C"
{
    void callFunction() { std::cout << "callFunction called \n"; }
}

// 另一种方式

emscripten_run_script("document.getElementById('canvas').width =
 '320'");


// compile 
emcc -s EXPORTED_FUNCTIONS="['_callFunction']"

使用调试器测试下一个链接：

东西.html

于 2020-08-04T22:22:49.737 回答