Swing/MouseDrivenImageRotation のバックアップ(No.1)

TITLE:Mouseで画像を移動、回転

Posted by terai at 2008-10-13

Mouseで画像を移動、回転

画像をマウスのドラッグで任意の位置に移動、回転します。Life is beautiful: 習作UI：初めてのFlash その２からの移植になります。

  • &jnlp;
  • &jar;
  • &zip;

#screenshot

サンプルコード

class DraggableImageMouseListener extends MouseAdapter{
  private static final Color color = new Color(100,255,200,100);
  private static final int ir = 40, or = ir*3;
  public final Ellipse2D.Double inner = new Ellipse2D.Double(0,0,ir,ir);
  public final Ellipse2D.Double outer = new Ellipse2D.Double(0,0,or,or);
  public final Image image;
  public final int width;
  public final int height;
  public final double centerX, centerY;
  public double x = 10.0, y = 50.0, rotate = 45.0;
  public double startX, startY, startA;
  private boolean moverHover, rotatorHover;

  public DraggableImageMouseListener(ImageIcon ii) {
    image   = ii.getImage();
    width   = ii.getIconWidth();
    height  = ii.getIconHeight();
    centerX = width/2.0;
    centerY = height/2.0;
    inner.x = (x+centerX-ir/2);
    inner.y = (y+centerY-ir/2);
    outer.x = (x+centerX-or/2);
    outer.y = (y+centerY-or/2);
  }
  public void paint(Graphics g, ImageObserver ior) {
    Graphics2D g2d = (Graphics2D)g;
    AffineTransform at = AffineTransform.getTranslateInstance(x, y);
    at.rotate(rotate, centerX, centerY);
    g2d.drawImage(image, at, ior);
    g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
    if(rotatorHover) {
      Area donut = new Area(outer);
      donut.subtract(new Area(inner));
      g2d.setPaint(color);
      g2d.fill(donut);
    }else if(moverHover) {
      g2d.setPaint(color);
      g2d.fill(inner);
    }
  }
  public void mouseMoved(MouseEvent e) {
    if(outer.contains(e.getX(), e.getY()) && !inner.contains(e.getX(), e.getY())) {
      moverHover = false; rotatorHover = true;
    }else if(inner.contains(e.getX(), e.getY())) {
      moverHover = true;  rotatorHover = false;
    }else{
      moverHover = rotatorHover =false;
    }
    ((JComponent)e.getSource()).repaint();
  }
  public void mouseReleased(MouseEvent e) {
    rotatorHover = moverHover = false;
    ((JComponent)e.getSource()).repaint();
  }
  public void mousePressed(MouseEvent e) {
    if(outer.contains(e.getX(), e.getY()) && !inner.contains(e.getX(), e.getY())) {
      rotatorHover = true;
      startA = rotate - Math.atan2(e.getY()-y-centerY, e.getX()-x-centerX);
      ((JComponent)e.getSource()).repaint();
    }else if(inner.contains(e.getX(), e.getY())) {
      moverHover = true;
      startX = e.getX();
      startY = e.getY();
      ((JComponent)e.getSource()).repaint();
    }
  }
  public void mouseDragged(MouseEvent e) {
    if(rotatorHover) {
      rotate = startA + Math.atan2(e.getY()-y-centerY, e.getX()-x-centerX);
      ((JComponent)e.getSource()).repaint();
    }else if(moverHover) {
      x += e.getX() - startX;
      y += e.getY() - startY;
      inner.x = (x+centerX-ir/2);
      inner.y = (y+centerY-ir/2);
      outer.x = (x+centerX-or/2);
      outer.y = (y+centerY-or/2);
      startX = e.getX();
      startY = e.getY();
      ((JComponent)e.getSource()).repaint();
    }
  }
}

解説

画像の中心をドラッグすると移動、すこし外側をドラッグすると画像を回転することができます。

回転のためのドーナツ状の図形は、Area#subtractメソッドを使用して作成しています。

参考リンク

コメント