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()返回none of the overloads接受的普通js.html.Element。他们都想要更具体的内容：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渲染图像

1 个答案: