非矩形图像GWT按钮

我正在尝试创建一个基于图像的自定义GWT按钮

我有一个不是矩形的图像，类似这样：

现在，我希望单击启用区域仅在图像的可见部分（非透明区域）内工作。这意味着使用按钮的人可以单击图像（按钮）的透明角落，而不会触发按钮上的单击事件。不必创建自定义小部件（以及与之配套的HTML）就可以做到这一点吗

我想制作一组非矩形按钮，其中会有其他按钮与此按钮相互连接（它们的可见边缘会以某种互锁模式相互碰撞），类似这样：

这是一个非常复杂的示例，我的示例没有那么大/多，但概念是：自定义形状的互锁按钮每个都是一个单独的按钮。这些按钮不是静态生成的，而是基于操作而增长的

---

这可能吗？我不知道从哪里开始。第二张图（金字塔互锁三角形）比我想象的更复杂，但这个概念成立。它更复杂的原因是因为最终我只能水平地互锁按钮（想想金字塔图片顶部附近的第二行，从左到右的3个三角形）。

您可以为

，

创建一个简单的地图小部件）。它比地图区域解决方案要好。
您可以为
，
创建一个简单的地图小部件。这比地图区域解决方案要好。
这可能会奏效，哇。我注意到在这个例子中，你给它“rect”作为AreaElement的形状。我假设我可以通过一个多边形，然后在setCoords（）中定义一个点列表（csv），对吗？这是我可以传递到area.setShape（）方法-，的可能形状列表吗？我可能有一些更复杂的大小调整操作要做，因为我计划在每一个上面覆盖文本（因此更长的文本=更宽的区域）。另外：我也很好奇，这会在给定的点上做凸包操作吗？我可以想象告诉该区域设置形状（“多边形”），并给它5分，第5分在给定的4分之内。我想它假设点上有一个凸包，而不是一些奇怪的形状，或者当你指定点时，顺序重要吗？是的，你应该使用“poly”，coord的顺序重要。对于多边形区域，我使用GIMP的Web->Image Map filter在图像上方绘制区域并获得正确的坐标。好的，看起来这意味着我必须使用一个图像（或一系列图像）来动态地增加相互连接的按钮。我不知道我还能怎么做。在进一步研究之后，这并不理想，但我认为这可能是给出备选方案的最简单的方法（这些方案并不多）。因为没有其他人回应，我相信你的回答。谢谢thnx。地图的区域是做你想做的事情最简单最古老的方法。还要注意使用Raphael（或其他JS库）制作的SVG动画。你可以创造出令人惊叹的形状，像上。这可能会奏效，哇。我注意到在这个例子中，你给它“rect”作为AreaElement的形状。我假设我可以通过一个多边形，然后在setCoords（）中定义一个点列表（csv），对吗？这是我可以传递到area.setShape（）方法-，的可能形状列表吗？我可能有一些更复杂的大小调整操作要做，因为我计划在每一个上面覆盖文本（因此更长的文本=更宽的区域）。另外：我也很好奇，这会在给定的点上做凸包操作吗？我可以想象告诉该区域设置形状（“多边形”），并给它5分，第5分在给定的4分之内。我想它假设点上有一个凸包，而不是一些奇怪的形状，或者当你指定点时，顺序重要吗？是的，你应该使用“poly”，coord的顺序重要。对于多边形区域，我使用GIMP的Web->Image Map filter在图像上方绘制区域并获得正确的坐标。好的，看起来这意味着我必须使用一个图像（或一系列图像）来动态地增加相互连接的按钮。我不知道我还能怎么做。在进一步研究之后，这并不理想，但我认为这可能是给出备选方案的最简单的方法（这些方案并不多）。因为没有其他人回应，我相信你的回答。谢谢thnx。地图的区域是做你想做的事情最简单最古老的方法。还要注意使用Raphael（或其他JS库）制作的SVG动画。你可以创造出令人惊叹的形状，如上。
public class ImageMap extends Widget implements HasMouseDownHandlers {

  private MapElement mapElement;

  public ImageMap() {
    mapElement = Document.get().createMapElement();
    setElement(mapElement);
  }

  public String getImgName() {
    return mapElement.getName();
  }

  public void setImgName(String imgName) {
    mapElement.setName(imgName);
  }

  public void addMapArea(AreaElement area) {
    mapElement.appendChild(area);
  }

  public HandlerRegistration addMouseDownHandler(MouseDownHandler handler) {
    return addDomHandler(handler, MouseDownEvent.getType());
  }

}

AreaElement area = Document.get().createAreaElement();
area.setShape("rect");
area.setCoords("389,250,491,502");
area.setHref("#main");

imageMap = new ImageMap();
imageMap.setImg("frontPage");
imageMap.addMapArea(area);
imageMap.addMouseDownHandler(this);