非矩形图像 GWT 按钮

Question

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

我有一个不是矩形的图像，如下所示：

     

1. 现在，我希望可点击区域仅在图像的可见部分（非透明区域）内工作。这意味着使用按钮的人可以单击图像（按钮）的透明角，但不会触发按钮上的单击事件。无需创建自定义小部件（以及与之相伴的 HTML），这是否可能？
2. 我想制作一组这些非矩形按钮，其中会有其他按钮与这个按钮互连（它们的可见边缘将相互碰撞，以一种互锁模式），有点像这样：
   
   这是一个非常复杂的示例，我的示例不会那么大/很多，但概念成立：自定义形状的互锁按钮，每个按钮都是一个单独的按钮。这些按钮不会静态生成，而是根据操作而增长。

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

Answer 1

您可以为

、

标签创建一个简单的地图小部件。

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);

或者可以将 SVG 图像与 raphaeljs 一起使用以获得更复杂的效果（请参阅raphaelgwt）。它比地图区域解决方案更好。