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

【问题标题】：Optimal way of drawing hexagonal map with GWT用GWT绘制六边形图的最佳方法
【发布时间】：2012-07-12 19:10:15
【问题描述】：

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

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

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

【问题讨论】：

标签： gwt canvas

【解决方案1】：

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

这里也有一些巧妙的建议：html/css hexagon with image inside 和 hexagonal shaped cells in html

【讨论】：

【解决方案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}

【讨论】：