Кнопка GWT не прямоугольного изображения - PullRequest
Новая
       52

Кнопка GWT не прямоугольного изображения

1 голос
/ 13 июля 2011

Я пытаюсь создать пользовательскую кнопку GWT на основе изображения.

У меня есть изображение, которое не является прямоугольным, что-то вроде этого:

Yellow Triangle Image

  1. Теперь я хочу, чтобы область с возможностью нажатия работала только внутри видимых частей изображения (непрозрачных областей).Это может означать, что кто-то, использующий кнопку, может щелкнуть в прозрачных углах изображения (Кнопка) и не вызывать событие нажатия кнопки.Возможно ли это без необходимости создания собственного виджета (и HTML-кода для его использования)?
  2. Я хотел бы сделать набор этих непрямоугольных кнопок, в котором были бы другие кнопки,-связаться с этим (их видимые края будут сталкиваться друг с другом, что-то вроде шаблона блокировки), примерно так:
    Inter-Locking Triangles
    Это очень сложный пример, мой не будетбудь как большой / много, но концепция верна: блокирующие кнопки пользовательской формы, каждая из которых является отдельной кнопкой.Эти кнопки не будут генерироваться статически, а будут расти в зависимости от действия.

Возможно ли это вообще?Я понятия не имею, с чего начать.2-я картина (треугольники блокировки пирамид) сложнее, чем я представляю, но концепция верна.Причина, по которой он более сложный, заключается в том, что в конечном итоге я буду блокировать кнопки только по горизонтали (вспомните 2-й ряд в верхней части рисунка пирамиды, 3 треугольника слева направо ).

1 Ответ

1 голос
/ 13 июля 2011

Вы можете создать простой виджет карты для тегов <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);

или можете использовать изображение SVG с Raphaeljs для более сложных эффектов (см. Raphaelgwt ). Это лучше, чем решение области карты.

...