nicht angemeldet
"Rollender Ball"
0 0 0 0 
JürgenB
0 
Der Martin
"Rollender Ball"
Hallo Forianer,
ich steh gerade vor einem kleinen Problem und ich hoffe, dass einer von euch eventuell mir einen kleinen Hinweis geben kann, wie ich jetzt am Besten weitermache.
Bei der angegebenen Seite besteht die Startseite nur aus einem Bild, dass über den gesamten Bildschirm gestreckt werden soll (hab ich soweit hinbekommen). Auf dem Bild ist eine Art Sinuskurve zu sehen. Die Problemstellung ist nun folgende:
Wie bekomme ich es hin, dass auf dieser Kurve ein Ball quasi rollt? Bestenfalls sollte der Ball mit Text oder Grafiken gefüllt sein. Ich habe bisher als Lösungsansatz ein wenig mit einem Animations-Framework rumgespielt, aber da müsste ich eine Funktion angeben können, die den Animationspfad beschreibt...
Vielleicht hat ja jemand anders eine tolle Idee... ;-)
Viele Grüße
Devius
-
Bei der angegebenen Seite besteht die Startseite nur aus einem Bild, dass über den gesamten Bildschirm gestreckt werden soll (hab ich soweit hinbekommen).
Wie hast du das geschafft?
aber da müsste ich eine Funktion angeben können, die den Animationspfad beschreibt...
Irgendwie musst du ja beschreiben wo der Ball rollen soll, von selber sieht er das ja nicht. Aber wenn das Bild und die Kurve von dir ist, sollte das ja möglich sein?
Vielleicht hat ja jemand anders eine tolle Idee... ;-)
Bilderkennung in JavaScript, aber ich glaub nicht dass es das gibt ;-)
-
Bei der angegebenen Seite besteht die Startseite nur aus einem Bild, dass über den gesamten Bildschirm gestreckt werden soll (hab ich soweit hinbekommen).
Wie hast du das geschafft?<img src="" alt="" style="border:1px none #fff;width:100%;height:100%;" />
Klappt jedenfalls im FF und IE.
aber da müsste ich eine Funktion angeben können, die den Animationspfad beschreibt...
Irgendwie musst du ja beschreiben wo der Ball rollen soll, von selber sieht er das ja nicht. Aber wenn das Bild und die Kurve von dir ist, sollte das ja möglich sein?Naja, ich habe das Bild als Corel Draw-Datei bekommen. Derjenige, der es ursprünglich gemalt hat, hat wahrscheinlich keine bekannte mathematische Funktion benutzt... :-(
Vielleicht hat ja jemand anders eine tolle Idee... ;-)
Bilderkennung in JavaScript, aber ich glaub nicht dass es das gibt ;-)Wäre aber ziemlich cool ;-)
Viele Grüße
Devius-
Vielleicht hat ja jemand anders eine tolle Idee... ;-)
Bilderkennung in JavaScript, aber ich glaub nicht dass es das gibt ;-)Wäre aber ziemlich cool ;-)
Ist es tatsächlich, nennt sich HTML5 Canvas und funktioniert zumindest in modernen Browsern - ist aber durchaus nicht die schnellste Lösung. Versuche, die verwendete Funktion näherungsweise mit einer JS-Funktion zu beschreiben. Wenn Du Hilfe dabei brauchst, verlinke uns das Bild, so dass wir es sehen können.
Gruß, LX
--
RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.-
Vielleicht hat ja jemand anders eine tolle Idee... ;-)
Bilderkennung in JavaScript, aber ich glaub nicht dass es das gibt ;-)Wäre aber ziemlich cool ;-)
Ist es tatsächlich, nennt sich HTML5 Canvas und funktioniert zumindest in modernen Browsern - ist aber durchaus nicht die schnellste Lösung. Versuche, die verwendete Funktion näherungsweise mit einer JS-Funktion zu beschreiben. Wenn Du Hilfe dabei brauchst, verlinke uns das Bild, so dass wir es sehen können.
Mit HTML5 habe ich mich bisher noch nicht beschäftigt, vielleicht sollte ich bei Gelegenheit ein paar Wissenslücken ausgleichen. Für die aktuelle Fragestellung nutzt es mir jedoch nichts, da ich auch die ollen Browser mit unterstützen muss...
Das Bild ist unter http://konfin.de/de/start.png zu finden, eingebunden wird es auf der Seite http://konfin.de/. Die Erläuterungen auf dem Bild können ignoriert werden.
Viele Grüße
Devius-
Und hier ist auch schon der Test, den Du verwenden kannst, um eine angemessene Funktion zu finden:
<DOCTYPE html> <html lang="de"> <head> <title>Canvas Plot Test</title> </head> <body> <canvas id="plot" width="800" height="400"> <script type="text/javascript"> var plotfunc=function(x){ return Math.pow(Math.sin(x/Math.PI/20),2)*200+100; } var img=new Image(), plot=document.getElementById('plot'), plotcontext=plot.getContext('2d'); img.src='http://konfin.de/de/start.png'; img.onload=function(){ plotcontext.drawImage(img, 0,0, 800, img.height/img.width*800); plotcontext.strokeColor='#00FF00'; plotcontext.beginPath(); for (var x=0; x<800; x++) { if (x==0) { plotcontext.moveTo(x, plotfunc(x)); } else { plotcontext.lineTo(x, plotfunc(x)); } } plotcontext.stroke(); }; </script> </body> </html>Viel Spaß beim Suchen!
Gruß, LX
--
RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.-
Und hier ist auch schon der Test, den Du verwenden kannst, um eine angemessene Funktion zu finden:
Viel Spaß beim Suchen!
Gruß, LX
Vielen Dank, ich werde mal schauen, ob ich damit die richtige Funktion treffe...
Viele Grüße
Devius
-
-
-
-
Hallo Devius,
Wäre aber ziemlich cool ;-)
du könntest mal unter CANVAS suchen, wie man an die Pixelwerte einer Grafik kommt. Der IE 8 und älter bleiben da aber draußen vor. Außerdem kann ich mir vorstellen, dass du die Rechner deiner Besucher arg überforderst, wenn du versuchst, in einem Bild eine Linie zu finden.
Ich glaube, dir bleibt da nur der uncoole Weg, aus dem Bild die Koordinaten von Hand auszulesen (je nach Anforderung an Geschmeidigkeit der Bewegung so um die 100 Werte). Da du dein Bild auf 100% zoomst, musst du diese Werte noch in Prozentwerte umrechnen.
Gruß, Jürgen
-
Hallo,
Bei der angegebenen Seite besteht die Startseite nur aus einem Bild, dass über den gesamten Bildschirm gestreckt werden soll (hab ich soweit hinbekommen).
Wie hast du das geschafft?
<img src="" alt="" style="border:1px none #fff;width:100%;height:100%;" />damit erstreckt sich das Bild aber selbstverständlich nicht über den gesamten Bildschirm, sondern nur über das Browserfenster.
Ciao,
Martin--
Irgendwann in grauer Vorzeit benutzte einer unserer prähistorischen Vorfahren ein Schimpfwort anstelle der Keule.
Die Zivilisation hatte begonnen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo,
Bei der angegebenen Seite besteht die Startseite nur aus einem Bild, dass über den gesamten Bildschirm gestreckt werden soll (hab ich soweit hinbekommen).
Wie hast du das geschafft?
<img src="" alt="" style="border:1px none #fff;width:100%;height:100%;" />damit erstreckt sich das Bild aber selbstverständlich nicht über den gesamten Bildschirm, sondern nur über das Browserfenster.
Touché!
Viele Grüße
Devius
-
-
-
