Thorsten F.: Bild bewegen

Hi Leute,
ich habe im Netz schon lange gesucht, aber irgendwie nichts gefunden.

Ich möchte ein Bild per Mauskoordinaten bewegen.

Startposition: Ich klicke auf das Bild und bekomme so die Koordinaten per Mousepressed.

Endposition: Ich navigiere zu einer beliebigen Stelle, lasse die Maus los und bekomme so die Koordinaten per Mousereleased.

Das klappt auch schon alles.

Jetzt benötige ich Source-Code bzw. Hilfe von euch, wie ich es bewerstelligen kann, dass sich das Bild (nur waagerecht und senkrecht) vom Start bis zum Ende in einer beliebigen Geschwindigkeit bewegt.

Hat da jemand von euch eine Idee, wie ich so etwas bewerkstelligen kann?
Wäre für jeden Rat dankbar...

  1. Vielleicht hilft dir dieser Code etwas weiter:

    <html>
    <script language="javascript">
    <!--
    function Show() {
    if(document.getElementById)
       document.getElementById("layer").style.visibility = "visible";
    }
    function Hide() {
    if(document.getElementById)
       document.getElementById("layer").style.visibility = "hidden";
    }

    function Fensterhoehe()
    {
    if (window.innerHeight) return window.innerHeight;
    else if (document.body && document.body.offsetHeight) return document.body.offsetHeight;
    else return 0;
    }

    function Up() {
       if(document.getElementById)
        { document.getElementById("layer").style.height = 50;
          document.getElementById("layer").style.overflow = "visible";
          document.getElementById("layer").style.left = 150;
          document.getElementById("layer").style.top = 200;
          document.getElementById("layer").style.width = 200;
        }
    }

    function Down() {
       hoe=Fensterhoehe();
       hoe-=25;
       if(document.getElementById)
        { document.getElementById("layer").style.height = 24;
          document.getElementById("layer").style.overflow = "hidden";
          document.getElementById("layer").style.left = 1;
          document.getElementById("layer").style.top = hoe;
          document.getElementById("layer").style.width = 150;
        }
    }
    var i=-100;
    var w=0;
    var h=0;
    function Fly() {
      if(i<400)
       { if(document.getElementById)
          document.getElementById("layer").style.left = i;
         i++;
         if(i>0) {
         if(w<201)
          { if(document.getElementById)
             document.getElementById("layer").style.width = w;
            w++;
          }
         if(h<81)
          { if(document.getElementById)
             document.getElementById("layer").style.height = h;
            h++;
          }
         }
         setTimeout('Fly()',5);
       }
    }

    function Soutput()
      { var hoe;
        hoe=Fensterhoehe();
        document.write("Höhe: " + hoe);
      }

    -->
    </script>
    <head><title>Layer-Test</title></head>
    <body bgcolor="#FFCC00"" onLoad="javascript:Fly()">
    <br><br><br><br>
    <a href="javascript:Show()">Show</a>
    <div id="layer" style="overflow:hidden; border-width:2px; border-color:silver; border-style:outset; visibility:visible; margin-top:0px; position:absolute; visibility:hide; width:0px; height:0px; background-color:white; top:200px; left:-200px;">
    <table height=20 bgcolor="darkblue" width="100%" cellpadding=0 cellspacing=0 style="border-bottom-color:silver; border-bottom-style:groove; border-bottom-width:1px">
      <tr>
        <td align=left style="color:white; font-family:arial; font-weight:normal;">
        &nbsp;Werbung
        </td>
        <td align=right valign=top>
        <a href="javascript:Down();" style="text-decoration:none; font-weight:bold; color:white">_</a>
        <a href="javascript:Up();" style="text-decoration:none; font-weight:bold; color:white">[]</a>
        <a href="javascript:Hide();" style="text-decoration:none; font-weight:bold; color:white">x</a>
        </td>
       </tr>
    </table>
    <table width="100%" cellpadding=5 cellspacing=5>
      <tr>
        <td align=center><a href="http://www.g-schraml.at.tf" style="font-size:14pt; text-decoration:none; color:#FF8000; font-weight:bold; font-family:Verdana">g-schraml.at.tf</a></td>
      </tr>
    </table>
    </div>
    </body>
    </html>

    1. Naja,
      eigentlich hatte ich ja auf Hilfe für Java gehofft und nicht für JS.
      Aber ich werde mir den Code mal anschauen, um dann eventuell in Java weiterarbeiten zu können. So vom Prinzip her...

      1. Hallo,

        eigentlich hatte ich ja auf Hilfe für Java gehofft und nicht für JS.

        Dann musst Du uns noch sagen, in welcher GUI-Umgebung Du ein Bild bewegen möchtest.

        [ ] Innerhalb eines 2D-Graphics-Kontextes java.awt.Graphics oder java.awt.Graphics2D
        [ ] In einer AWT - Application, in einem java.awt.Canvas bzw. java.awt.Container
        [ ] In einem java.applet (java.awt.Panel)
        [ ] In einer Swing - Application
        [ ] In einem javax.swing.JApplet

        viele Grüße

        Axel

        1. Also, ich will mal anfangen ein Spiel zu prorammieren. Und da wollte ich mal ganz einfach anfangen, also was noch nix mit dem Spiel zu tun hat.
          Wollte mal rausfinden, wie das geht ein objekt per maus oder per tastatur-Steuerung von A nach B zu bewegen.

          Und da weiß ich jetzt nicht, welches ich von den unten genannten Sachen am besten nehmen soll...

          [ ] Innerhalb eines 2D-Graphics-Kontextes java.awt.Graphics oder java.awt.Graphics2D
          [ ] In einer AWT - Application, in einem java.awt.Canvas bzw. java.awt.Container
          [ ] In einem java.applet (java.awt.Panel)
          [ ] In einer Swing - Application
          [ ] In einem javax.swing.JApplet

          viele Grüße

          Axel

          1. Also, ich will mal anfangen ein Spiel zu prorammieren. Und da wollte ich mal ganz einfach anfangen, also was noch nix mit dem Spiel zu tun hat.
            Wollte mal rausfinden, wie das geht ein objekt per maus oder per tastatur-Steuerung von A nach B zu bewegen.
            Und da weiß ich jetzt nicht, welches ich von den unten genannten Sachen am besten nehmen soll...

            Dafür nimmst Du java.awt.Graphics bzw. java.awt.Graphics2D.

            Schau Dir mal http://java.sun.com/j2se/1.4.2/docs/index.html geauer an. Speziell die Code-Beispiele

            http://java.sun.com/docs/books/chanlee/supplement/examples.html
            http://java.sun.com/docs/books/chanlee/second_edition/vol1/examples.html
            http://java.sun.com/docs/books/chanlee/second_edition/examples.html

            Du solltest Dir die alle herunterladen und ansehen.

            Im letzten gibt es unter J1/JAVA/APPLET/APPLET ein Applet, in dem man Duke mit der Maus einfangen kann. Das war mein Einstieg in diese Problematik.

            viele Grüße

            Axel