Bild verschiebbar machen

[ingobar]

Hallo zusammen,

ich würde gerne etwas wie ein Puzzle machen. Wie kann ich die Bilder in einem JFrame verschiebbar machen? Muss ich die Bilder in ein Canvas zeichnen? Wenn ja wie, finde ich denn dann raus, auf welchem Puzzleteil der Mauszeiger steht? Vor allem, wenn die Puzzleteile krummlinig begrenzt sind?

 

[Ebenius]

Canvas ist AWT, der hat in einem JFrame nichts zu suchen.

Ich würde ein JPanel ableiten, welches mir alle Bilder malt. In diesem JPanel würde ich auf MouseEvents und MouseMotionEvents hören. Jedes Tile hat eine Form (Shape). Die Form kann prüfen, ob sich Koordinaten innerhalb der Form befinden.

Ebenius

 

[ingobar]

Hast du irgendwo ein wenig Beispielcode?

 

[Ebenius]

Hast du irgendwo ein wenig Beispielcode?

Eigens für Dich angefertigt... So in ewta kann man das machen. Oder auch ganz anders.
JigsawPiece.java

public class JigsawPiece {

  private Icon icon;
  private Shape shape;

  /**
   * Returns the icon.
   * 
   * @return the icon
   */
  public Icon getIcon() {
    return icon;
  }

  /**
   * Returns the shape.
   * 
   * @return the shape
   */
  public Shape getShape() {
    return shape;
  }

  /**
   * The new location of {@code this JigsawPiece}.
   * 
   * @param x the point's X value
   * @param y the point's Y value
   */
  public void setLocation(int x, int y) {
  // TODO: set the location (upper left corner) of the shape here!
  }
}

JJigsawPane.java

public class JJigsawPane extends JPanel {

  private List<JigsawPiece> pieces = new ArrayList<JigsawPiece>();
  private JigsawPiece floatingPiece = null;
  private Point floatingFrom = null;

  /** Creates a new {@code JJigsawPane}. */
  public JJigsawPane() {
    enableEvents(AWTEvent.MOUSE_EVENT_MASK);
    enableEvents(AWTEvent.MOUSE_MOTION_EVENT_MASK);
    setFocusable(true);
  }

  /**
   * Get the jigsaw piece at the given coordinates.
   * 
   * @param x the X value of the point
   * @param y the Y value of the point
   * @return the jigsaw piece & possibly {@code null}
   */
  public JigsawPiece getJigsawPieceAt(int x, int y) {
    for (JigsawPiece piece : pieces) {
      if (piece.getShape().contains(x, y)) {
        return piece;
      }
    }
    return null;
  }

  protected void moveFloatingJigsawPiece(MouseEvent e) {
    final JigsawPiece piece = floatingPiece;
    final Rectangle bounds = piece.getShape().getBounds();
    piece.setLocation(bounds.x + floatingFrom.x - e.getX(), bounds.y
          + floatingFrom.y
          - e.getY());
    floatingFrom = e.getPoint();
    final Rectangle newBounds = piece.getShape().getBounds();
    repaint(bounds.union(newBounds));
  }

  @Override
  protected void processMouseEvent(MouseEvent e) {
    super.processMouseEvent(e);
    final JigsawPiece piece;
    if (e.getID() == MouseEvent.MOUSE_PRESSED
          && (piece = getJigsawPieceAt(e.getX(), e.getY())) != null) {
      /* piece becomes floating */
      floatingPiece = piece;
      floatingFrom = e.getPoint();
      repaint(piece.getShape().getBounds());
    } else if (MouseEvent.MOUSE_RELEASED == e.getID()
          && floatingPiece != null) {
      /* piece stops floating */
      moveFloatingJigsawPiece(e);
      floatingPiece = null;
      repaint();
    }
  }

  @Override
  protected void processMouseMotionEvent(MouseEvent e) {
    super.processMouseMotionEvent(e);
    if (MouseEvent.MOUSE_DRAGGED == e.getID() && floatingPiece != null) {
      moveFloatingJigsawPiece(e);
    }
  }

  @Override
  protected void paintComponent(Graphics g) {
    super.paintComponent(g);

    final Graphics2D g2d = (Graphics2D) g;
    for (JigsawPiece piece : pieces) {
      /* paint all but the floating piece */
      if (piece != floatingPiece) {
        paintJigsawPiece(g2d, piece, true);
      }
    }

    /* paint the floating piece on top */
    if (floatingPiece != null) {
      paintJigsawPiece(g2d, floatingPiece, true);
    }
  }

  protected void paintJigsawPiece(
        Graphics2D g2d,
        JigsawPiece puzzleTile,
        boolean isFloating) {
    final Icon icon = puzzleTile.getIcon();
    final Shape shape = puzzleTile.getShape();
    final Rectangle bounds = shape.getBounds();
    icon.paintIcon(this, g2d, bounds.x, bounds.y);
    if (isFloating) {
      g2d.setColor(Color.BLACK);
      g2d.draw(shape);
    }
  }
}

Der Code oben ist nur ein Ansatz; weder zu Ende programmiert noch jemals getestet.

Ebenius

 

[ingobar]

WOW, ich bin beeindruckt. Mich hat das ganze so beschäftigt, dass ich das Projekt schon wieder aufgeben wollte. Aber mit so einem Ansatz.. Ich werde mich einfach mal Zeile für Zeile durchwurschelt und schauen, dass ich was ans Laufe kriege.

Vielen, vielen Dank.