在Haxe中使用texSubImage2D渲染图像

Question

我正在学习如何使用Haxe将图像标记到我的画布上，并且我已经读过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，您尝试从实例访问静态字段。我实际上得到了一个有用的错误： 无法从类实例访问静态字段RGB 虽然其他语言允许使用Haxe does not，但您必须通过类名访问它们。要解决此问题，只需在js.html.webgl.RenderingContext前加上字母。
• 其次，querySelector()返回一个普通的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);