Question

我刚刚开始搞乱scala.js而且很早就陷入了困境。我没有scala经验所以我可能忽略了一些简单的事情。我尝试在画布上显示图像。我试过了：

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

您使用的是哪个版本的org.scalajs.dom？在版本0.8.2中，onload似乎已添加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 2

您必须使用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)
}

Answer 3

您在=之后错过了.onload运算符。

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

3 个答案: