非矩形图像GWT按钮 [英] Non-Rectangular Image GWT Button

问题描述

我想基于图像创建自定义按钮GWT

I am trying to create a custom GWT Button based on an image.

我有一个形象，是不是长方形，这样的事：搜索结果
＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;
搜索结果

I have an image that is not rectangular, something like this:

     

1. 现在，我想在点击就能区域的图像（非透明区域）的可见部分内唯一的工作。这意味着它可能是有人使用按钮在图像（按钮）的透明边角点击并不会触发按钮的Click事件。这是可能的，而无需创建一个自定义窗口小部件（并且去用它的HTML）？


2. 我想作一组，这些非矩形按钮，其中会有其他的按钮与这一个（它们的可见边缘会碰到正对着海誓山盟，将连接间的，在那种跨锁定图案），有点像这样：结果
   
   结果这是一个非常复杂的例如，我就不会那么大/很多，但观认为：锁定间自定形状的按钮，每个按钮是一个单独的按钮。这些按钮不会产生静态的，但成长的基础上采取行动。

1. Now, I want the click-able area to only work inside the visible parts of the image (non-transparent areas). This would mean that it's possible for someone using the button to click in the transparent corners of the image (Button) and not trigger the click event on the Button. Is this possible without having to create a custom widget (and the HTML to go with it)?
2. I would like to make a set of these non-rectangular buttons, in which there would be other buttons that would inter-connect with this one (their visible edges will bump right up against eachother, in sort of an inter-locking pattern), sort of like this:
   
   That's a very complex example, mine wouldn't be as big/many but the concept holds: inter-locking buttons of custom shape each being an individual button. These buttons would not be generated statically, but grow based on action.

这甚至可能吗？我不知道从哪里开始。第二画面（金字塔相互锁定三角形）是比我预想更为复杂，但这个概念成立。究其原因是比较复杂的，因为最终我只会相互锁定按钮水平（考虑第2行附近的金字塔图像的顶部，的 3个三角形由左到右的）。

Is this even possible? I have no clue where to begin. The 2nd picture (pyramid inter-locking triangles) is more complex than what I'm envisioning, but the concept holds. The reason it's more complex is because ultimately I would only be inter-locking buttons Horizontally (think of the 2nd row near the top of the pyramid picture, the 3 triangles from left to right).

推荐答案

您可以创建一个简单的地图小工具＆LT;地图＆GT; ，＆LT ;面积方式＆gt; 标签

You can create a simple Map Widget for <map>, <area> tags.

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

}

创建code：

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 ）。它比地图区域更好的解决方案。

or can use SVG image with raphaeljs for more complex effects (see raphaelgwt). It's better than map-area solution.

这篇关于非矩形图像GWT按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！