Question

我正在寻找最佳解决方案 - 我正在为GWT中基于浏览器的游戏绘制六角形地图（文明像:)）。目前我在画布上绘制它基本上有效。

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

有更好的方法吗？有些图书馆？或者也许我应该将每个十六进制按钮作为小部件。所以我可以移动它而不是从头开始创建......但那么不同的分辨率那么......我害怕地图有时会撕裂......

Answer 1

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

此处还有一些简洁的建议：html/css hexagon with image inside和hexagonal shaped cells in html

Answer 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}

用GWT绘制六边形地图的最佳方法

2 个答案: