2

我正在寻找最佳解决方案 - 我正在为 GWT 中基于浏览器的游戏绘制六边形地图（类似文明:)）。目前我正在画布上画它基本上可以工作。

但是 - 我也可以向左、向右、向下和向上滑动地图以查看地图的另一个片段。在这种情况下，我不得不重新绘制整个地图 - 这看起来不太好，并且当地图变得更复杂时可能会导致性能问题。

有没有更好的方法呢？某个图书馆？或者也许我应该让每个十六进制都像小部件一样成为按钮。所以我可以移动它而不是从头开始创建......但是不同的分辨率呢......我害怕地图有时会撕裂......

4

2 回答 2

2

您可以尝试使用简单的 DIV（FlowPanel、HTMLPanel 等）并使用 CSS 设置六边形样式。请参阅本教程：http: //jtauber.github.com/articles/css-hexagon.html

这里也有一些简洁的建议：html/css hexagon with image inside and hexagonal shape cells in html

于 2012-07-11T18:48:28.527 回答
2

您可以在隐藏的画布中绘制整个地图（通常只是相对静态的背景，而不是动画！），然后将您需要的部分复制到可见的画布上：

final Canvas hiddenCanvas = buildCanvas(1000, 1000);
drawHexPattern(hiddenCanvas);
// don't add the hiddenCanvas to your DOM

final Canvas visibleCanvas = buildCanvas(320, 200);
RootPanel.get().add(visibleCanvas); // add the visibleCanvas to the DOM

showArea(hiddenCanvas, visibleCanvas, 0, 0);
...
showArea(hiddenCanvas, visibleCanvas, 20, 10);
...

使用showArea()类似的方法

private void showArea(final Canvas hiddenCanvas, final Canvas visibleCanvas,
      final double x, final double y) {

  final Context2d hiddenCtx = hiddenCanvas.getContext2d();
  final Context2d visibleCtx = visibleCanvas.getContext2d();

  final ImageData imageData = hiddenCtx.getImageData(x, y, 
         visibleCanvas.getCoordinateSpaceWidth(),
         visibleCanvas.getCoordinateSpaceHeight());

  visibleCtx.putImageData(imageData, 0, 0);
}

我用一个工作示例创建了一个 pastebin：http: //pastebin.com/tPN2093a

于 2012-07-12T09:43:45.763 回答