使用 scala.js 在 canvas 上加载和显示图像

Question

我刚开始弄乱 scala.js，很早就卡住了。我没有 Scala 经验，所以我可能忽略了一些简单的事情。我尝试在 canvas 上显示图像。我试过了：

var image:HTMLImageElement = new HTMLImageElement()
image.src = "pathToSource"
image.onload = { () =>
  ctx.drawImage(image, 0, 0, 200, 200) //ctx is the canvas rendering context
}

此代码的问题是 onload 似乎不存在，尽管我可以在这里找到它：https://github.com/scala-js/scala-js-dom/blob/master/src/main/scala/org/scalajs/dom/raw/Html.scala#L1333

我还尝试了其他一些方法，例如 onloaddata，但我无法弄清楚编译器需要我做什么：

var image:dom.raw.HTMLImageElement = new HTMLImageElement()
image.src = "/img/image.png"
image.onloadeddata = new js.Function1[Event, _]{
  def apply(v1: Event):Unit={
    ctx.drawImage(image,0,0,200,200)
  }
}

有人知道如何使用 scala js 加载和显示图像吗？

提前致谢！

Answer 1

您在 .onload 之后缺少一个 = 运算符。

Answer 2

您使用的 org.scalajs.dom 是哪个版本？看起来 onload 是在 0.8.2 版本中添加的 quite recently。这可能是你困惑的根源。（我使用的是 0.8.0 版本，得到同样的错误。）

作为参考，像这样的东西的惯用 Scala 语法通常是这样的：

image.onloadeddata = { evt:Event =>
  ctx.drawImage(image, 0, 0, 200, 200) //ctx is the canvas rendering context
}

或者可能（在某些情况下，如果有歧义）：

image.onloadeddata = { evt:Event =>
  ctx.drawImage(image, 0, 0, 200, 200) //ctx is the canvas rendering context
}:js.Function1[Event, _]

Answer 3

您必须使用 dom.document.createElement("img") 创建图像然后在创建的图像上使用 onload 事件，这是一个工作示例：

val ctx = canvas.getContext("2d")
  .asInstanceOf[dom.CanvasRenderingContext2D]
var image = dom.document.createElement("img").asInstanceOf[HTMLImageElement]
image.src = "/img/image.gif"
image.onload = (e: dom.Event) => {
  ctx.drawImage(image, 0, 0, 525, 600, 0, 0, 525, 600)
}

使用 scala.js 在 canvas 上加载和显示图像

Loading and displaying an image on the canvas using scala.js

canvas

image

scala.js