html5 canvas rubbeleffekt

  • Hallo,


    ich habe mittels Canvas eine Art Rubbellos erstellt (2 Canvas-Elemente mit jeweils einem Bild. Ein Bild on top - vor dem Rubbeln und ein Bild darunter, das "freirubbelte" Bild).
    Sobald das Bild freigerubbelt ist (ca. 90%) sollte die Fläche klickbar sein und auf eine Site verlinken. Wenn ich ein a href tag drum herum mache klickt es sobald man anfängt zu rubbeln bzw noch bevor man überhaupt rubbeln kann. Ich brauch also eine if Bedingung. Aber ich weiss nicht genau wie ich da vorgehen.
    Könnt ihr mir da weiterhelfen?


    Hier eine Demo von einem Rubbellos.
    http://mt111036.students.fhstp.ac.at/rubbel/untitled.html


    Danke + lG,
    KS

  • Du schnappst dir JavaScript, Damit überprüfst du den Prozentualen Anteil der freigrubbelten Fläche (Keine Ahnung wie das geht oO ) Und wenn dies NICHT stimmt fängst du den Link ab ( oder andersrum, triggerst ihn -> wäre warsch. besser)

  • Das kann Canvas:



    Jetzt noch prüfen ob mehr als 90% frei gemacht (oder im Beispiel bedeckt) sind und dann den Link aktivieren. Deaktivieren könnte man so:


    HTML
    <a href="verweis.htm" id="canvas_success_link">
        <canvas id="canvas" width="500" height="500"></canvas>
    </a>
    JavaScript
    document.getElementById("canvas_success_link").addEventListener("click", function (event)
    {
        if (percentage < 90)
            event.preventDefault();
    });


    Oder einfach einen Klick auf das Canvas abfangen:


    JavaScript
    document.getElementById("canvas").addEventListener("click", function (event)
    {
        if (percentage >= 90)
            window.location.href = "verweis.htm";
    });
  • Wow, vielen Dank für die ausführliche Antwort. Werd mich mal dahinter setzen und schauen ob es funktioniert.
    Dankeschön!
    hallo,


    irgendwie hab ich noch so meine probleme...
    er schreibt mir andauernd "ctx is not defined"... hab schon alles versucht aber irgendwie finde ich keine lösung.

  • Du definierst mainctx in einer Funktion mit dem Keyword var -> Die Variable ist außerhalb der Funktion nicht nutzbar. Initiiere die Variable vor der Funktion (Global)(böse) oder setze den Context neu über getContext (nicht ganz so böse).

  • Vielen Dank,


    Mühsam ernährt sich das Eichhörnchen.
    Soweit passt es jetzt. Nur gibt er mir noch nicht die % aus (steht nur NaN).
    Ich glaub da hat's noch was mit'n Ctx.


    Abgesehen davon: kann es sein dass es zwar auf dem Desktop funktioniert und mobil nicht? Mobil kann ich die Fläche nicht klicken. Weißt du woran das liegen könnte?


    Danke

  • Das click Event vom Canvas blockiert das click Event auf den anchor-Tag. Das siehst du auch wenn du ohne rubbeln auf den Rand drückst, man wird weitergeleitet. Am Cmputer (Firefox) wird man direkt weitergeleitet wenn man auf das Feld klickt um zu rubbeln. Du solltest hier den Link entfernen und alles über ein Click-Event am Canvas direkt lösen:


    HTML
    <div class="hidden" id="main"> 
        <canvas id="maincanvas"></canvas>
    </div>
    JavaScript
    document.getElementById("maincanvas").addEventListener("click", function(){
        if(percentage < 90)
            window.location.href = "http://www.google.at";
    });


    Oder Alternativ wenn du einen neuen Tab erzwingen möchtest etwas in die Richtung:


    JavaScript
    document.getElementById("maincanvas").addEventListener("click", function(){
        if(percentage < 90)
            window.open
            (
                "http://www.google.at"',
                "_blank" 
            );
    });


    Auf Windows Phone funktioniert dein Rubbelfeld ürigens überhaupt nicht, lediglich der Link lässt sich am Rand aufrufen. Das liegt daran, dass WP8.1 touch Events nicht unterstützt, sondern auf Click Events zurückgreift, leider muss man "touchmove" demnach etwas umständlich lösen.

  • Ja in Zeile 332 musst du canvas noch mit main ersetzen, dort wird natürlich das DOM Element für die Breite und Höhe benötigt:


    JavaScript
    dimension = main.width * main.height;


    Außerdem musst du bedenken, dass du die Überprüfung, also grob Zeile 296 bis 335, bei jedem mouseup Event ausführen musst und nicht nur anfangs ein mal. Also verschieben in die mouseup_handler Funktion. Die entsprechenden Funktionen (hex2rgb und checkTolerance) dementsprechend an den Script-Anfang.

  • hm schon klar, aber dann kann ich nicht mehr auf die percentage-Variable zugreifen. oder gehört der part auch noch mit in den mouseup-Handler?
    Sorry bin schon etwas verwirrt...

  • Ich kann auch an der Stelle nur ganz klar empfehlen die Sache vielleicht noch mal von vorne aufzurollen. Du hast jetzt deine eigenen Funktionen mit meinen vermischt und darunter leidet die Übersicht derzeit stark. Du verwendest viele verschiedene Variablen mit unterschiedlichen Namen für die gleichen Inhalte, was auch auf mehrfache Überarbeitung schließen lässt.


    Am Besten schreibst du dir einen kurzen Ablaufplan, fängst dann an deine Funktionen zu definieren und diese dann in logischer Reihenfolge auszuführen. Ein Neuanfang ist in diesem Fall vermutlich schneller und einfacher als sich ewig durch die Zeilen zu arbeiten. Des Weiteren hast du dannvon Anfang an den Überblick über deine Funktionen, so kannst du persönlich Fehler schneller ausfindig machen und hast auch die Laufzeit im Blick.


    Wenn du dabei Hilfe brauchst darfst du natürlich gerne jederzeit fragen. Wenn du deinen aktuellen Code behalten willst musst du unter Umständen warten bis sich jemand erbarmt die Kiste aufzuarbeiten :rolleyes:

  • :D


    ich habe es jetzt etwas bereinigt...


    aber ich steh bei den prozenten an. Da ist das Click-Event, wo ich die ich die if-Bedingung (wenn über 90 Prozent dann soll er ein neues Tab öffnen) reinschreibe. Aber percentage ist hier undefined. Ich ich weiss nicht wie ich die übergebe :/ ich stehe an. vielleicht denk ich zu kompliziert

  • In Basi's script sind die in Zeile 69 definiert

    JavaScript: 69
    percentage = pixel * 100 / dimension;


    Eventuell musst du die Variable 'superglobal' definieren um sie dann auch ebenso verfügbar zu haben.. hier ein kleines Beispiel dazu:

    JavaScript
    var prozente;
    function neuerWert(){
      lokale = 'hallo welt';//diese Variable ist nur LOKAL (innerhalb) der Funktion verfügbar
      prozente = 10;//die Variable wird IN der Funktion geändert und ist aber GLOBAL (auch außerhalb) verfügbar
    }
    neuerWert();
    console.log(lokale);      //-> 'lokale is undefined'
    console.log(prozente);    //-> '10'
  • Hallo,


    ich sitz schon seit über eine Stunde vor dem Code... bin alles noch einmal durchgegangen und bin echt am verzweifeln.
    Ich bin mir ziemlich sicher dass ich den Bug schon gefunden habe
    http://mt111036.students.fhstp.ac.at/rubbel/index_v1.html


    In zeile 219 ist getImageData undefined. Ich habe die Variable des aufzurubbelnden Canvas angegeben (canvas.draw)... Ich versteh also nicht wieso es undefined ist... :(


    Und aus welchem Grund gibt er mir den Befehl console.log() nicht mehr aus?


    Über eure Hilfe würde ich mich sehr freuen...
    DANKE und LG

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!