非矩形图像GWT按钮

Question

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

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

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

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

Answer 1

您可以为<map>，<area>标记创建一个简单的地图窗口小部件。

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

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