gwt - 如何获取 Canvas 的宽度/高度？

Question

我想在我的 html 页面上有一个 Canvas ，宽度 = 100%。然后我想在运行时获取 Canvas 的宽度(以像素为单位)。像这样的东西:

Canvas c = Canvas.createIfSupported();
c.setWidth("100%");
c.setHeight("100%");

// let's draw a rectangle to fill the whole canvas:
c.getContext2d().rect(0, 0, ?, ?); // <-- what's its actual width/height?

谢谢

Answer 1

这是(令人惊讶的)

c.getContext2d().rect(0, 0, 299, 149);

...无论 Canvas 的实际像素大小是多少。原因是，300x150 是默认的坐标空间大小，请参阅 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

您可以使用 canvas.setCooperativeSpaceWidth() 和 canvas.setCooperativeSpaceHeight() 将其更改为您想要的任何内容。

通常，人们希望独立于 Canvas 的实际大小进行绘制，因此他们只需将坐标空间设置为 100x100 之类的值，绘制的图像就会自动缩放。

但是，您可能想了解实际的 Canvas 像素大小:

Scheduler.get().scheduleDeferred(new ScheduledCommand() {

  @Override
  public void execute() {

    final int clientWidth = canvas.getElement().getClientWidth();
    final int clientHeight = canvas.getElement().getClientHeight();

    setupCoordinateSpace(canvas, clientWidth, clientHeight);
    drawMyImage(canvas);
  }
});

请注意，这必须在 scheduleDeferred 中完成，因为只有在浏览器有机会执行布局后才能知道客户端大小。

您可以使用此信息来调整宽高比以匹配 Canvas (我推荐这样做，因为否则您会得到扭曲的图像)

void setupCoordinateSpace(Canvas canvas, int clientWidth, int clientHeight) {
  final double aspect = (double) clientWidth / (double) clientHeight;
  canvas.setCoordinateSpaceHeight(
      (int) (myCoordinateSpaceWidth / aspect));
}

或者，您也可以设置坐标空间以匹配像素大小，这样您就可以在 HTML5 Canvas 上执行像素精确的绘制:

void setupCoordinateSpace(Canvas canvas, int clientWidth, int clientHeight) {
  canvas.setCoordinateSpaceWidth(clientWidth);
  canvas.setCoordinateSpaceHeight(clientHeight);
}

坐标空间设置完毕后，就可以调用drawMyImage()