在 Haxe 中使用 texSubImage2D 渲染图像

Question

我正在学习如何使用 Haxe 将图像标记到我的 canvas 上，并且我读到 texSubImage2D 应该是我完成这项工作所需的功能。

我阅读了一些找到的文档 here 并认为我可以通过完成以下参数来实现我想要的：

void gl.texSubImage2D(target, level, xoffset, yoffset, format, type, HTMLImageElement? pixels);

这是我所做的：

gl.texSubImage2D (cast fluid.dyeRenderTarget.writeToTexture, 0, Math.round(mouse.x), Math.round(mouse.y), gl.RGB, gl.UNSIGNED_BYTE, document.querySelector('img[src="images/myImage.jpg"]'));

但是，当我尝试构建项目时，出现以下错误：

src/Main.hx:571: characters 135-191 : js.html.Element should be Int
src/Main.hx:571: characters 135-191 : For function argument 'format'

当我返回文档时，我传递的格式 gl.RGB 是一个可接受的参数，所以我不确定我哪里出错了。

任何指导将不胜感激。

Answer 1

我无法完全重现您收到的错误消息，我认为这些错误在最近的 Haxe 版本中可能有所改善。总之，这里有几个问题：

首先，通过执行 gl.RGB / gl.UNSIGNED_BYTE，您试图从实例访问静态字段。我实际上得到了一个有用的错误：

Cannot access static field RGB from a class instance

虽然其他语言允许这样做，Haxe does not，但您必须通过 class 名称 访问它们。要解决此问题，只需添加前缀 js.html.webgl.RenderingContext.
其次，querySelector()returns一个普通的js.html.Element，none of the overloads接受。他们都想要更具体的东西：VideoElement、ImageElement 或 CanvasElement。所以你必须先施放它：
```
var image:js.html.ImageElement = cast document.querySelector('img[src="images/myImage.jpg"]');
```
最后，您需要强制转换第一个参数似乎有点可疑。即使它有效，也可能有更好的方法来使用您正在使用的包装器。

所以总而言之，应该编译以下内容：

gl.texSubImage2D(cast fluid.dyeRenderTarget.writeToTexture, 0,
    Math.round(mouse.x), Math.round(mouse.y),
    RenderingContext.RGB, RenderingContext.UNSIGNED_BYTE, image);

在 Haxe 中使用 texSubImage2D 渲染图像

Rendering image using texSubImage2D in Haxe

webgl

haxe