イベントサンプル

以下はvectomaticのサンプルをアレンジしたもの。

import org.vectomatic.dom.svg.*;
import org.vectomatic.dom.svg.utils.*;

import com.google.gwt.core.client.*;
import com.google.gwt.event.dom.client.*;
import com.google.gwt.event.shared.*;
import com.google.gwt.user.client.*;
import com.google.gwt.user.client.ui.*;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class ImageViewer implements EntryPoint {


  public void onModuleLoad() {
    RootLayoutPanel rootPanel = RootLayoutPanel.get();
    HTML html = new HTML("", true);
    rootPanel.add(html);
    createSvg(html);
  }

  private void createSvg(HTML html) {
    
    OMSVGDocument doc = OMSVGParser.currentDocument();
    OMSVGSVGElement svg = doc.createSVGSVGElement();
    svg.setViewBox(0f, 0f, 400f, 200f);

    Circle circle = new Circle();
    svg.appendChild(circle.element);

    Square square = new Square();
    svg.appendChild(square.element);

    html.getElement().appendChild(svg.getElement());
  }

  static class Circle {
    OMSVGCircleElement element;

    static final String[] colors = new String[] { SVGConstants.CSS_RED_VALUE,
        SVGConstants.CSS_BLUE_VALUE, SVGConstants.CSS_GREEN_VALUE,
        SVGConstants.CSS_YELLOW_VALUE, SVGConstants.CSS_PINK_VALUE };
    
    Circle() {
      element = new OMSVGCircleElement(80f, 80f, 40f);
      element.getStyle().setSVGProperty(SVGConstants.CSS_STROKE_PROPERTY,
          SVGConstants.CSS_BLACK_VALUE);
      setCircleColor();

      element.addMouseDownHandler(new MouseDownHandler() {
        @Override
        public void onMouseDown(MouseDownEvent event) {
          setCircleColor();
          event.stopPropagation();
          event.preventDefault();
        }
      });
    }
    
    private void setCircleColor() {
      element.getStyle().setSVGProperty(SVGConstants.CSS_FILL_PROPERTY, 
          colors[Random.nextInt(colors.length)]);
    }
  }

  static class Square {

    OMSVGRectElement element;
    private boolean dragging;
    private float x0, y0;
    private OMSVGPoint p;

    Square() {
      element = new OMSVGRectElement(140f, 40f, 80f, 80f, 0f, 0f);
      element.getStyle().setSVGProperty(SVGConstants.CSS_STROKE_PROPERTY,
          SVGConstants.CSS_BLACK_VALUE);
      element.getStyle().setSVGProperty(SVGConstants.CSS_FILL_PROPERTY,
          SVGConstants.CSS_GREEN_VALUE);

      element.addMouseDownHandler(new MouseDownHandler() {
        @Override
        public void onMouseDown(MouseDownEvent event) {
          dragging = true;
          p = getLocalCoordinates(event);
          x0 = element.getX().getBaseVal().getValue();
          y0 = element.getY().getBaseVal().getValue();
          DOMHelper.setCaptureElement(element, null);
          event.stopPropagation();
          event.preventDefault();
        }        
      });
      element.addMouseMoveHandler(new MouseMoveHandler() {
        @Override
        public void onMouseMove(MouseMoveEvent event) {
          if (dragging) {
            OMSVGPoint d = getLocalCoordinates(event).substract(p);
            element.getX().getBaseVal().setValue(x0 + d.getX());
            element.getY().getBaseVal().setValue(y0 + d.getY());
          }
          event.stopPropagation();
          event.preventDefault();
        }        
      });
      element.addMouseUpHandler(new MouseUpHandler() {
        @Override
        public void onMouseUp(MouseUpEvent event) {
          dragging = false;
          DOMHelper.releaseCaptureElement();
          event.stopPropagation();
          event.preventDefault();
        }        
      });
    }

    OMSVGPoint getLocalCoordinates(MouseEvent<? extends EventHandler> e) {      
      OMSVGSVGElement svg = (OMSVGSVGElement)element.getParentNode();      
      OMSVGPoint p = svg.createSVGPoint(e.getClientX(), e.getClientY());
      OMSVGMatrix m = svg.getScreenCTM().inverse();
      return p.matrixTransform(m);
    }
  }
}